ViewStub的使用分析

一、ViewStub 的功能

ViewStub标签是Android 中一个延迟加载目标视图的且宽度均为0的占位View。

只有当ViewStub中使用inflate 或调用 setVisibility时，Android 系统才会加载viewStub标签指向的布局；进而进行绘制（测量，布局，绘制）布局中的View。

通常可以用来优化：页面视图较复杂及页面加载较慢的应用场景。

二、ViewStub的使用示例。

示例说明：

Activity 的onCreate()函数中，在初始化时，不需要示例图片；而只有在点击按钮时，才需要显示图片。

Activity的布局文件activity_view_stub_demo.xml文件代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/root"

android:gravity="center_horizontal">

<include

android:visibility="gone"

layout="@layout/viewstub_demo_text_layout">

</include>

<Button

android:text=" 快来点我吧，让我来加载 ViewStub 的布局 !"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:onClick="onButtonClick"

android:id="@+id/button" />

<ViewStub

android:id="@+id/viewstub_demo_image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="8dip"

android:layout_marginRight="8dip"

android:layout="@layout/viewstub_demo_image_layout"/>

</LinearLayout>

viewstub_demo_text_layout.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<TextView

android:id="@+id/viewstub_demo_textview"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="#aa664411"

android:text=" 我 TextView ，我来自 ViewSub ，但我不会被显示。 "

android:textSize="16sp"/>

</LinearLayout>

viewstub_demo_image_layout.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<ImageView

android:id="@+id/viewstub_demo_imageview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

ViewStubDemoActivity的代码如下所示：

public class ViewStubDemoActivity extends AppCompatActivity {

private ImageView imageViewFromViewStub;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_view_stub_demo);

}

public void onButtonClick(View v) {

if (imageViewFromViewStub == null) {

ViewStub stub = (ViewStub) findViewById(R.id. viewstub_demo_image );

stub.inflate();

imageViewFromViewStub = (ImageView) findViewById(R.id. viewstub_demo_imageview );

imageViewFromViewStub.setImageResource(R.drawable. spring );

} else {

if (imageViewFromViewStub.isShown()) {

imageViewFromViewStub.setVisibility(View. GONE );

} else {

imageViewFromViewStub.setVisibility(View. VISIBLE );

}

}

}

}

运行后，界面如图1所示：

图1

从图1所示可见，只显示了Button。虽然包含（include） viewstub_demo_text_layout 中的视图，由于设置成gone，所示不可见。那使用android 平台工具Hierarchy View 查看图1所示的View层次结构。

图2

如图2所示，在ViewStubDemoActivity在初始化的时候（onCreate执行完成时），只显示了ViewStub控件，而没有初始化ViewStub内部的View。且ViewStub的测量、布局用时为零，绘制的时间只使用了0.014ms；从这点上看，SubView也是一个轻量及View。

当点击ViewStubDemoActivity中Button时（ id为button ），界面显示如下图3所示。

图3

对图3同样使用Hierarchy View 查看View层次结构，View层次图如图4所示。由图4易见，此时ViewStub被其布局 viewstub_demo_image_layout中的内容所替代。取代ViewStub的视图LinearLayout的测量时间为0.091ms,布局时间为0.067ms,绘制时间为16.075ms。图2与图4绘制时间可得(0.014ms VS 16.233ms)，ViewStub的有着延时加载 加快页面启动的作用。

图4

在Hierarchy View 中点开ViewStubDemoActivity 中include对象，在HierarchyView中可看出来（图5），虽然是include的viewstub_demo_text_layout视图设置了gone,但是在Activity页面加载的时候，仍然绘制了出来了，由图5可见，使用了13.955ms时间。

图5

三、ViewStub的特点及使用场合

         1. ViewStub只能Inflate一次，之后ViewStub对象会被置为空。按句话说，某个被ViewStub指定的布局被Inflate后，就不会够再通过ViewStub来控制它了。

         2. ViewStub只能用来Inflate一个布局文件，而不是某个具体的View，当然也可以把View写在某个布局文件中。

四、参考资料

1.《Android 开发进阶：从小工到专家》；

2.博客： ViewStub用法（ http://blog.csdn.net/wong_judy/article/details/7494078）