Android选项卡TabHost功能和用法

1、选项卡TabHost介绍
TabHost可以方便地在窗口上放置多个标签页，每个标签页相当于获得了一个与外部容器大小相同的组件摆放区域
TabHost是一个简单的容器，提供如下两种方法来创建选项卡
newTabSpec(String tag):创建选项卡
addTab(TabHost.TabSpec tabSpec):添加选项卡
使用TabHost有三种方法

2、方法1，继承TabActivity
主布局文件不需要定义TabHost组件，这里用三个垂直的LinearLayout作为标签页，每个标签页里面有两个TextView组件，main_tab.xml代码如下：

1. <FrameLayout
2. xmlns:android=“http://schemas.android.com/apk/res/android”
3. android:id=“@android:id/tabcontent”
4. android:layout_width=“match_parent”
5. android:layout_height=“match_parent”>
6. <!– 定义*个标签页的内容 –>
7. <LinearLayout
8. android:id=“@+id/tab01”
9. android:orientation=“vertical”
10. android:layout_width=“match_parent”
11. android:layout_height=“match_parent”>
12. <TextView
13. android:layout_width=“wrap_content”
14. android:layout_height=“wrap_content”
15. android:text=“*个标签页的第1个TextView组件”
16. android:textSize=“8pt” />
17. <TextView
18. android:layout_width=“wrap_content”
19. android:layout_height=“wrap_content”
20. android:text=“*个标签页的第2个TextView组件”
21. android:textSize=“8pt” />
22. </LinearLayout>
23. <!– 定义第二个标签页的内容 –>
24. <LinearLayout
25. android:id=“@+id/tab02”
26. android:orientation=“vertical”
27. android:layout_width=“match_parent”
28. android:layout_height=“match_parent”>
29. <TextView
30. android:layout_width=“wrap_content”
31. android:layout_height=“wrap_content”
32. android:text=“第二个标签页的第1个TextView组件”
33. android:textSize=“8pt” />
34. <TextView
35. android:layout_width=“wrap_content”
36. android:layout_height=“wrap_content”
37. android:text=“第二个标签页的第2个TextView组件”
38. android:textSize=“8pt” />
39. </LinearLayout>
40. <!– 定义第三个标签页的内容 –>
41. <LinearLayout
42. android:id=“@+id/tab03”
43. android:orientation=“vertical”
44. android:layout_width=“match_parent”
45. android:layout_height=“match_parent”>
46. <TextView
47. android:layout_width=“wrap_content”
48. android:layout_height=“wrap_content”
49. android:text=“第三个标签页的第1个TextView组件”
50. android:textSize=“8pt” />
51. <TextView
52. android:layout_width=“wrap_content”
53. android:layout_height=“wrap_content”
54. android:text=“第三个标签页的第2个TextView组件”
55. android:textSize=“8pt” />
56. </LinearLayout>
57. </FrameLayout>

在Java代码中将Activity继承TabActivity，具体代码如下：

2. package com.example.tabhosttest;
4. import android.app.TabActivity;
5. import android.os.Bundle;
6. import android.view.LayoutInflater;
7. import android.widget.TabHost;
8. import android.widget.TabHost.OnTabChangeListener;
9. import android.widget.Toast;
12. public class MainActivity extends TabActivity
13. {
14. @Override
15. public void onCreate(Bundle savedInstanceState)
16. {
17. super.onCreate(savedInstanceState);
18. //setContentView(R.layout.main_tab);
19. // 获取该Activity里面的TabHost组件
20. TabHost tabHost = getTabHost();
21. LayoutInflater.from(this).inflate(R.layout.main_tab,
22. tabHost.getTabContentView(), true);
23. // 创建*个Tab页
24. /*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1")
25. .setIndicator("标签页一") // 设置标题
26. .setContent(R.id.tab01); //设置内容
27. // 添加*个标签页
28. tabHost.addTab(tab1);
29. TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2")
30. .setIndicator("标签页二")
31. .setContent(R.id.tab02);
32. // 添加第二个标签页
33. tabHost.addTab(tab2);
34. TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3")
35. .setIndicator("标签页三")
36. .setContent(R.id.tab03);
37. // 添加第三个标签页
38. tabHost.addTab(tab3);*/
40. /* 以上创建和添加标签页也可以用如下代码实现 */
41. tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));
42. tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));
43. tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));
45. //标签切换事件处理，setOnTabChangedListener
46. tabHost.setOnTabChangedListener(new OnTabChangeListener(){
47. @Override
48. // tabId是newTabSpec参数设置的tab页名，并不是layout里面的标识符id
49. public void onTabChanged(String tabId) {
50. if (tabId.equals("tab1")) { //*个标签
51. Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();
52. }
53. if (tabId.equals("tab2")) { //第二个标签
54. Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();
55. }
56. if (tabId.equals("tab3")) { //第三个标签
57. Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();
58. }
59. }
60. });
61. }
62. }

这里有两个地方注意一下，*没有使用setContentView，而是用inflate方法；第二在设置标签页改变监听器时，onTabChanged的参数tabId是使用newTabSpec方法的参数设置的标签页名称，而不是布局文件中标签页的标识符Id；第三为了测试方便使用了Toast，
关于inflate和Toast，下面再学习，先简单了解一下
LayoutInflater的作用是将xml布局文件实例话，Toast是在屏幕上显示提示信息
点击第二个标签页之后，显示效果如下图9-2-1所示：

图 9-2-1

 

3、方法2，在布局文件中使用TabHost，不用继承TabActivity
使用findViewById获取TabHost组件
1 在界面布局中定义TabHost组件，并为该组件定义选项卡内容
2 使用findViewById获取TabHost组件
3 通过TabHost对象的方法来创建和添加选项卡
布局文件为activity_main.xml如下：

1. <TabHost
2.     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.     android:layout_weight=“1”>
9.     <LinearLayout 
10.         android:orientation=“vertical”
11.         android:layout_width=“match_parent”
12.         android:layout_height=“match_parent”>
15.        <!– TabWidget组件id值不可变–>
16.        <TabWidget 
17.            android:id=“@android:id/tabs”
18.             android:layout_width=“match_parent”
19.             android:layout_height=“wrap_content”>
20.        </TabWidget>
23.        <!– FrameLayout布局，id值不可变–>
24.        <FrameLayout 
25.            android:id=“@android:id/tabcontent”
26.            android:layout_width=“fill_parent”
27.            android:layout_height=“fill_parent”
28.            android:layout_above=“@android:id/tabs”>
31.            <!– *个tab的布局 –>
32.            <LinearLayout  
33.                android:id=“@+id/tab1”
34.                android:layout_width=“match_parent”
35.                android:layout_height=“match_parent” >
38.                <TextView  
39.                     android:layout_width=“wrap_content”
40.                     android:layout_height=“wrap_content”
41.                     android:text=“*个tab的布局” />
42.            </LinearLayout>
45.            <!– 第二个tab的布局 –>
46.            <LinearLayout  
47.                android:id=“@+id/tab2”
48.                android:layout_width=“match_parent”
49.                android:layout_height=“match_parent” >
52.                <TextView  
53.                     android:layout_width=“wrap_content”
54.                     android:layout_height=“wrap_content”
55.                     android:text=“第二个tab的布局” />
56.            </LinearLayout>
62.        </FrameLayout>
63.     </LinearLayout>
64. </TabHost>

 

java代码如下：

package com.example.tabhost;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

TabHost tab = (TabHost) findViewById(android.R.id.tabhost);

//初始化TabHost容器
tab.setup();
//在TabHost创建标签，然后设置：标题／图标／标签页布局
tab.addTab(tab.newTabSpec(“tab1”).setIndicator(“本地音乐” , null).setContent(R.id.tab1));
tab.addTab(tab.newTabSpec(“tab2”).setIndicator(“网络音乐” , null).setContent(R.id.tab2));

}

}

这段非转载代码，用的和作者不是一个xml，效果图如下：

4、方法3基本和方法2类似，不用继承TabActivity，只是Tab的内容分开到单独的xml文件，每个标签页都需要inflate一次，和方法2*大的区别就是标签页分开到不同的xml文件中
tab1对应的tab1.xml：

1. <LinearLayout
2. xmlns:android=“http://schemas.android.com/apk/res/android”
3. android:id=“@+id/tab01”
4. android:orientation=“vertical”
5. android:layout_width=“match_parent”
6. android:layout_height=“match_parent”>
7. <TextView
8. android:layout_width=“wrap_content”
9. android:layout_height=“wrap_content”
10. android:text=“*个标签页的第1个TextView组件”
11. android:textSize=“8pt” />
12. <TextView
13. android:layout_width=“wrap_content”
14. android:layout_height=“wrap_content”
15. android:text=“*个标签页的第2个TextView组件”
16. android:textSize=“8pt” />
17. </LinearLayout>

tab2对应的tab2.xml：

1. <LinearLayout
2. xmlns:android=“http://schemas.android.com/apk/res/android”
3. android:id=“@+id/tab02”
4. android:orientation=“vertical”
5. android:layout_width=“match_parent”
6. android:layout_height=“match_parent”>
7. <TextView
8. android:layout_width=“wrap_content”
9. android:layout_height=“wrap_content”
10. android:text=“第二个标签页的第1个TextView组件”
11. android:textSize=“8pt” />
12. <TextView
13. android:layout_width=“wrap_content”
14. android:layout_height=“wrap_content”
15. android:text=“第二个标签页的第2个TextView组件”
16. android:textSize=“8pt” />
17. </LinearLayout>

tab3对应的tab3.xml：

1. <LinearLayout
2. xmlns:android=“http://schemas.android.com/apk/res/android”
3. android:id=“@+id/tab03”
4. android:orientation=“vertical”
5. android:layout_width=“match_parent”
6. android:layout_height=“match_parent”>
7. <TextView
8. android:layout_width=“wrap_content”
9. android:layout_height=“wrap_content”
10. android:text=“第三个标签页的第1个TextView组件”
11. android:textSize=“8pt” />
12. <TextView
13. android:layout_width=“wrap_content”
14. android:layout_height=“wrap_content”
15. android:text=“第三个标签页的第2个TextView组件”
16. android:textSize=“8pt” />
17. </LinearLayout>

主布局文件main.xml：

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <TabHost
3. xmlns:android=“http://schemas.android.com/apk/res/android”
4. android:id=“@+id/tabhost”
5. android:layout_width=“match_parent”
6. android:layout_height=“match_parent”
7. android:layout_weight=“1”>
8. <LinearLayout
9. android:layout_width=“match_parent”
10. android:layout_height=“match_parent”
11. android:orientation=“vertical”>
12. <TabWidget
13. android:id=“@android:id/tabs”
14. android:layout_width=“match_parent”
15. android:layout_height=“wrap_content”/>
16. <FrameLayout
17. android:id=“@android:id/tabcontent”
18. android:layout_width=“match_parent”
19. android:layout_height=“match_parent”>
20. </FrameLayout>
21. </LinearLayout>
22. </TabHost>

Java代码如下：

2. package com.example.tabhosttest;
4. import android.app.Activity;
5. import android.app.TabActivity;
6. import android.os.Bundle;
7. import android.view.LayoutInflater;
8. import android.widget.TabHost;
9. import android.widget.TabHost.OnTabChangeListener;
10. import android.widget.Toast;
13. public class MainActivity extends Activity
14. {
15. @Override
16. public void onCreate(Bundle savedInstanceState)
17. {
18. super.onCreate(savedInstanceState);
19. // 方法2、3使用：
20. setContentView(R.layout.main);
21. // 获取该Activity里面的TabHost组件
22. // 方法1使用：
23. // TabHost tabHost = getTabHost();
24. // 方法1使用：
25. // LayoutInflater.from(this).inflate(R.layout.main_tab, tabHost.getTabContentView(), true);
26. // 方法2、3使用
27. TabHost tabHost = (TabHost)findViewById(R.id.tabhost);
28. tabHost.setup();
29. // 方法3使用，动态载入xml，不需要Activity
30. LayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView());
31. LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView());
32. LayoutInflater.from(this).inflate(R.layout.tab3, tabHost.getTabContentView());
33. // 创建*个Tab页
34. /*TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1")
35. .setIndicator("标签页一") // 设置标题
36. .setContent(R.id.tab01); //设置内容
37. // 添加*个标签页
38. tabHost.addTab(tab1);
39. TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2")
40. .setIndicator("标签页二")
41. .setContent(R.id.tab02);
42. // 添加第二个标签页
43. tabHost.addTab(tab2);
44. TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3")
45. .setIndicator("标签页三")
46. .setContent(R.id.tab03);
47. // 添加第三个标签页
48. tabHost.addTab(tab3);*/
50. /* 以上创建和添加标签页也可以用如下代码实现 */
51. tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("标签页一").setContent(R.id.tab01));
52. tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("标签页二").setContent(R.id.tab02));
53. tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("标签页三").setContent(R.id.tab03));
55. //标签切换事件处理，setOnTabChangedListener
56. tabHost.setOnTabChangedListener(new OnTabChangeListener(){
57. @Override
58. // tabId是newTabSpec*个参数设置的tab页名，并不是layout里面的标识符id
59. public void onTabChanged(String tabId) {
60. if (tabId.equals("tab1")) { //*个标签
61. Toast.makeText(MainActivity.this, "点击标签页一", Toast.LENGTH_SHORT).show();
62. }
63. if (tabId.equals("tab2")) { //第二个标签
64. Toast.makeText(MainActivity.this, "点击标签页二", Toast.LENGTH_SHORT).show();
65. }
66. if (tabId.equals("tab3")) { //第三个标签
67. Toast.makeText(MainActivity.this, "点击标签页三", Toast.LENGTH_SHORT).show();
68. }
69. }
70. });
71. }
72. }