See Android ViewStub的使用 - Coding - SegmentFault

简介

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

  1. 使用标签重用layouts

  2. 使用标签避免冗余的布局嵌套

  3. 使用ViewStub实现按需加载

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

定义ViewStub

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

比如下面的布局文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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>

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

extra.xml定义了一个TextView和一个progressBar,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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,代码比较简单:

1
2
3
4
5
6
7
8
9
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前后的界面:

](https://segmentfault.com/img/bVtUOS)![
](https://segmentfault.com/img/bVtUOS)![

注意:ViewStub不支持使用标签的布局。