自定义FlexibleLayout动态加载页面布局实现标题与内容分离
作者:fatchao
博客:http://www.jianshu.com/u/94dc45995a85
之前也看过一些关于加载状态的文章,可以通过提前配置页面加载的加载,错误以及空的布局来显示相应的布局,不过需要在每个布局文件中进行定义,然后findviewbyid,觉得比较麻烦,而且认为一个好的产品的UI设计对于大部分的UI风格应该是一致的,类似于京东跟淘宝,所以加载,错误以及空相关的搜索应该都是基本一致的,所以就打算换一种思路来实现一个FlexibleLayout,不需要改变程序的布局文件,并且可以实现标题和内容进行分离,在轻轻异常的时候也能够让用户知道当前是关于哪个界面的,效果图如下:
需要实现的小目标
-
自定义一个ViewGroup中,然后里面承载所有的布局,然后根据状态返回相应的布局;
-
将活动中的的setContentView(查看)与片段中的onCreateView返回的搜索替换成的ViewGroup中对应的布局;
-
不管是哪一种显示状态,都需要展示标题,并且实现标题跟内容分离;
下面针对这三步来进行分析
自定义的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
新浪微博:@刘某人程序员