Android[初級教程]第十一章 TabHost控制項

這一章我們學習TabHost控制項,唐僧師徙四個人每個人都各有自己的本領,那放在一起顯示肯定不好看,這下我們就用TabHost來分開顯示,每個都是一個單獨的視圖,先:

 


 

大家看到了每一個都是一個個人資訊展示,好,我們來看一下main.xml代碼:

 
<?xml version="1.0" encoding="utf-8"?> 
 
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/tabhost" android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <LinearLayout android:layout_width="match_parent" 
        android:id="@+id/linearLayout1" android:layout_height="match_parent" 
        android:orientation="vertical"> 
        <TabWidget android:layout_width="match_parent" 
            android:layout_height="wrap_content" android:id="@android:id/tabs"></TabWidget> 
        <FrameLayout android:layout_width="match_parent" 
            android:layout_height="match_parent" android:id="@android:id/tabcontent"> 
            <LinearLayout android:layout_width="match_parent" 
                android:orientation="vertical" android:layout_height="match_parent" 
                android:id="@+id/tab1"> 
 
                <ImageView android:layout_width="wrap_content" android:id="@+id/imageView1" 
                    android:layout_height="wrap_content" android:src="@drawable/tangseng" 
                    android:layout_gravity="center"></ImageView> 
                <TextView android:text="唐僧會" android:layout_width="match_parent" 
                    android:layout_height="wrap_content" android:textSize="24dp" /> 
                <ListView android:id="@+id/listView1" android:entries="@array/tangseng" 
                    android:layout_height="wrap_content" android:layout_width="match_parent"></ListView> 
 
            </LinearLayout> 
            <LinearLayout android:layout_width="match_parent" 
                android:orientation="vertical" android:layout_height="match_parent" 
                android:id="@+id/tab2"> 
 
                <ImageView android:layout_width="wrap_content" android:id="@+id/imageView1" 
                    android:layout_height="wrap_content" android:src="@drawable/wukong" 
                    android:layout_gravity="center"></ImageView> 
                <TextView android:text="孫悟空會" android:layout_width="match_parent" 
                    android:layout_height="wrap_content" android:textSize="24dp" /> 
                <ListView android:id="@+id/listView2" android:entries="@array/wukong" 
                    android:layout_height="wrap_content" android:layout_width="match_parent"></ListView> 
 
            </LinearLayout> 
            <LinearLayout android:layout_width="match_parent" 
                android:orientation="vertical" android:layout_height="match_parent" 
                android:id="@+id/tab3"> 
 
                <ImageView android:layout_width="wrap_content" android:id="@+id/imageView1" 
                    android:layout_height="wrap_content" android:src="@drawable/bajie" 
                    android:layout_gravity="center"></ImageView> 
                <TextView android:text="豬八戒會" android:layout_width="match_parent" 
                    android:layout_height="wrap_content" android:textSize="24dp" /> 
                <ListView android:id="@+id/listView3" android:entries="@array/bajie" 
                    android:layout_height="wrap_content" android:layout_width="match_parent"></ListView> 
 
            </LinearLayout> 
 
            <LinearLayout android:layout_width="match_parent" 
                android:orientation="vertical" android:layout_height="match_parent" 
                android:id="@+id/tab4"> 
 
                <ImageView android:layout_width="wrap_content" android:id="@+id/imageView1" 
                    android:layout_height="wrap_content" android:src="@drawable/shaseng" 
                    android:layout_gravity="center"></ImageView> 
                <TextView android:text="沙和尚會" android:layout_width="match_parent" 
                    android:layout_height="wrap_content" android:textSize="24dp" /> 
                <ListView android:id="@+id/listView4" android:entries="@array/shaseng" 
                    android:layout_height="wrap_content" android:layout_width="match_parent"></ListView> 
 
            </LinearLayout> 
        </FrameLayout> 
    </LinearLayout> 
</TabHost> 
這裡面主要是定義了TabHost控制項,這個TabHost控制項ID是必須設成android:id="@android:id/tabhost"這個的,不然啟動並執行時候肯定會報錯.接下來是TabWidget控制項,也必須將ID定義成android:id="@android:id/tabs",最後就是內容了FrameLayout的ID也必須設成android:id="@android:id/tabcontent",三個條件,一個都不能少,不然你肯定是運行不了的.

好,我們接下來看一下java原始碼:

 
import android.app.TabActivity; 
import android.os.Bundle; 
import android.widget.TabHost; 
 
public class TabHostDemoActivity extends TabActivity 
{ 
    private String[] item = { "唐僧", "孫悟空 ", "豬八戒", "沙和尚" }; 
    private int[] tab = {R.id.tab1, R.id.tab2, R.id.tab3, R.id.tab4}; 
     
    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 
        // TODO Auto-generated method stub 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main1); 
 
        TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost); 
         
        int len = item.length; 
        for(int i= 0; i < len; i++ ){ 
            tabHost.addTab(tabHost.newTabSpec(item[i]).setIndicator(item[i]).setContent(tab[i])); 
        } 
         
 
    } 
} 
哇,這麼少代碼?呵呵,其實我將資料放到values/string底下了,接下來是string.xml

 
<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <string name="hello">Hello World, ButtonDemoActivity!</string> 
    <string name="app_name">ButtonDemo</string> 
    <string-array name="tangseng"> 
        <item>念緊箍咒</item> 
        <item>說阿彌陀佛</item> 
    </string-array> 
    <string-array name="wukong"> 
        <item>七十二變</item> 
        <item>打妖精</item> 
        <item>騰雲駕霧</item> 
    </string-array> 
    <string-array name="bajie"> 
        <item>偷懶</item> 
        <item>睡覺</item> 
    </string-array> 
    <string-array name="shaseng"> 
        <item>挑擔子</item> 
    </string-array> 
</resources> 
我直接將ListView控制項通過android:entries="@array/tangseng"將定義的數組顯示出來,所以在主java代碼中才會用了很少的java代碼,但真實應用,資料肯定不會是已知的,肯定需要通過資料庫或其他方式來擷取的,這一章我們主要學習TabHost怎麼運用.看,唐僧師徙四人的能力一覽無遺了。

 

摘自：kangkangz4的專欄