Android性能优化之布局优化：ViewStub的使用

迈不过友情╰ 2024-04-18 14:02 94阅读 0赞

### 前言 ###

最近在看关于App性能优化的文章，看到布局优化这一块。当然布局优化这一块，最重要的一点是减少的布局的嵌套。少一层布局就能减少不少性能，避免出现布局的过度绘制。其中布局优化这一块，就提到了三种标签：include、merge、ViewStub。include主要是通过引入布局，增加布局的复用性。merge的使用可以减少一层layout达到优化layout的目的。ViewStub主要是控制布局的显示与隐藏。当前页面不需要一开始就显示某个页面的某个布局时，可以通过ViewStub来引入布局。ViewStub即显示时才加载，不显示不加载布局，不消耗性能。这一篇咱们主要重点来介绍ViewStub。

### 关于ViewStub ###

1. ViewStub 继承自View，是一种不可见，0大小的可以在运行的时候再加载的View。

2.只有在调用inflate()进行映射内容布局之后或者设置为Visibility时才可见，ViewStub只能inflate一次，再次进行inflate的时候会报异常。

3.ViewStub有几个重要的属性：

**android:id**——ViewStub 自身的Id，无论是否被inflate，都可以通过findViewById拿到对应的ViewStub控件本身。

**android:inflatedId**——ViewStub设置的被映射的布局文件中的根节点的Id，inflate之后可以通过findViewById获取到对应的被映射的布局对象。

**android:layout**——将要映射的布局文件名

**ViewStub.OnInflateListener**——当ViewStub成功映射预先设置的布局会触发回调

#### ViewStub的简单使用 ####

1.首先写一个被ViewStub引入的布局文件 layout\_demo\_view\_stub：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:id="@+id/ll_demo_stub"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@mipmap/ic_launcher"
            android:layout_gravity="center_horizontal"/>
        <TextView
            android:id="@+id/tv_tips"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是隐藏的布局"
            android:textSize="23sp"
            android:textStyle="bold"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="30dp"/>
        
    </LinearLayout>

大概显示是这个样子的：

![20190907185751217.png][]

2.在Activity的布局中通过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=".SecondActivity">
    
        <ViewStub
            android:id="@+id/viewStub"
            android:inflatedId="@id/ll_demo_stub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp"
            android:layout="@layout/layout_demo_view_stub" />
    
        <Button
            android:id="@+id/button_show"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_gravity="center_horizontal"
            android:text="显示" />
    
        <Button
            android:id="@+id/button_hide"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="20dp"
            android:text="隐藏" />
    
    
    
    </LinearLayout>

3.在Activity中的使用

public class SecondActivity extends AppCompatActivity implements ViewStub.OnInflateListener {
    
        private Button button_show;
        private Button button_hide;
        private ViewStub viewStub;
        private TextView textView;
        private LinearLayout parentContainer;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_second);
    
            viewStub = findViewById(R.id.viewStub);
            button_show = findViewById(R.id.button_show);
            button_hide = findViewById(R.id.button_hide);
    
            initEventListener();
            initView();
        }
    
        private void initView() {
            parentContainer = (LinearLayout) viewStub.inflate();
            textView = parentContainer.findViewById(R.id.tv_tips);
            textView.setText("不好意思，还未录入任何数据");
            viewStub.setVisibility(View.GONE);
        }
    
        private void initEventListener() {
            viewStub.setOnInflateListener(this);
            button_show.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewStub.setVisibility(View.VISIBLE);
                }
            });
            button_hide.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewStub.setVisibility(View.GONE);
                }
            });
        }
    
        @Override
        public void onInflate(ViewStub viewStub, View view) {
            Log.e("==========","ViewStub is Loaded");
        }
    }

好了，到这里ViewStub的介绍就算完事了。下面附上使用ViewStub之后，Activity对应的布局文件的层级结构图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAyNTc5MzE_size_16_color_FFFFFF_t_70][]

[20190907185751217.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a02d65a61bb7416391d8a29eba4fee14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAyNTc5MzE_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fc926126e8c74de9b14b0a7baf498fd4.png