Android應用開發學習之選項卡

在應用中使用選項卡，可以使復雜的布局變得簡潔清晰。本文我們通過一個例子來學習Android選項卡的用法，下圖是該例子的運行效果：

我們先來看主布局文件main.xml：

[html] view plaincopyprint?<?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="fill_parent"   
    android:layout_height="fill_parent">   
    <LinearLayout   
        android:orientation="vertical"   
        android:layout_width="fill_parent"   
        android:layout_height="fill_parent">   
        <TabWidget   
            android:id="@android:id/tabs"   
            android:layout_width="fill_parent"   
            android:layout_height="wrap_content" />   
        <FrameLayout   
            android:id="@android:id/tabcontent"   
            android:layout_width="fill_parent"   
            android:layout_height="fill_parent">   
        </FrameLayout>   
    </LinearLayout>   
</TabHost>   

<?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="fill_parent" 
    android:layout_height="fill_parent"> 
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"> 
        <TabWidget 
            android:id="@android:id/tabs" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" /> 
        <FrameLayout 
            android:id="@android:id/tabcontent" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"> 
        </FrameLayout> 
    </LinearLayout> 
</TabHost> 
選項卡主要由TabHost、TabWidget、FrameLayout3個組件組成，三者缺一不可，想象一下選項卡的特點，多個卡重疊在一起，所以用FrameLayout即幀布局是必要的。另外需要注意的是TabHost、TabWidget、FrameLayout三個組件的android:id必須使用系統默認的名稱，而不能自己隨意定義，否則會出錯。

接下來我們要看主Activity文件：

[java] view plaincopyprint?package com.liuhaoyu; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.widget.TabHost; 
 
public class MainActivity extends Activity { 
    private TabHost tabHost; 
     
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
         
        tabHost=(TabHost)findViewById(android.R.id.tabhost); 
        tabHost.setup(); 
        LayoutInflater inflater = LayoutInflater.from(this); 
        inflater.inflate(R.layout.tab1, tabHost.getTabContentView());   
        inflater.inflate(R.layout.tab2, tabHost.getTabContentView()); 
        inflater.inflate(R.layout.tab3, tabHost.getTabContentView()); 
        tabHost.addTab(tabHost.newTabSpec("FriendTab") 
                .setIndicator("Friend") 
                .setContent(R.id.LinearLayout01)); 
        tabHost.addTab(tabHost.newTabSpec("StrangerTab") 
                .setIndicator("Stranger") 
                .setContent(R.id.LinearLayout02)); 
        tabHost.addTab(tabHost.newTabSpec("BlacklistTab") 
                .setIndicator("Blacklist") 
                .setContent(R.id.LinearLayout03)); 
    } 
} 

package com.liuhaoyu;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class MainActivity extends Activity {
 private TabHost tabHost;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        tabHost=(TabHost)findViewById(android.R.id.tabhost);
        tabHost.setup();
        LayoutInflater inflater = LayoutInflater.from(this);
        inflater.inflate(R.layout.tab1, tabHost.getTabContentView()); 
        inflater.inflate(R.layout.tab2, tabHost.getTabContentView());
        inflater.inflate(R.layout.tab3, tabHost.getTabContentView());
        tabHost.addTab(tabHost.newTabSpec("FriendTab")
          .setIndicator("Friend")
          .setContent(R.id.LinearLayout01));
        tabHost.addTab(tabHost.newTabSpec("StrangerTab")
          .setIndicator("Stranger")
          .setContent(R.id.LinearLayout02));
        tabHost.addTab(tabHost.newTabSpec("BlacklistTab")
          .setIndicator("Blacklist")
          .setContent(R.id.LinearLayout03));
    }
}
首先找到TabHost，並調用TabHost.setup函數進行初始化。然後先把tab1,tab2,tab3三個布局實例化，因為這三個布局與主布局main.xml是獨立的，所以我們必須手動實例化這三個布局。最後調用TabHost.addTab將標簽頁加入到TabHost中。

res/layout/tab1.xml內容如下：

[html] view plaincopyprint?<?xml version="1.0" encoding="utf-8"?> 
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/LinearLayout01"  
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
         
    <ListView  
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:entries="@array/friends"/> 
         
</LinearLayout> 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    
 <ListView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:entries="@array/friends"/>
    
</LinearLayout>

res/layout/tab2.xml內容如下：

[html] view plaincopyprint?<?xml version="1.0" encoding="utf-8"?> 
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/LinearLayout02"  
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
 
    <ListView  
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:entries="@array/strangers"/> 
         
</LinearLayout> 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout02"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

 <ListView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:entries="@array/strangers"/>
    
</LinearLayout>

res/layout/tab3.xml內容如下：

[html] view plaincopyprint?<?xml version="1.0" encoding="utf-8"?> 
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/LinearLayout03"  
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
 
    <ListView  
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:entries="@array/blacklist"/> 
         
</LinearLayout> 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout03"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

 <ListView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:entries="@array/blacklist"/>
    
</LinearLayout>

數組文件res/values/people.xml內容如下：

[html] view plaincopyprint?<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <string-array name="friends"> 
        <item>friend A</item> 
        <item>friend B</item> 
        <item>friend C</item> 
        <item>friend D</item> 
        <item>friend E</item> 
        <item>friend F</item> 
        <item>friend G</item> 
        <item>friend H</item> 
        <item>friend I</item> 
        <item>friend J</item> 
        <item>friend K</item> 
        <item>friend L</item> 
        <item>friend M</item> 
    </string-array> 
     
    <string-array name="strangers"> 
        <item>stranger A</item> 
        <item>stranger B</item> 
        <item>stranger C</item> 
        <item>stranger D</item> 
        <item>stranger E</item> 
        <item>stranger F</item> 
        <item>stranger G</item> 
        <item>stranger H</item> 
        <item>stranger I</item> 
        <item>stranger J</item> 
        <item>stranger K</item> 
        <item>stranger L</item> 
        <item>stranger M</item> 
    </string-array> 
     
    <string-array name="blacklist"> 
        <item>black A</item> 
        <item>black B</item> 
        <item>black C</item> 
        <item>black D</item> 
        <item>black E</item> 
        <item>black F</item> 
        <item>black G</item> 
        <item>black H</item> 
        <item>black I</item> 
        <item>black J</item> 
        <item>black K</item> 
        <item>black L</item> 
        <item>black M</item> 
    </string-array> 
     
</resources> 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="friends">
     <item>friend A</item>
     <item>friend B</item>
     <item>friend C</item>
     <item>friend D</item>
     <item>friend E</item>
     <item>friend F</item>
     <item>friend G</item>
     <item>friend H</item>
     <item>friend I</item>
     <item>friend J</item>
     <item>friend K</item>
     <item>friend L</item>
     <item>friend M</item>
    </string-array>
   
    <string-array name="strangers">
     <item>stranger A</item>
     <item>stranger B</item>
     <item>stranger C</item>
     <item>stranger D</item>
     <item>stranger E</item>
     <item>stranger F</item>
     <item>stranger G</item>
     <item>stranger H</item>
     <item>stranger I</item>
     <item>stranger J</item>
     <item>stranger K</item>
     <item>stranger L</item>
     <item>stranger M</item>
    </string-array>
   
    <string-array name="blacklist">
     <item>black A</item>
     <item>black B</item>
     <item>black C</item>
     <item>black D</item>
     <item>black E</item>
     <item>black F</item>
     <item>black G</item>
     <item>black H</item>
     <item>black I</item>
     <item>black J</item>
     <item>black K</item>
     <item>black L</item>
     <item>black M</item>
    </string-array>
   
</resources>