Android ViewStub的使用

简介

在Android开发中，布局的加载速度会影响APP的性能。如果布局实现的不好，会导致程序非常占内存并且UI运行缓慢。优化布局可以从三个方面着手:

1. 使用<include>标签重用layouts
2. 使用<merge>标签避免冗余的布局嵌套
3. 使用ViewStub实现按需加载

本文讲解一下ViewStub的使用。ViewStub相当于延迟加载，有的时候在布局中有一些不怎么重用的视图，可以只在需要的时候再加载，提高UI的渲染速度。

定义ViewStub

ViewStub是轻量级视图，不需要大小信息，不会在布局中绘制任何东西，每个 ViewStub 只需要设置android:layout属性来指定需要被 inflate 的 Layout 类型。

比如下面的布局文件：

<?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:orientation="vertical">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加载ViewStub" />

    <ViewStub
        android:id="@+id/view_stub"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/extra" />
        
</LinearLayout>

布局中定义了一个ViewStub，layout属性引用了另一个布局extra.xml，这个布局就是被延迟加载的布局，而ViewStub本身不会显示任何内容。上面的Button是为了在代码中实现延迟加载。

extra.xml定义了一个TextView和一个progressBar，代码如下：

<?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:orientation="vertical">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#36e7ea"
        android:gravity="center"
        android:textSize="18sp" />

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
        
</LinearLayout>

加载ViewStub布局

要加载ViewStub引用的布局只需要调用inlfate()方法，在我们的这个例子中设置为点击Button，代码比较简单：

Button button = (Button) findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            View view = ((ViewStub)findViewById(R.id.view_stub)).inflate();
            TextView tv = (TextView) view.findViewById(R.id.text_view);
            tv.setText("ViewStub的使用");
    }
});

获取ViewStub之后直接调用inflate()即可把extra.xml解析为View，通过它可以得到extra.xml内部的控件，这样便实现了按需加载。

下面两幅图分别是点击Button前后的界面：

注意：ViewStub不支持使用<merge>标签的布局。