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

作者：fatchao

博客：http://www.jianshu.com/u/94dc45995a85

前言

之前也看过一些关于加载状态的文章，可以通过提前配置页面加载的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）

（FlexibleLayout）

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

动态替换Activity以及Fragment中的View

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

（Activity）

（Fragment）

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

（BaseActivity）

（BaseFragment）

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

实现title与content的分离

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

• 如果Activity或者Fragment中有标题栏，将标题栏移动到FlexibleLayout中，放在最顶部，不管是加载任何一种状态，都会有标题栏；

• 如果没有标题栏，则不需要做任何处理

（给标题栏设置一个tag）

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

（构造方法修改）

（状态改变修改）

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

• ViewCallBack

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

• BasePresenter

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

• BaseActivity

（V 代表回调的数据格式）

• MainActivity

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

一命二运三风水，四修阴德五读书！

刘桂林

微信号 : Android_LiuGuiLin

新浪微博：@刘某人程序员