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

2023年3月25日 239次阅读 来源: droidlover

这篇作为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快速开发框架。

    原文作者：droidlover
    原文地址: https://www.jianshu.com/p/10d40de178bf
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞