史上最全的Android的Tab與TabHost講解

轉自http://www.eoeandroid.com/thread-1035-1-1.html

 

Tab與TabHost

這就是Tab，而盛放Tab的容器就是TabHost
如何?？？
每一個Tab還對應了一個布局，這個就有點好玩了。一個Activity，對應了多個功能布局。
①建立一個Tab項目，注意，不要產生main Activity

這裡不要選
②在包裡面建立一個類MyTab，繼承於TabActivity
其實，TabActivity是Activity的子類

1. package zyf.tab.test;
3. import android.app.TabActivity;
5. public class MyTab extends TabActivity {
7. }

複製代碼

③從父類繼承OnCreate()入口方法

1. package zyf.tab.test;
2. import android.app.TabActivity;
3. import android.os.Bundle;
4. public class MyTab extends TabActivity {
5.     @Override
6.     protected void onCreate(Bundle savedInstanceState) {
7.         // TODO Auto-generated method stub
8.         super.onCreate(savedInstanceState);
9.     }
10. }

複製代碼

④在Manifest.xml檔案中註冊一下MyTab類（Activity）

1. <activity android:name=".MyTab">
2.     <intent-filter>
3.         <action android:name="android.intent.action.MAIN"></action>
4.         <category android:name="android.intent.category.LAUNCHER"></category>
5.     </intent-filter>
6. </activity>

複製代碼

⑤這時候，需要設計一下標籤頁對應的布局，一般採用FrameLayout作為根布局，每個標籤頁面對應一個子節點的Layout

1. <?xml version="1.0" encoding="utf-8"?>
2. <!--  這裡是根節點布局  -- >
3. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:layout_width="fill_parent" android:layout_height="fill_parent">
6. <!--  第一個Tab 對應的布局  -- >
7.     <LinearLayout android:id="@+id/widget_layout_Blue"
8.         android:layout_width="fill_parent" android:layout_height="fill_parent"
9.         androidrientation="vertical" >
10.         <EditText android:id="@+id/widget34" android:layout_width="fill_parent"
11.             android:layout_height="wrap_content" android:text="EditText"
12.             android:textSize="18sp">
13.         </EditText>
14.         <Button android:id="@+id/widget30" android:layout_width="wrap_content"
15.             android:layout_height="wrap_content" android:text="Button">
16.         </Button>
17.     </LinearLayout>
18. <!--  第二個Tab 對應的布局  -- >
19.     <LinearLayout android:id="@+id/widget_layout_red"
20.         android:layout_width="fill_parent" android:layout_height="fill_parent"
21.         androidrientation="vertical"  >
22.         <AnalogClock android:id="@+id/widget36"
23.             android:layout_width="wrap_content" android:layout_height="wrap_content">
24.         </AnalogClock>
25.     </LinearLayout>
26. <!--  第三個Tab 對應的布局  -- >
27.     <LinearLayout android:id="@+id/widget_layout_green"
28.         android:layout_width="fill_parent" android:layout_height="fill_parent"
29.         androidrientation="vertical">
30.         <RadioGroup android:id="@+id/widget43"
31.             android:layout_width="166px" android:layout_height="98px"
32.             androidrientation="vertical">
33.             <RadioButton android:id="@+id/widget44"
34.                 android:layout_width="wrap_content" android:layout_height="wrap_content"
35.                 android:text="RadioButton">
36.             </RadioButton>
37.             <RadioButton android:id="@+id/widget45"
38.                 android:layout_width="wrap_content" android:layout_height="wrap_content"
39.                 android:text="RadioButton">
40.             </RadioButton>
41.         </RadioGroup>
42.     </LinearLayout>
43. </FrameLayout>

複製代碼

⑥首先，應該聲明TabHost，然後用LayoutInflater過濾出布局來，給TabHost加上含有Tab頁面的FrameLayout

1. private TabHost myTabhost;
2. myTabhost=this.getTabHost();//從TabActivity上面擷取放置Tab的TabHost
3. LayoutInflater.from(this).inflate(R.layout.main, myTabhost.getTabContentView(), true);
4. //from(this)從這個TabActivity擷取LayoutInflater
5. //R.layout.main 存放Tab布局
6. //通過TabHost獲得存放Tab標籤頁內容的FrameLayout
7. //是否將inflate 拴繫到根布局元素上
8. myTabhost.setBackgroundColor(Color.argb(150, 22, 70, 150));
9. //設定一下TabHost的顏色

複製代碼

⑦接著，在TabHost建立一個標籤，然後設定一下標題／表徵圖／標籤頁布局

1. myTabhost
2.                 .addTab(myTabhost.newTabSpec("TT")// 製造一個新的標籤TT
3.                         .setIndicator("KK",
4.                                 getResources().getDrawable(R.drawable.ajjc))
5.                         // 設定一下顯示的標題為KK，設定一下標籤表徵圖為ajjc
6.                         .setContent(R.id.widget_layout_red));
7.         //設定一下該標籤頁的布局內容為R.id.widget_layout_red，這是FrameLayout中的一個子Layout

複製代碼

⑧標籤切換事件處理，setOnTabChangedListener

1. myTabhost.setOnTabChangedListener(new OnTabChangeListener(){
2.             @Override
3.             public void onTabChanged(String tabId) {
4.                 // TODO Auto-generated method stub
5.             }            
6.         });

複製代碼

⑨各個標籤頁的動態MENU
先把在XML中設計好的MENU放到一個int數組裡

1. private static final int myMenuResources[] = { R.menu.phonebook_menu,
2.             R.menu.addphone_menu, R.menu.chatting_menu, R.menu.userapp_menu };

複製代碼

在setOnTabChangedListener()方法中根據標籤的切換情況來設定myMenuSettingTag

1. @Override
2.     public void onTabChanged(String tagString) {
3.         // TODO Auto-generated method stub
4.         if (tagString.equals("One")) {
5.             myMenuSettingTag = 1;
6.         }
7.         if (tagString.equals("Two")) {
8.             myMenuSettingTag = 2;
9.         }
10.         if (tagString.equals("Three")) {
11.             myMenuSettingTag = 3;
12.         }
13.         if (tagString.equals("Four")) {
14.             myMenuSettingTag = 4;
15.         }
16.         if (myMenu != null) {
17.             onCreateOptionsMenu(myMenu);
18.         }
19.     }

複製代碼

然後onCreateOptionsMenu(Menu menu) 方法中通過MenuInflater過濾器動態加入MENU

1.    @Override
2.     public boolean onCreateOptionsMenu(Menu menu) {
3.         // TODO Auto-generated method stub
4.         // Hold on to this
5.         myMenu = menu;
6.         myMenu.clear();//清空MENU菜單
7.         // Inflate the currently selected menu XML resource.
8.         MenuInflater inflater = getMenuInflater();        
9. //從TabActivity這裡擷取一個MENU過濾器
10.         switch (myMenuSettingTag) {
11.         case 1:
12.             inflater.inflate(myMenuResources[0], menu);
13.             //動態加入數組中對應的XML MENU菜單
14.             break;
15.         case 2:
16.             inflater.inflate(myMenuResources[1], menu);
17.             break;
18.         case 3:
19.             inflater.inflate(myMenuResources[2], menu);
20.             break;
21.         case 4:
22.             inflater.inflate(myMenuResources[3], menu);
23.             break;
24.         default:
25.             break;
26.         }
27.         return super.onCreateOptionsMenu(menu);
28.     }

複製代碼

⑩運行效果