自定义FlexibleLayout动态加载页面布局实现title与content分离

之前也看过一些关于加载状态的文章,可以通过提前配置页面加载的loading,error以及empty布局来显示相应的布局,不过需要在每个布局文件中进行定义,然后findviewbyid,觉得比较麻烦,而且认为一个好的产品的UI设计对于大部分的UI风格应该是一致的,类似于京东跟淘宝,所以loading,error以及empty相关的View应该都是基本一致的,所以就打算换一种思路来实现一个FlexibleLayout,不需要改变程序的布局文件,并且可以实现标题和内容进行分离,在轻轻异常的时候也能够让用户知道当前是关于哪个界面的,效果图如下:

效果图

需要实现的小目标

  1. 自定义一个ViewGroup,然后里面承载所有的布局,然后根据状态返回相应的布局;
  2. 将Activity中的setContentView(View)与Fragment中的onCreateView返回的View替换成ViewGroup中对应的布局;
  3. 不管是哪一种显示状态,都需要展示title,并且实现标题跟content分离;

下面针对这三步来进行分析

自定义ViewGroup

ViewGroup有很多,常见的三种Relativelayout、Linelarlayout和Framelayout,其实三种布局都是OK的,不过因为Relativelayout需要绘制两次,所以建议使用LinearLayout和Framelayout,因为自定义的Viewgroup需要填充三个布局,并且都是ViewStub标签,所以这里用Linearlayout布局会简单一下,所以就使用LinearLayout作为继承的Group了,下面来看一下代码:

填充的布局 layout_all

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ViewStub
android:id="@+id/vs_loading"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout="@layout/layout_loading"/>

<ViewStub
android:id="@+id/vs_end"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout="@layout/layout_empty"/>

<ViewStub
android:id="@+id/vs_error"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout="@layout/layout_error"/>

</merge>

FlexibleLayout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
public abstract class FlexibleLayout extends LinearLayout {
private View mLoadingView;
private View mNetworkErrorView;
private View mEmptyView;
private ViewGroup mSuccessView;
private ProgressBar mLoadingProgress;
private TextView mLoadingText;
private View title;

public FlexibleLayout(Context context) {
super(context);
setOrientation(VERTICAL);
inflate(context, R.layout.layout_all, this);
mSuccessView = initNormalView();
title = mSuccessView.findViewWithTag("title");
addView(mSuccessView);
}

//初始化NormalView,交给子类去实现
public abstract ViewGroup initNormalView();

//请求数据,交给子类去实现
public abstract void onLoad();


public void loadData() {
showPageWithState(State.Loading);
onLoad();
}


//根据状态来显示对应的View
public void showPageWithState(State status) {

switch (status) {
case Normal:
//显示示正常的布局
break;
case Loading:
//显示正在加载的布局
break;
case Empty:
//显示空布局
break;
case NetWorkError:
//显示失败布局
break;
default:
break;
}
}


}

上面的代码比较简单,就是自定义了一个ViewGroup,然后填充了四种布局,然后能够根据相应的状态显示对应的布局,由于代码比较简单,就没有贴出来,只是用伪代码加以展示

动态替换Activity以及Fragment中的View

我们知道不管是Activity还是Fragment,都有一个类似的方法

Activity

1
setContentView(View view);

Fragment

1
2
3
4
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = initView(inflater, container)
return view;
}

我们需要做的就是用FlexibleLayout替换掉View就好了,具体的实现代码如下:

BaseActivity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
public abstract class BaseActivity<T extends BasePresenter, V> extends AppCompatActivity implements Toolbar.OnMenuItemClickListener, ViewCallBack<V>, View.OnClickListener {
public T presenter;
private Toolbar mToolbar;
private TextView mTitle;
protected Context mContext;
protected FlexibleLayout mFlexibleLayout;

@Override
protected void onCreate(Bundle bundle) {
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(bundle);
mContext = this;
setContentView(initView());
initViews();
mFlexibleLayout.loadData();
}

private View initView() {
mFlexibleLayout = new FlexibleLayout(mContext) {
@Override
public ViewGroup initNormalView() {
return initViewGroup();
}

@Override
public void onLoad() {
if (presenter == null)
presenter = initPresenter();
getData();
}
};
return mFlexibleLayout;
}

private ViewGroup initViewGroup() {
ViewGroup view = (ViewGroup) View.inflate(mContext, getLayoutId(), null);
return view;
}



protected abstract int getLayoutId();//获取填充界面ID


protected abstract void initViews();//初始化子类控件

protected abstract void initListener();//初始化监听事件

protected abstract T initPresenter();//初始化Presenter

protected abstract void getData();//获取数据




}

BaseFragment

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
public abstract class BaseFragment<T extends BasePresenter, V> extends Fragment implements View.OnClickListener, ViewCallBack<V> {
public T presenter;
protected boolean isVisible;
protected Context mContext;
protected boolean isPrepared;
protected FlexibleLayout mFlexibleLayout;
private TextView tvTitle;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mContext = getActivity();
View view = initView(inflater, container);
initListener();
mFlexibleLayout.loadData();
isPrepared = true;
return view;
}



//初始化normalView
private ViewGroup initView(final LayoutInflater inflater, final ViewGroup parent) {
mFlexibleLayout = new FlexibleLayout(mContext) {

@Override
public ViewGroup initNormalView() {
return initViewGroup(inflater, parent);

}

@Override
public void onLoad() {
if (presenter == null)
presenter = initPresenter();
getData();
}
};
return mFlexibleLayout;
}


private ViewGroup initViewGroup(LayoutInflater inflater, ViewGroup parent) {
ViewGroup view = (ViewGroup) inflater.inflate(getLayoutId(), parent, false);
tvTitle = (TextView) view.findViewById(R.id.tv_title);
initCustomView(view);
return view;
}


protected abstract int getLayoutId();//获取资源ID

protected abstract void initCustomView(View view);//初始化界面

protected abstract void initListener();//初始化监听事件

protected abstract T initPresenter();//初始化数据以及请求参数

protected abstract void getData();//获取数据

代码是用MVP写的,可以先不用管,我晚点再解释一下,只需要关注一下View的初始化,就是通过继承拿到子类的布局然后填充到FlexibleLayout,showRightPage这个方法供子类进行调用,通过不同的code来进行显示对应的状态,比较好理解

实现title与content的分离

截止到现在,基本上实现了动态加载对应布局的功能了,但是问题在于在加载非正常布局的时候,整个页面要么是空的,要么是满屏的进度条,在网上找了下,也没找到相应的解决方案,后来心一横打算自己实现,其实真没自己想的那么难,因为title与content的分离,实际上就是把Activity或者Fragment中的标题栏移动到FlexibleLayout中去而已,之前的思路总是想着去怎么显示正常布局中的标题而不是内容,换了个思路豁然开朗,于是思路就出来了

  • 如果Activity或者Fragment中有标题栏,将标题栏移动到FlexibleLayout中,放在最顶部,不管是加载任何一种状态,都会有标题栏;
  • 如果没有标题栏,则不需要做任何处理

给标题栏设置一个tag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@id/toolbar"
android:layout_width="match_parent"
android:layout_height="42dp"
android:background="@color/black_back"
android:tag="title"
app:contentInsetStart="0dp"
app:popupTheme="@style/AppTheme.PopupOverlay">

<TextView
android:id="@id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:ellipsize="end"
android:lines="1"
android:text="标题"
android:textColor="@color/white_text"
android:textSize="17sp"/>


</android.support.v7.widget.Toolbar>

在FlexibleLayout中进行判断,有的话就移动,否则只有content的话就不需要分离

构造方法修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private View title;

public FlexibleLayout(Context context) {
super(context);
setOrientation(VERTICAL);
setClipToPadding(true);
//防止状态栏盖住标题栏,必须在代码中设置,因为FlexibleLayout中加载的标签是merge,会被自动忽略
setFitsSystemWindows(true);
inflate(context, R.layout.layout_all, this);
mSuccessView = initNormalView();
title = mSuccessView.findViewWithTag("title");
addView(mSuccessView);
int childCount = getChildCount();

}

状态改变修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
public void showPageWithState(State status) {
if (status != State.Normal && title != null) {
String tag = (String) getChildAt(0).getTag();
if (TextUtils.equals(tag, "title")) {
//是否有标题栏
} else {
mSuccessView.removeView(title);
addView(title, 0);
}

}
switch (status) {
case Normal:
mSuccessView.setVisibility(VISIBLE);
String tag = (String) mSuccessView.getChildAt(0).getTag();
if (!TextUtils.equals(tag, "title") && null != title) {
//是否有标题栏
removeView(title);
mSuccessView.addView(title, 0);
}
if (mLoadingView != null) {
mLoadingView.setVisibility(GONE);
}

if (mNetworkErrorView != null) {
mNetworkErrorView.setVisibility(GONE);
}

if (mNetworkErrorView != null) {
mNetworkErrorView.setVisibility(GONE);
}

break;

}
}

到这里基本上已经完成了,由于Base类中的代码是用MVP写的,这里简单说明一下

  • ViewCallBack
1
2
3
4
5
6
7
8
9
public interface ViewCallBack<V> {

/**
* @param code code:0:有数据,1:数据为空,2:加载失败
* @param data 定义好的数据类型
*/

void refreshView(int code, V data);
}

ViewCallBack接口位于Presenter内部,BaseActivity以及BaseFragment实现该接口,当Presenter拿到数据之后,回调Activity或者Fragemnt,刷新界面

  • BasePresenter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
public abstract class BasePresenter {

protected ViewCallBack mViewCallBack;

public void add(ViewCallBack viewCallBack) {
this.mViewCallBack = viewCallBack;
}

public void remove() {
this.mViewCallBack = null;
}

protected abstract void getData();
}
1
2
3
4
5
6
7
8
9
public class MainPresenter extends BasePresenter {
public MainPresenter() {
}

@Override
public void getData() {

}
}

BasePresenter抽象类,持有ViewCallBack引用,通过构造方法传入数据处理需要的参数,然后进行数据请求,通过ViewCallBack回调数据到Activity或者Fragemnt

  • BaseActivity
1
2
3
public abstract class BaseActivity<T extends BasePresenter, V> extends AppCompatActivity implements Toolbar.OnMenuItemClickListener, ViewCallBack<V>, View.OnClickListener {

}

V 代表回调的数据格式

  • MainActivity
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 public class MainActivity extends BaseActivity<MainPresenter, MainBean> {
private TabLayout tbDemo;
private ViewPager vpDemo;
private int mType;

@Override
protected int getLayoutId() {
return R.layout.activity_main;
}

@Override
protected void initViews() {
setTitle("主页面");
tbDemo = (TabLayout) findViewById(R.id.tb_demo);
vpDemo = (ViewPager) findViewById(R.id.vp_demo);
}

@Override
protected void initListener() {

}

@Override
protected MainPresenter initPresenter() {
mType = getIntent().getIntExtra("type", 0);
vpDemo.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
private String[] mTitles = getResources().getStringArray(R.array.name);

@Override
public Fragment getItem(int position) {
if (position == 1) {
return new TwoFragment();
} else if (position == 2) {
return new ThreeFragment();
} else if (position == 3) {
return new FourFragment();
}
return new OneFragment();
}

@Override
public int getCount() {
return mTitles.length;
}

@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}

});

tbDemo.setupWithViewPager(vpDemo);
return new MainPresenter();
}

@Override
protected void getData() {
showRightPage(mType);
// presenter.getData();
}


@Override
public void refreshView(int code, MainBean data) {

}


@Override
public void onClick(View v) {

}

}

正常的流程应该是通过getData在Presenter中请求数据,然后通过Viewcallback回调refreshView方法,在这里面来进行页面展示,不过为了测试方便,我直接在getData里面进行页面展示了,还有每个Activity和Fragment都有自己的Presenter和对应的数据回调类型,这里因为没有进行网络请求,所以全部共用的一个,基本上就这些,如果有哪里没有说清楚的话,欢迎沟通交流。

Demo下载地址