android之tabhost講解

Tab標籤頁是介面設計時經常使用的介面控制項，可以實現多個分頁之間的快速切換，每個分頁可以顯示不同的內容
Tab標籤頁的使用
      1.首先要設計所有的分頁的介面布局
      2.在分頁設計完成後，使用代碼建立Tab標籤頁，並給每個分頁添加標識和標題
      3.最後確定每個分頁所顯示的介面布局
      每個分頁建立一個XML檔案，用以編輯和儲存分頁的介面布局，使用的方法與設計普通使用者介面沒有什麼區別

使用Tab標籤頁的一般步驟
首先要設計所有的分頁的介面布局
Activity繼承TabActivity
調用TabActivity的getTabHost()方法獲得TabHost對象
通過TabHost建立Tab

 

所謂的tabhost提供選項卡（Tab頁）的視窗視圖容器.此對象包含兩個子物件： 一個是使使用者可以選擇指定標籤頁的標籤的集合；另一個是用於顯示標籤頁內容的 FrameLayout. 選項卡中的個別元素一般通過其容器物件來控制，而不是直接設定子項目本身的值.

先示範一個簡單的例子，只有一個Activity，但要注意的是繼承tabActivity這個類

第一步：在布局檔案中main.xml敲入代碼。注意這裡用了FrameLayout，主要特點是可以覆蓋其他內容，只顯示當前的

View Code

 1 <?xml version="1.0" encoding="utf-8"?>
 2 
 3 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:id="@+id/FrameLayout01" 
 5     android:layout_width="wrap_content" 
 6     android:layout_height="wrap_content">
 7     
 8     <TextView 
 9     android:id="@+id/TextView01" 
10     android:layout_width="wrap_content" 
11     android:layout_height="wrap_content" 
12     android:text="所有通話記錄"></TextView>
13     
14     <TextView 
15     android:id="@+id/TextView02" 
16     android:layout_width="wrap_content" 
17     android:layout_height="wrap_content" 
18     android:text="已接來電"></TextView>
19     
20     <TextView 
21     android:id="@+id/TextView03" 
22     android:layout_width="wrap_content" 
23     android:layout_height="wrap_content" 
24     android:text="未接來電"></TextView>
25     
26 </FrameLayout>

第二步：編寫layouttab01Activity.java這個檔案，比較簡單。

View Code

 1 package cn.edu.zwu.tel;
 2 
 3 import android.app.TabActivity;
 4 import android.os.Bundle;
 5 import android.view.LayoutInflater;
 6 import android.widget.TabHost;
 7 import android.widget.Toast;
 8 import android.widget.TabHost.OnTabChangeListener;
 9 
10 
11 public class LayoutTab01Activity extends TabActivity {
12     @Override
13     public void onCreate(Bundle savedInstanceState) {
14         super.onCreate(savedInstanceState);
15         
16         TabHost th = getTabHost();
17         //聲明TabHost，然後用LayoutInflater過濾出布局來，給TabHost加上含有Tab頁面的FrameLayout
18 //from(this)從這個TabActivity擷取LayoutInflater　　
19 //R.layout.main 存放Tab布局
20 //通過TabHost獲得存放Tab標籤頁內容的FrameLayout　　
21 //是否將inflate 拴繫到根布局元素上
22         LayoutInflater.from(this).inflate(R.layout.main, th.getTabContentView(), true); 
23         //通過TabHost獲得存放Tab標籤頁內容的FrameLayout，
24 //newTabSpecd的作用是擷取一個新的 TabHost.TabSpec，並關聯到當前 TabHost
25 //setIndicator的作用是指定標籤和表徵圖作為選項卡的指示符.
26 //setContent的作用是指定用於顯示選項卡內容的視圖 ID.
27         th.addTab(th.newTabSpec("all").setIndicator("所有通話記錄", getResources().getDrawable(R.drawable.call_forward)).setContent(R.id.TextView01));
28         th.addTab(th.newTabSpec("ok").setIndicator("已接來電",getResources().getDrawable(R.drawable.phone_call)).setContent(R.id.TextView02));
29         th.addTab(th.newTabSpec("cancel").setIndicator("未接來電",getResources().getDrawable(R.drawable.call_bluetooth)).setContent(R.id.TextView03));
30         //setOnTabChangeListener的作業是註冊一個回呼函數，當任何一個選項卡的選中狀態發生改變時調用.  
31         th.setOnTabChangedListener(
32                 new OnTabChangeListener() {
33                     @Override
34                     public void onTabChanged(String tabId) {
35                         Toast.makeText(LayoutTab01Activity.this, tabId, Toast.LENGTH_LONG).show();
36                     }
37                 }
38             );       
39     }
40 }

 

示範：

 

第二種方法：沒有用到FrameLayout這個布局，而直接用了listview，建立選項卡內容的回呼函數creatTabContent（）實現的

第一步：編寫main.xml檔案，具體代碼如下

View Code

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="@string/hello" />
11 
12 </LinearLayout>

第二步;編寫layoutTabActivity.java檔案，具體解釋都注釋在代碼裡

View Code

 1 package cn.edu.zwu.tel;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 import android.app.TabActivity;
 6 import android.os.Bundle;
 7 import android.view.View;
 8 import android.widget.ArrayAdapter;
 9 import android.widget.ListView;
10 import android.widget.TabHost;
11 
12 //TabContentFactory的意思是當某一選項卡被選中時產生選項卡的內容.
13 //如果你的選項卡的內容按某些條件來產生， 請使用該介面.例如：不顯示既存的視圖而是啟動活動.
14 public class LayoutTab02Activity extends TabActivity implements TabHost.TabContentFactory  {
15 
16 @Override
17   public void onCreate(Bundle savedInstanceState) 
18   {
19         super.onCreate(savedInstanceState);
20         TabHost th = getTabHost();
21          //newTabSpecd的作用是擷取一個新的 TabHost.TabSpec，並關聯到當前 TabHost
22 //setIndicator的作用是指定標籤和表徵圖作為選項卡的指示符.
23 //setContent的作用是指定用於顯示選項卡內容的視圖 ID.
24         th.addTab(th.newTabSpec("all").setIndicator("所有通話記錄").setContent(this));
25         th.addTab(th.newTabSpec("ok").setIndicator("已接來電").setContent(this));
26         th.addTab(th.newTabSpec("cancel").setIndicator("未接來電").setContent(this));
27     }
28 //建立選項卡內容的回呼函數.        
29   public View createTabContent(String tag) 
30   {
31         ListView lv = new ListView(this);
32         List<String> list = new ArrayList<String>();
33         list.add(tag);
34         if(tag.equals("all"))
35         {
36             list.add("tom");
37             list.add("kite");
38             list.add("rose");
39         }else if(tag.equals("ok"))
40         {
41             list.add("tom");
42             list.add("kite");
43         }else
44         {
45             list.add("rose");
46         }
47         
48         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
49                 android.R.layout.simple_list_item_checked, list);
50         lv.setAdapter(adapter);
51         return lv;
52     }
53   }

：