自定义FlexibleLayout动态加载页面布局实现标题与内容分离

作者：fatchao

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

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

需要实现的小目标

1. 自定义一个ViewGroup中，然后里面承载所有的布局，然后根据状态返回相应的布局;

2. 将活动中的的setContentView（查看）与片段中的onCreateView返回的搜索替换成的ViewGroup中对应的布局;

3. 不管是哪一种显示状态，都需要展示标题，并且实现标题跟内容分离;

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

自定义的ViewGroup

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

填充的布局layout_all

FlexibleLayout

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

动态替换活动以及片断中的查看

我们知道不管是活动还是片段，都有一个类似的方法

活动

分段

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

BaseActivity

BaseFragment

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

实现标题与内容的分离

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

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

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

给标题栏设置一个标签

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

构造方法修改

状态改变修改

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

• ViewCallBack

ViewCallBack接口位于主讲内部，BaseActivity以及BaseFragment实现该接口，当主持人拿到数据之后，回调活动或者Fragemnt，刷新界面

• BasePresenter

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

• BaseActivity

V代表回调的数据格式

• 主要活动

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

演示下载地址：

https://github.com/wuster2015/FlexiableLayout

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

刘桂林

微信号 : Android_LiuGuiLin

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