TabHost效果图 : 

一. TabHost介绍

TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计;

1. TabHost常用组件

TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;

TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;

-- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;

-- 添加选项卡 : addTab(tabSpec);

2. TabHost使用步骤

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;

c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;

3. 将按钮放到下面

布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;

设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;

设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮;

二. TabHost布局文件

1. 根标签及id

设置Android自带id : XML布局文件中, 可以使用<TabHost> 标签设置, 其中的id 需要引用 android的自带id : android:id="@android:id/tabhost" ;

getHost()获取前提 : 设置了该id之后, 在Activity界面可以使用 getHost(), 获取这个TabHost 视图对象;

示例 : 

[html] view plaincopy

1. <TabHost  
2.     android:id="@android:id/tabhost"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  

2. TabWidget组件

选项卡切换 : 该组件是选项卡切换按钮, 通过点击该组件可以切换选项卡;

设置android自带id : 这个组件的id要设置成android的自带id : android:id="@android:id/tabs" ;

TabHost必备组件 : 该组件与FrameLayout组件是TabHost组件中必备的两个组件;

切换按钮下方显示 : 如果想要将按钮放到下面, 可以将该组件定义在下面, 但是注意,FrameLayout要设置android:layout_widget = "1"; 

设置TabWidget大小 : 如果想要设置该按钮组件的大小, 可以设置该组件与FrameLayout组件的权重; 

示例 : 

[html] view plaincopy

1. <TabWidget   
2.     android:id="@android:id/tabs"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="horizontal"/>  

3. FrameLayout组件

组件作用 : 该组件中定义的子组件是TabHost中每个页面显示的选项卡, 可以将TabHost选项卡显示的视图定义在其中;

设置android自带id : 这个组件的id要设置成android的自带的id : android:id="@android:id/tabcontent" ;

示例 : 

[html] view plaincopy

1. <FrameLayout   
2.     android:id="@android:id/tabcontent"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:layout_weight="1">  

二. Activity方法

1. 获取TabHost

获取方法 : getHost();

前提 : 调用getHost()方法获取TabHost组件的方法的前提是在布局文件中, 设置了android自带的id android:id="@android:id/tabhost" 才可以;

2. 创建选项卡

创建选项卡 : 调用TabHost组件的newTabHost(tag), 其中的tag是字符串, 即在选项卡的唯一标识;

设置选项卡 : 

-- 设置按钮名称 : setIndicator("叫兽");

-- 设置选项卡内容 : setContent(), 可以设置视图组件, 可以设置Activity, 也可以设置Fragement;

添加选项卡 : tabHost.add(tag), 传入的参数是创建选项卡的时候定义的唯一标识;

三 代码 

XML布局文件 : 

[html] view plaincopy

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:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:orientation="vertical">  
11.           
12.         <TabWidget   
13.             android:id="@android:id/tabs"  
14.             android:layout_width="fill_parent"  
15.             android:layout_height="wrap_content"  
16.             android:orientation="horizontal"/>  
17.           
18.         <FrameLayout   
19.             android:id="@android:id/tabcontent"  
20.             android:layout_width="fill_parent"  
21.             android:layout_height="fill_parent"  
22.             android:layout_weight="1">  
23.               
24.             <LinearLayout   
25.                 android:id="@+id/alwayswet"  
26.                 android:layout_width="fill_parent"  
27.                 android:layout_height="fill_parent"  
28.                 android:orientation="vertical">  
29.                 <ImageView   
30.                     android:scaleType="fitXY"  
31.                     android:layout_height="fill_parent"  
32.                     android:layout_width="fill_parent"  
33.                     android:src="@drawable/alwayswet"/>  
34.             </LinearLayout>  
35.               
36.             <LinearLayout   
37.                 android:id="@+id/isanimal"  
38.                 android:layout_width="fill_parent"  
39.                 android:layout_height="fill_parent"  
40.                 android:orientation="vertical">  
41.                 <ImageView   
42.                     android:scaleType="fitXY"  
43.                     android:layout_height="fill_parent"  
44.                     android:layout_width="fill_parent"  
45.                     android:src="@drawable/isanimal"/>  
46.             </LinearLayout>  
47.               
48.             <LinearLayout   
49.                 android:id="@+id/nezha"  
50.                 android:layout_width="fill_parent"  
51.                 android:layout_height="fill_parent"  
52.                 android:orientation="vertical">  
53.                 <ImageView   
54.                     android:scaleType="fitXY"  
55.                     android:layout_height="fill_parent"  
56.                     android:layout_width="fill_parent"  
57.                     android:src="@drawable/nazha"/>  
58.             </LinearLayout>  
59.                           
60.         </FrameLayout>  
61.           
62.     </LinearLayout>  
63.       
64. </TabHost>  

Activity主界面代码 : 

[java] view plaincopy

1. package shuliang.han.tabhost_test;  
2.   
3. import android.app.TabActivity;  
4. import android.os.Bundle;  
5. import android.widget.TabHost;  
6. import android.widget.TabHost.TabSpec;  
7.   
8. public class MainActivity extends TabActivity {  
9.   
10.     @Override  
11.     protected void onCreate(Bundle savedInstanceState) {  
12.         super.onCreate(savedInstanceState);  
13.         setContentView(R.layout.tabhost);  
14.           
15.         TabHost tabHost = getTabHost();  
16.           
17.         TabSpec page1 = tabHost.newTabSpec("tab1")  
18.                 .setIndicator("叫兽")  
19.                 .setContent(R.id.isanimal);  
20.         tabHost.addTab(page1);  
21.           
22.         TabSpec page2 = tabHost.newTabSpec("tab2")  
23.                 .setIndicator("老湿")  
24.                 .setContent(R.id.alwayswet);  
25.         tabHost.addTab(page2);  
26.           
27.         TabSpec page3 = tabHost.newTabSpec("tab3")  
28.                 .setIndicator("哪吒")  
29.                 .setContent(R.id.nezha);  
30.         tabHost.addTab(page3);  
31.     }  
32.   
33. }