Android布局优化之ViewStub控件

当一个Activity包含大量的布局文件时，加载时间会变慢，影响用户体验。因此，Android中布局优化显得很有必要。ViewStub控件便是Android中一种有效的布局优化方式。

一、什么是ViewStub控件

在Android的布局文件中，可以使用ViewStub控件定义一个不可见的布局，这个布局不会在加载时被加载到内存中，只有在需要显示时才被实例化，并且只会被实例化一次。

具体地说，是在调用ViewStub的inflate()方法时，才会将其定义的布局XML文件实例化并添加到布局中，其实例化后会取代掉之前的ViewStub。

二、ViewStub的使用

1. 声明ViewStub

在布局文件当中声明一个ViewStub控件，例如：

<LinearLayout
    …/>

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

    …
</LinearLayout>

其中layout属性指定了实例化的布局文件，比如"your_layout_file"就是被实例化的布局。

2. 加载ViewStub

在需要显示ViewStub控件内部的布局时，通过findViewByld()方法获取ViewStub的实例, 然后调用inflate()方法显示。

val viewStub = findViewById<ViewStub>(R.id.stub)
viewStub.inflate()

inflate()方法只会在第一次调用时实例化布局文件，之后的调用直接显示之前实例化的布局文件。

三、ViewStub的优缺点

1. ViewStub的优点

• 节省内存，只有需要显示时才会被实例化，可以减少内存的占用；
• 布局文件不会影响渲染性能，因为布局文件并没有被实例化，不会影响Android的渲染性能；
• 简单易用，只需在XML布局中加入一个ViewStub，然后在代码中调用inflate()方法即可加载布局。

2. ViewStub的缺点

• 在inflate()方法调用之前，ViewStub控件无法使用和操作；
• ViewStub控件只能被展开一次，之后失效，如果需要再次展开只能新添加一个ViewStub控件；
• 使用ViewStub控件时，需要知道实际需要显示的布局。

四、示例说明

1. 不使用ViewStub控件时的布局文件

在布局文件中加载较多视图，如以下代码：

<LinearLayout
    …/>

    <TextView 
        android:id="@+id/title"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="@string/title" />

    <LinearLayout 
        android:id="@+id/content"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content" >  

        <TextView  
            android:id="@+id/text"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:text="@string/text"/>  

    </LinearLayout>

    …
</LinearLayout>

在这个布局文件中，TextView和LinearLayout是一直可见的，但LinearLayout的内容只有在特定情况下才需要显示出来。

2. 使用ViewStub控件时的布局文件

增加ViewStub控件，如以下代码：

<LinearLayout
    …/>

    <TextView 
        android:id="@+id/title"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="@string/title" />

    <ViewStub 
        android:id="@+id/content_stub"  
        android:inflatedId="@+id/content"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout="@layout/content_layout" />

    …
</LinearLayout>

这里使用ViewStub来代替LinearLayout，标识这里可以动态注入一个视图。content_stub是ViewStub的布局视图，inflatedId指向LinearLayout的ID，让ViewStub知道可以在哪个布局内部进行注入（inflate）操作。layout属性指定了ViewStub可以引用的实际布局文件名。注意到这里并没有设置android:visibility属性。

3. 加载ViewStub

在kotlin代码中使用findViewByld()方法来获取ViewStub控件，并调用inflate()方法，如以下代码：

val contentStub = findViewById<ViewStub>(R.id.content_stub)
contentStub.inflate()

这里使用ViewStub控件加载LinearLayout中的视图，即如果visible为false，将不会加载视图；如果visible为true，ViewStub会删除自身并导入实际的布局视图（即LinearLayout视图）。