蛋疼:UI布局重构的几个思考

这篇作为XDroid UI系列的最后一篇,我想谈谈在UI布局重构时的几个思考和取舍。

四个月前,接手公司项目,随即进行了一系列的重构,主要阵对底层库如UI、Cache、Event、Net等。

对于UI,我们一定会面对一个事实:任何一个设计Api通信的界面,都会包含LoadingErrorEmptyContent四个状态。
因此,我们有必要封装一个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快速开发框架。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容