在Android中，通常可以使用切換卡（選項卡）實現切換顯示不同頁面內容的功能。這一功能可以通過TabHost控件來實現。

　　下面我們就通過一個簡單的實例演示如何使用TabHost控件完成切換卡功能，完成后的運行效果如圖1所示。

圖1?主頁顯示效果

　　可以看出，在該實例中，總共設置了四個TabHost標簽，分別為主頁、時間、聯系人和搜索。在點擊這些標簽時，便可以完成相應頁面內容的顯示。

?

1.界面布局

　　TabHost是整個Tab的容器，是由TabWidget和FrameLayout?兩部分組成的。其中，TabWidget是每個tab的標簽，而FrameLayout則是tab所要顯示的內容。

　　根據以上的描述，我們就可以對整個顯示界面進行合理的布局了。我們以LinearLayout的垂直布局方式將整個TabHost分成上下兩部分，上面使用TabWidget控件顯示標簽，下面使用FrameLayout布局顯示每個標簽下的對應內容。

　　具體的xml布局文件源碼如下：

1 　　<?xml version="1.0" encoding="utf-8"?> 2 　　<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 3 　　 android:id="@android:id/tabhost" 4 　　 android:layout_width="match_parent" 5 　　 android:layout_height="match_parent" > 6 　　 7 　　 <LinearLayout 8 　　 android:orientation="vertical" 9 　　 android:layout_width="match_parent" 10 　　 android:layout_height="match_parent"> 11 　　 12 　　 <!-- TabHost的標簽 --> 13 　　 <TabWidget 14 　　 android:id="@android:id/tabs" 15 　　 android:layout_width="match_parent" 16 　　 android:layout_height="wrap_content" > 17 　　 </TabWidget> 18 　　 19 　　 <!-- TabHost的內容 --> 20 　　 <FrameLayout 21 　　 android:id="@android:id/tabcontent" 22 　　 android:layout_width="match_parent" 23 　　 android:layout_height="match_parent" > 24 　　 25 　　 <!-- 第一個標簽要顯示的內容 --> 26 　　 <ImageView 27 　　 android:id="@+id/homeimage" 28 　　 android:layout_width="wrap_content" 29 　　 android:layout_height="wrap_content" 30 　　 android:src="@+drawable/homeimage" 31 　　 android:background="#FFFFFF" ></ImageView> 32 　　 33 　　 <!-- 第二個標簽要顯示的內容 --> 34 　　 <LinearLayout 35 　　 android:id="@+id/time" 36 　　 android:layout_width="match_parent" 37 　　 android:layout_height="match_parent" 38 　　 android:orientation="vertical" 39 　　 android:background="#000000"> 40 　　 <AnalogClock 41 　　 android:layout_marginTop="30dp" 42 　　 android:layout_width="match_parent" 43 　　 android:layout_height="wrap_content" ></AnalogClock> 44 　　 <DigitalClock 45 　　 android:textColor="#FFFFFF" 46 　　 android:gravity="center_horizontal" 47 　　 android:layout_marginTop="10dp" 48 　　 android:layout_width="match_parent" 49 　　 android:layout_height="wrap_content" ></DigitalClock> 50 　　 </LinearLayout> 51 　　 52 　　 <!-- 第三個標簽要顯示的內容 --> 53 　　 <TextView 54 　　 android:id="@+id/personlist" 55 　　 android:layout_width="match_parent" 56 　　 android:layout_height="match_parent" 57 　　 android:text="聯系人列表"> 58 　　 </TextView> 59 　　 60 　　 <!-- 第四個標簽要顯示的內容 --> 61 　　 <LinearLayout 62 　　 android:id="@+id/searcher" 63 　　 android:orientation="horizontal" 64 　　 android:layout_width="match_parent" 65 　　 android:layout_height="match_parent" > 66 　　 <EditText 67 　　 android:layout_weight="5" 68 　　 android:layout_width="0dp" 69 　　 android:layout_height="wrap_content" 70 　　 android:hint="請輸入搜索關鍵字" ></EditText> 71 　　 <Button 72 　　 android:layout_weight="1" 73 　　 android:layout_width="0dp" 74 　　 android:layout_height="wrap_content" 75 　　 android:text="搜索"> </Button> 76 　　 </LinearLayout> 77 　　 78 　　 </FrameLayout> 79 　　 </LinearLayout> 80 　　</TabHost>

　　通過以上代碼可以看出，在FrameLayout布局中分別實現了四個標簽下所要顯示的內容的布局設置。比如，在第二個標簽“時間”中，我們以LinearLayout的垂直布局方式顯示了一個指針式時鐘AnalogClock和數字式時鐘DigitalClock，其顯示效果如圖2所示。

　　此外，在使用TabHost控件時有一點需要特別注意，TabHost、TabWidget以及FrameLayout的id是固定的，必須按如下形式進行設置。

　　（1）TabHost的android:id必須設置為：android:id="@android:id/tabhost"

　　（2）TabWidget的android:id必須設置為：android:id="@android:id/tabs"

　　（3）FrameLayout的android:id必須設置為：android:id="@android:id/tabcontent"?

圖2?時間顯示效果

?

2.TabHost控件的常用方法

　　了解了如何對TabHost控件進行布局之后，我們還需要了解TabHost控件的一些常用方法。具體如下：

　　（1）public?void?addTab?(TabHost.TabSpec?tabSpec); 　 ?//添加Tab

　　（2）public?int?getCurrentTab?(); 　　　　　　　　　　　　//獲取當前Tab的index

　　（3）public?String?getCurrentTabTag?(); 　　　　　　　　 //獲取當前Tab的tag

　　（4）public?View?getCurrentTabView?(); 　　　　　　　　?//獲取當前Tab的視圖

　　（5）public?void?setCurrentTab?(int?index); 　　　　　　 ?//設置當前顯示哪個Tab

　　（6）public?void?setCurrentTabByTag?(String?tag); 　　　//設置當前顯示哪個Tab

?

3.TabHost.TabSpec

　　從TabHost控件的常用方法中可以看出，要將Tab加入到TabHost中，需要使用到addTab?(TabHost.TabSpec?tabSpec)方法，而這個方法的參數是一個TabHost.TabSpec對象，那么TabHost的內部類TabHost.TabSpec是用來干嘛的呢？

　　我們已經知道，每個Tab都是由TabWidget和FrameLayout?兩部分組成的。而TabHost.TabSpec可以為每個Tab設置一個Tag（類型為String），以此來跟蹤每一個Tab。此外，TabHost.TabSpec還可以為Tab設置標簽、圖標以及內容。由此可以看出TabHost.TabSpec類對TabHost控件來說是及其重要的。

　　TabHost.TabSpec類的常用方法如圖3所示。

圖3?TabHost.TabSpec類的常用方法

　　由圖3可以看出，在TabHost.TabSpec類中提供了設置Tab標簽和圖標的方法setIndicator()，以及設置Tab內容的方法setContent()。利用這兩個方法，我們便可以將我們在xml布局文件中定義好的Tab內容加載到對應的TabHost控件中了。具體實現方法如下：

1 /* 2 * Function : onCreate() 3 * Author : 博客園-依舊淡然 4 */ 5 public void onCreate(Bundle savedInstanceState) { 6 super.onCreate(savedInstanceState); 7 setContentView(R.layout.activity_main); 8 9 mTabHost = getTabHost(); //獲取TabHost對象 10 11 //添加“主頁”Tab到TabHost控件中 12 mTabHost.addTab(mTabHost.newTabSpec("home") 13 .setIndicator("主頁", getResources().getDrawable(R.drawable.home))//設置Tab標簽和圖標 14 .setContent(R.id.homeimage)); //設置Tab內容 15 16 //添加“時間”Tab到TabHost控件中 17 mTabHost.addTab(mTabHost.newTabSpec("time") 18 .setIndicator("時間", getResources().getDrawable(R.drawable.time)) 19 .setContent(R.id.time)); 20 21 //添加“聯系人”Tab到TabHost控件中 22 mTabHost.addTab(mTabHost.newTabSpec("persons") 23 .setIndicator("聯系人", getResources().getDrawable(R.drawable.persons)) 24 .setContent(R.id.personlist)); 25 26 //添加“搜索”Tab到TabHost控件中 27 mTabHost.addTab(mTabHost.newTabSpec("searcher") 28 .setIndicator("搜索", getResources().getDrawable(R.drawable.search)) 29 .setContent(R.id.searcher)); 30 31 mTabHost.setBackgroundResource(R.drawable.background); //設置TabHost控件的背景圖片 32 mTabHost.setCurrentTab(0); //設置當前顯示第一個Tab 33 mTabHost.setOnTabChangedListener(this); //設置TabHost控件的事件監聽

　　通過以上代碼，我們向TabHost控件中添加了四個Tab對象，并設置了各自的Tab標簽和圖標以及Tab內容。此外，我們還為TabHost控件設置了背景圖片以及默認顯示第一個Tab。

?

4.事件監聽

　　對TabHost控件進行事件監聽，需要實現OnTabChangeListener接口中的OnTabChanged()方法。

?

總結

以上是生活随笔為你收集整理的切换卡TabHost控件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。