Android UI性能优化（一）

include标签使用

项目中总会有很多布局是可以重复利用的，当我们一个布局反复的写很多次无疑是很傻的，也非常不利于管理，容易造成代码混乱。在xml中include标签就是为了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="match_parent"
    android:background="#1c1c1c"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView1"
        android:layout_margin="8dp"
        android:textColor="#ffff00" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="TextView2"
        android:textColor="#ffff00" />

</LinearLayout>

这是一段简单的xml代码，如果我们需要在多个布局中复用这个布局，只需要使用include标签即可。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.caoxiao.viewdemo.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <include
        layout="@layout/title"
        android:layout_width="match_parent"
        android:layout_height="56dp"></include>

</LinearLayout>

效果如图

include标签只支持android:layout_开头的属性，比如android:layout_width和android:layout_height。需要注意的是如果指定android:layout开头的属性，就必须指定android:layout_height和android:layout_width，否则其他属性无法生效。指定后的属性会覆盖引用的布局文件中的属性。下面是例子。

<include
        layout="@layout/title"
        android:layout_width="match_parent"
        android:layout_height="56dp"></include>

---

merge标签使用

Layout层次越多，measure过程越复杂，View的绘制就会越慢。当我们回顾上面的例子会发现，引用的include布局中多了一层没有必要的LinearLayout布局嵌套。我们可以使用hierarchyviewer工具来分析布局嵌套的性能问题。hierarchyviewer是android sdk 提供的工具，可以在sdk/tools中找到它并双击打开。

我们可以看到在红框内的LinearLayout下还有三个控件，因为两个布局都是LinearLayout而且都是android:orientation=”vertical”竖直方向排列的，所以include嵌套的LinearLayout是多余的一层。我们使用merge标签代替include标签。

<?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"
    android:background="#1c1c1c"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView1"
        android:layout_margin="8dp"
        android:textColor="#ffff00" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="TextView2"
        android:textColor="#ffff00" />

</merge>

重新运行后，在hierarchyviewer中可以看到

有效的减少了多余的一层布局，加快了UI渲染速度。

ViewStub使用

有时候有的布局我们只有在特殊情况下才去加载显示，例如网络错误后显示的控件。即使我们设置android:visibility=”gone”也依旧会解析这些元素。ViewStub相当于一个占位符，资源消耗很低，这时候就派上用场了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.caoxiao.viewdemo.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="showViewStub"/>

    <ViewStub
        android:id="@+id/viewStub"
        android:layout="@layout/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></ViewStub>

</LinearLayout>

private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = (Button) findViewById(R.id.button);
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        ViewStub viewStub = (ViewStub) findViewById(R.id.viewStub);
        if (viewStub != null) {
            View inflatedView = viewStub.inflate();
            TextView tv1 = (TextView) inflatedView.findViewById(R.id.tv1);
            String tv1Text = tv1.getText().toString();
            if (!TextUtils.isEmpty(tv1Text)) {
                Log.i("tv1Text", tv1Text);
            }
        }
    }

运行结果:I/tv1Text: helloViewStub
需要注意的是ViewStub嵌套的layout不能是merge的，否则会抛异常android.view.InflateException。也可以通过viewStub.setVisibility(View.VISIBLE);代替inflate。