Android學習指南之四十四：用戶界面View之Tab標簽頁

       Tab標簽頁控件在很多編程技術中都能見到，它使得窗口顯示區能夠重復利用。在Android中標簽頁涉及到TabActivity、TabHost、TabWidget等概念。使用Tab標簽頁控件，可以在同一個空間裡放置更多內容。譬如Android自帶的撥號程序及通訊錄等，就使用了Tab標簽功能，如下圖所示：

       下面我們用實例的方式來學習如何制作上面類似的標簽效果，其實還是很簡單的。我同樣是把解釋寫到示例的注釋裡了，注釋是我的理解並不准確，方便你記憶而已。

       1、新建一個項目 Lesson44_Tab ，Activity起名叫 MainActivity。

       2、編寫 main.xml 內容如下，這次的形式和普通布局文件有所區別，請注意看寫法：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!-- 根元素是 TabHost ,我們這個文件要和TabActivity配合使用，在TabActivity的源代碼裡寫死了要找的Id是android.R.id.tabhost，   
3.     因此這裡的ID也要定死成TabHost 的ID 是定死的 "@android:id/tabhost" 下面的類似，不再解釋。 -->  
4. <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">  
5.   
6.     <!-- TabWidget 就是標簽選項卡的頭部部分,注意ID的寫法 -->  
7.     <TABWIDGET android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content">  
8.     </TABWIDGET>  
9.     <!-- FrameLayout 就是標簽的內容顯示部分，注意ID的寫法，還要注意我們做了個上部空白設定 android:paddingTop="65dp",是為了不讓內容和標簽重疊 -->  
10.     <FRAMELAYOUT android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingtop="65dp">  
11.         <!-- LinearLayout 是一個標簽裡的內容，程序根據你定義的ID來把他們放在不同的標簽下面 -->  
12.     <LINEARLAYOUT android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content">  
13.             <TEXTVIEW android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="標簽1中的內容">  
14.             </TEXTVIEW>  
15.     </LINEARLAYOUT>  
16.         <!-- LinearLayout 是另一個標簽裡的內容-->  
17.     <LINEARLAYOUT android:id="@+id/linearLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content">  
18.             <TEXTVIEW android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="標簽2中的內容">  
19.             </TEXTVIEW>  
20.     </LINEARLAYOUT>  
21.     </FRAMELAYOUT>  
22. </TABHOST>  

       3、編寫 MainActivity，請注意它繼承的是 TabActivity 類，解釋在代碼裡：

1. package basic.android.lesson44;   
2.   
3. import android.app.TabActivity;   
4. import android.os.Bundle;   
5. import android.widget.TabHost;   
6.   
7. public class MainActivity extends TabActivity {   
8.   
9.     @Override  
10.     public void onCreate(Bundle savedInstanceState) {   
11.         super.onCreate(savedInstanceState);   
12.         setContentView(R.layout.main);   
13.   
14.         // tabHost是一個標簽容器   
15.         TabHost tabHost = this.getTabHost();   
16.   
17.         // 每一個TabSpec對象就是個標簽   
18.         // TabSpec.setIndicator()方法是設置標簽顯示樣式   
19.         // TabSpec.setContent()方法顯示標簽下方的內容顯示   
20.   
21.         //定義第一個標簽   
22.         tabHost.addTab(tabHost.newTabSpec("OneTab")   
23.                 .setIndicator("OneTab", getResources().getDrawable(android.R.drawable.star_on))   
24.                 .setContent(R.id.linearLayout1));   
25.   
26.         //定義第二個標簽   
27.         tabHost.addTab(tabHost.newTabSpec("TwoTab")   
28.                 .setIndicator("TwoTab", getResources().getDrawable(android.R.drawable.star_off))   
29.                 .setContent(R.id.linearLayout2));   
30.   
31.     }   
32. }  

       4、編譯程序，運行代碼，查看結果：

       點擊 TwoTab ，標簽切換：

       大家最好先看一遍注釋，程序運行起來後再看看理解下，加深印象。本節就講到這裡了。