Android性能优化第（十）篇---布局优化

版权声明：本文为LooperJing原创文章，转载请注明出处！

之前在Android性能优化第（四）篇---Android渲染机制说了一下UI的渲染，我们知道Android系统每隔16ms就重新绘制一次Activity，如果没有完成就会有丢帧的现象。为了减轻UI绘制的负担，有必要把Layout编写的一些注意事项总结一下。

首先说一下< include/>，< merge/>，ViewStub，如果对这部分清楚的朋友可以跳过。

1、< include/>重用

比如我们要写一个TitleBar（title_bar_layout.xml）,是这样子的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">

    <TextView
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:background="@drawable/back" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="竞技台"
        android:textSize="18sp" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="确定"
        android:textSize="18sp" />
</LinearLayout>

预览效果如下

include

每一个项目中都有TitleBar，所以使用< include/>进行服用，以便统一管理，在使用的时候，一行代码就OK了。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_layout_opt"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zhangwan.wj.com.myshare.activity.LayoutOptActivity">

    <include layout="@layout/title_bar_layout" />
</FrameLayout>

实际上对于TitleBar我们一般都会封装成一个控件来使用。

2、< merge/>减少视图层级

为什么要减少视图层级，在加载布局的时候，rinflater是通过深度优先遍历来构造视图树，每解析到一个View，就会递归调用rinflater,直到这条路径的最后一个元素，然后再回溯过来将每一个View添加到他们的parent中，整个View树构建完毕。在使用了include后可能导致布局嵌套过多，出现不必要的layout节点，从而导致解析变慢。这个时候我们可以使用< merge/>标签。< merge/>标签可用于两种典型情况：

• 布局顶结点是FrameLayout且不需要设置background或padding等属性，可以用merge代替，因为Activity内容试图的parent view就是个FrameLayout，所以可以用merge消除只剩一个。
• 某布局作为子布局被其他布局include时，使用merge当作该布局的顶节点，这样在被引入时顶结点会自动被忽略，而将其子节点全部合并到主布局中。

为了更好理解这两种情况，我们复习一下DecroView，DecroView是Activity的顶级View，继承与FramLayout,内部有一个竖直方向的LinerLayout,上面是标题栏，下面内容栏，内容栏是我们Activity的setContentView的布局，这个内容栏是个FramLayout。

DecroView

我们看第一种情况，我们通过View Hierarchy工具看一下，如图：

发现了有一个FrameLayout是不需要的。使用< merge/>修改。

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_layout_opt"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zhangwan.wj.com.myshare.activity.LayoutOptActivity">

    <include layout="@layout/title_bar_layout" />
</merge>

我们在通过View Hierarchy工具看一下，如图：

使用< merge/>修改后的

我们在看第二种情况

比如，如果你有一个 Layout 是一个竖直方向的 LinearLayout，其中包含两个连续的 View 可以在别的 Layout 中重用，那么你会做一个 LinearLayout 来包含这两个 View ，以便重用。不过，当使用另一个 LinearLayout 来嵌套这个可重用的 LinearLayout 时，这种嵌套 LinearLayout 的方式除了减慢你的 UI 性能外没有任何意义。
为了避免这种情况，你可以用 < merge/> 元素来替代可重用 Layout 的根节点。例如：

<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>
</merge>

3、ViewStub延迟加载

延迟加载意味着我们可以分批次的将一个Layout中的View解析加载到内存，比如说，我们最先加载Loading的布局，等待网络请求，然后加载常规展示的布局，当网络请求发生错误或者空数据的时候，加载错误布局。分批次加载减轻了CPU和GPU的负担，ViewStub 是一个轻量的视图，不需要大小信息，也不会在被加入的 Layout 中绘制任何东西。ViewStub可见或是被inflate了，ViewStub就不存在了，取而代之的是被inflate的Layout。所以它也被称做惰性控件。

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zhangwan.wj.com.myshare.activity.LayoutOptActivity">

    <include layout="@layout/title_bar_layout" />

    <ViewStub
        android:inflatedId="@+id/no_data_view"
        android:id="@+id/no_data_view"
        android:layout="@layout/no_data_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</merge>

注意android:inflatedId指定的no_data_view是布局no_data_layout的根id, android:layout="@layout/no_data_layout"是指定加载哪个布局。

要让ViewStub显示出来，可以用viewStub.infalte()或viewStub.setVisibility(View.VISIBLE)来完成，如下。

public void showEmptyView() {
       // listview.setVisibility(View.GONE);
        if (mNoDataView == null) {
            ViewStub noDataViewStub = (ViewStub)findViewById(R.id.no_data_view);
            mNoDataView = noDataViewStub.inflate();
        } else {
            mNoDataView.setVisibility(View.VISIBLE);
        }
    }

现在你可能会问，ViewStub和View.GONE的区别。他们的共同点是一开始的时候都不会显示，但是View.GONE在布局加载的时候，就已经添加到布局树上了，而ViewStub只会在显示的时候才会渲染布局。最后注意ViewStub加载的布局中不能有merge。

4、能用一个View搞定的，别用两个

给公司打个广告，有玩游戏的，可以下载小熊竞技台

看红框的部分，通常我们都是弄5个TextView在一个竖直方向的LinerLayout中，但是我们可以这样写

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="100dp"
    android:layout_margin="20dp"
    android:layout_width="match_parent">
    <TextView
        android:textSize="14dp"
        android:lineSpacingMultiplier="1.3"
        android:gravity="center_vertical"
        android:text="玩家等级\n对战总胜利\n胜率\n参与比赛\n获得冠军"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

在比如下图中红框部分我们可以使用SpannableStringBuilder

又比如下图

每个条目之间的间隔不要在使用一个空View了，如果使用margin阅读不直观。可以使用Space控件

<Space
     android:layout_width="match_parent"
     android:layout_height="15dp"/>

加入上图中，需求不是间隙，而是一条分隔线，怎么办呢？，难道是用一个View设置高度实现吗？非也！LinearLayout和ListView一样，有android:divider与android:showDividers属性。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content_home"
    android:orientation="vertical"
    android:divider="@drawable/divider"
    android:showDividers="middle"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  ...
     <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="个人信息" />
  ...
  
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="1000dp"
        android:height="15dp" />
    <solid android:color="#e7e7e7" />

</shape>

OK，布局优化的部分到此结束。

Please accept mybest wishes for your happiness and success ！