Android--UI之ViewStub

前言

　　按照最近博客的路線，繼續講Android的UI開發。今天講解一下ViewStub控件，惰性裝載控件。在本篇博客中，將了解到ViewStub的常用屬性、方法，以及注意事項。最后將以一個簡單的Demo演示ViewStub的使用。

ViewStub

　　在介紹ViewStub之前，可以先了解一下<include/>標簽，這是一個把其它布局資源包含進某個特定的布局中，在很多平台的開發中，都有類似的概念，這樣好處就不用細說了，主要是可以在不同的文件中編輯界面的布局控件。

　　ViewStub，惰性裝載控件。ViewStub是一個無形的、零大小的視圖，可以在程序運行的過程中，通過懶加載的模式inflate進布局資源中。當一個ViewStub的inflate()方法被調用或者被設為顯示時，這個ViewStub使用設定的View才會被加載，並替換當前ViewStub的位置。因此，ViewStub存在於視圖層次，直到setVisibility(int)或inflate()方法被調用，否則是不加載控件的，所以消耗的資源小。通常也叫它為“懶惰的include”。

 　　ViewStub的好處是，在某些場景中，並不一定需要把所有的內容都展示出來，可以隱藏一些View視圖，待用戶需要展示的時候再加載到當前的Layout中，這個時候就可以用到ViewStub這個控件了，這樣可以減少資源的消耗，使最初的加載速度變快。

　　在ViewStub中，需要用到的屬性也就兩個，Android也為其提供了相應的getter/setter方法：

• android:inflateId：重寫ViewStub的父布局控件的Id。
• android:layout：設置ViewStub被inflate的布局控件Id。

　　對於ViewStub而言，它需要監聽的事件就只有一個，被加載的時候觸發的事件VIewStub.OnInflateListener，在這個事件中，需要實現一個onInflate()方法，以下是這個方法的簽名：

　　　　onInflate(ViewStub stub, View inflated);

　　在VIewStub.OnInflateListener事件的onInflate()方法中，stub為當前待膨脹的ViewStub控件，inflated參數為當前被膨脹的View視圖，可以在其中對其進行一些額外的操作。

　　在使用ViewStub的過程中，有一點需要特別注意。對於一個ViewStun而言，當setVisibility(int)或inflate()方法被調用之后，這個ViewStub在布局中將被使用指定的View替換，所以inflate過一遍的ViewStub，如果被隱藏之后再次想要顯示，將不能使用inflate()方法，但是可以再次使用setVisibility(int)方法設置為可見，這就是這兩個方法的區別。而inflate()被調用之后，返回的是父布局控件對象。

示例Demo

 　　下面通過一個Demo講解一下上面提到的內容。在這個Demo中，會簡單的使用到<include/>標簽，還定義一個ViewStub控件，用於加載一個RatingBar，提供按鈕加載與隱藏這個RatingBar，最后提供一個按鈕用於操作動態加載的Ratingbar。

　　定義的被inflate的控件代碼：

<?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" >

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

　　布局代碼：

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <!-- 使用include標簽加載一個id為start的控件 -->
    <include
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        layout="@layout/start" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFCCDD"
        android:orientation="vertical" >
        <!-- 定義一個ViewStub 給其父Layout指定Id為inflatedStart -->
        <ViewStub
            android:id="@+id/stub"
            android:inflatedId="@+id/inflatedStart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@layout/start" />
    </LinearLayout>

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="動態添加布局" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="動態隱藏布局" />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="操作StubInflate的控件" />
</LinearLayout>

　　實現代碼：

package com.bgxt.viewstubdemo;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewStub;
import android.view.ViewStub.OnInflateListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends Activity {
    private Button btn1, btn2,btn3;
    private ViewStub viewStub;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲取控件，綁定事件
        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        btn3 = (Button) findViewById(R.id.btn3);
        viewStub = (ViewStub) findViewById(R.id.stub);
        viewStub.setOnInflateListener(inflateListener);
        btn1.setOnClickListener(click);
        btn2.setOnClickListener(click);
        btn3.setOnClickListener(click);
    }

    private OnInflateListener inflateListener=new OnInflateListener() {
        
        @Override
        public void onInflate(ViewStub stub, View inflated) {
            // inflaye ViewStub的時候顯示
            Toast.makeText(MainActivity.this, "ViewStub is loaded!", Toast.LENGTH_SHORT).show();
        }
    };
    
    private View.OnClickListener click = new OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
            case R.id.btn1:
                try {
                    //如果沒有被inflate過，使用inflate膨脹
                    LinearLayout layout=(LinearLayout)viewStub.inflate();
                    RatingBar bar=(RatingBar)layout.findViewById(R.id.ratingBar1);
                    bar.setNumStars(4);
                } catch (Exception e) {
                    //如果使用inflate膨脹報錯，就說明已經被膨脹過了，使用setVisibility方法顯示
                    viewStub.setVisibility(View.VISIBLE);
                }                
                break;

            case R.id.btn2:
                //隱藏ViewStub
                viewStub.setVisibility(View.GONE);
                break;
            case R.id.btn3:
                //操作被inflate的控件，需要得到當前布局的對象
                //然后通過這個對象去找到被inflate的控件。
                //因為否則在這個示例中，會找到include標簽引入的控件
                LinearLayout linearLayout=(LinearLayout)findViewById(R.id.inflatedStart);
                RatingBar rBar=(RatingBar)linearLayout.findViewById(R.id.ratingBar1);
                float numStart=rBar.getRating();
                numStart++;
                if(numStart>4)
                {
                    numStart=0;
                }
                rBar.setRating(numStart);
                break;
            }

        }
    };

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

　　效果展示：　

　　源碼下載

　　請支持原創，尊重原創，轉載請注明出處。謝謝。