Tìm hiểu ViewStub trong Android

ViewStub là một View invisible, có kích thước là ""zero-size" và "can be used to lazily inflate layout resources at runtime" - nôm na hiểu là khi nào cần thì 1 view nào đó sẽ được tạo. Khi ViewStub được set là "visible" hoặc khi phương thức inflate() được gọi đến thì một View nào đó mong muốn sẽ được inflated. ViewStub sẽ tự thay thế chính nó bởi View (hay các View) mà được inflated. Bởi vậy, ViewStub chỉ tồn tại trong hệ thống cho đến khi phương thức setVisibility(int) hoặc inflate() được gọi đến. View được add vào sẽ theo layout parameters của ViewStub đã được định nghĩa trước đó. Vậy nên, đây cũng là một cách có thể giúp cải thiện performance của ứng dụng - chỉ tạo khi cần thiết.

Định nghĩa một ViewStub:

<ViewStub android:id="@+id/stub"
          android:inflatedId="@+id/subTree"
          android:layout="@layout/mySubTree"
          android:layout_awidth="120dip"
          android:layout_height="40dip" />

và sử dụng:

ViewStub stub = (ViewStub) findViewById(R.id.stub);
View inflated = stub.inflate();

Sau đây là một tut đơn giản sử dụng ViewStub

Đầu tiên ta cần khai báo ViewStub trong activity_main.xml

<ViewStub
        android:id="@+id/view_stub"
        android:inflatedId="@+id/view_stub_tree"
        android:layout="@layout/viewstub_layout"
        android:layout_awidth="match_parent"
        android:layout_height="wrap_content" />

Sau đó xây dựng một layout là viewstub_layout.xml, đây sẽ là View sẽ được hiển thị khi ta invoke.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_awidth="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="@drawable/background_viewstub">

    <TextView
        android:id="@+id/text_viewStub"
        android:layout_awidth="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:background="#aeffc6"
        android:textSize="20sp"
        android:padding="10dp"
        android:text="Đây là màu ĐỎ"
        android:textColor="#b41a15"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_awidth="match_parent"
        android:layout_height="50dp"
        android:layout_below="@+id/text_viewStub"
        android:layout_marginTop="5dp"
        android:weightSum="3">

        <ImageView
            android:id="@+id/color_1"
            android:layout_awidth="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#b41a15"/>

        <ImageView
            android:id="@+id/color_2"
            android:layout_awidth="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#5198da"/>

        <ImageView
            android:id="@+id/color_3"
            android:layout_awidth="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#fff55a"/>

    </LinearLayout>

</RelativeLayout>

Xử lý việc show hoặc invisible View đã tạo sử dụng ViewStub trong MainActivity

mButtonShow = (Button) findViewById(R.id.button_show);
mButtonShow.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    if (isShow) {
        isShow = false;
        mViewStub.setVisibility(View.GONE);
        mButtonShow.setText("Tap to show ViewStub");
        } else {
            isShow = true;
            mButtonShow.setText("Tap to invisible ViewStub");
            if (mViewStub == null) {
                mViewStub = (ViewStub) findViewById(R.id.view_stub);
                View inflatedView = mViewStub.inflate();
                text_viewStub = (TextView) inflatedView.findViewById(R.id.text_viewStub);
                ImageView color1 = (ImageView) inflatedView.findViewById(R.id.color_1);
                ImageView color2 = (ImageView) inflatedView.findViewById(R.id.color_2);
                ImageView color3 = (ImageView) inflatedView.findViewById(R.id.color_3);
                color1.setOnClickListener(onClickListener);
                color2.setOnClickListener(onClickListener);
                color3.setOnClickListener(onClickListener);
                } else {
                    mViewStub.setVisibility(View.VISIBLE);
                }
            }
        }
    });