这篇作为XDroid UI系列的最后一篇,我想谈谈在UI布局重构时的几个思考和取舍。
四个月前,接手公司项目,随即进行了一系列的重构,主要阵对底层库如UI、Cache、Event、Net等。
对于UI,我们一定会面对一个事实:任何一个设计Api通信的界面,都会包含
Loading
、Error
、Empty
、Content
四个状态。
因此,我们有必要封装一个ViewGroup
,来更方便的实现需求。
取一个什么名字?
根据其实现的效果,取名为ContentLayout。
蓝图:我们可以如何使用?
这其实属于需求方面的内容了,先意淫一下吧。实现最终我们想这样:
- 灵活,不受场地(布局层次)的限制,不受控件大小的限制
- 简单:不需要写很多重复代码,api使用流畅
- 容易定制
思路:怎么实现上述需求?
我一开始有两个思路:
- 在基类中,创建一个ContentLayout,将整个Activity & FrameLayout 的布局设置成其子布局,ContentLayout中提供对应的api。
- 将ContentLayout作为自定义ViewGroup,提供自定义attr设置
我们对两种思路进行分析:
第一种思路其实也可实现,但是它有很多限制:
- ContentLayout作为了Activity & Fragment 的实际rootView,其大小一般都:
match_parent
,其大小和布局层级会受到很大的限制。 - 只能通过代码设置loading、error、empty对应的布局
- 侵入性太强,特别针对content对应的布局文件
第二种思路,则可以完美实现前面的需求:
- ContentLayout作为一个ViewGroup,可以用在任何地方任何层级,适合界面的某部分需要loading的需求
- 其自定义attr可以方便的在布局文件中就指定对应状态的布局资源文件
暂定四个自定义attr
- cl_contentLayoutId
- cl_emptyLayoutId
- cl_errorLayoutId
- cl_loadingLayoutId
看命名就知道弄啥的了...
继承RelativeLayout还是FrameLayout?
RelativeLayout & FrameLayout 都可以实现需求,但它们有所区别:RelativeLayout会measure两次。
因此我选择FrameLayout来实现。
选择LayoutId还是ViewId?
可能您对我这个提法有点疑惑,啥是LayoutId,啥是ViewId?
LayoutId即对应R.layout.xxx
布局资源id
ViewId即对应R.id.xxx
页面中view id
其实这两个东东对应两个思路:
(1)viewid:即在ContentLayout下搞四个布局,分别设置一个id并作为那四个自定义属性的值。
(2)layoutid:即搞几个layout,作为那四个自定义属性的值
对于思路一:我个人不太喜欢,这样会让ContentLayout子view众多且层级复杂,不好调试,更不美观
对于思路二:我很推崇,不同的状态对应单独的布局文件
因此,我决定选择LayoutId的方式实现。
如何实现?
选择LayoutId后,需要做两件事:
- inflate->view
- 将view作为ContentLayout的子view
后面的事,就是切换哪个view显示的问题了。
想到的可以优化的点:延迟inflate,需要的时候才inflate。
public QTContentLayout errorView(View errorView) {
bindView(errorView, STATE_ERROR);
return this;
}
content布局怎么搞?
ContentLayout中必定会有一个content布局,我们就没必要搞一个单独的layout。可以直接在contentlayout下搞一个子viewgroup。
默认情况下,将Contentlayout的第一个子view作为contentView。
如何实现呢?
重写onFinishInflate
方法中:
int childCount = getChildCount();
if (childCount == 1) {
contentView = getChildAt(0);
}
如何保存view的状态?
保存Ui状态一般是通过onSaveInstanceState()
和onRestoreInstanceState
来实现。
@Override
protected Parcelable onSaveInstanceState() {
Parcelable parcelable = super.onSaveInstanceState();
SavedState savedState = new SavedState(parcelable);
savedState.state = this.displayState;
return savedState;
}
@Override
protected void onRestoreInstanceState(Parcelable state) {
SavedState savedState = (SavedState) state;
super.onRestoreInstanceState(savedState.getSuperState());
this.displayState = savedState.state;
setDisplayState(this.displayState);
}
如何使用?
<cn.droidlover.qtcontentlayout.QTContentLayout
android:id="@+id/contentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
app:cl_emptyLayoutId="@layout/view_empty"
app:cl_errorLayoutId="@layout/view_error"
app:cl_loadingLayoutId="@layout/view_loading">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#854678"
android:gravity="center"
android:text="content"
android:textColor="@android:color/white"
android:textSize="28sp" />
</cn.droidlover.qtcontentlayout.QTContentLayout>
蛋疼完毕,具体实现过程可看源码。
XDroid:一个轻量级的Android快速开发框架。