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;  
    }  
 
} 

　效果展示：　

　　源碼下載