Android TabHost的使用

标签显示界面的主要特点是可以在一个窗口中显示多组标签栏的类容。

在Android系统中，每个标签栏称为一个Tab，而包含多个标签栏的内容就称为TabHost。

通过TabHost的继承结构来看，TabHost类是FrameLayout的子类。

实现标签显示界面有两种方式可供选择。

1. 直接让一个Activity继承TabActivity类。
2. 利用findViewById()方法取得TabHost组件，并进行一些配置。

下面我们用两个简单例子来体验一下：

第一种继承TabActivity类：（注意：TabActivity类已被官方提出抛弃）

首先就是布局文件tab.xml：

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <LinearLayout 

 3     xmlns:android="http://schemas.android.com/apk/res/android"

 4     android:orientation="vertical" 

 5     android:layout_width="fill_parent"

 6     android:layout_height="fill_parent">

 7     <LinearLayout 

 8         xmlns:android="http://schemas.android.com/apk/res/android"

 9         android:id="@+id/tab_edit"

10         android:orientation="vertical" 

11         android:layout_width="fill_parent"

12         android:layout_height="fill_parent">

13         <EditText

14             android:id="@+id/edit" 

15             android:layout_width="wrap_content"

16             android:layout_height="wrap_content" 

17             android:text="请输入检索关键字..."

18             android:textSize="18px" />

19         <Button

20             android:id="@+id/but"

21             android:layout_width="wrap_content"

22             android:layout_height="wrap_content"

23             android:text="搜索" />

24     </LinearLayout>

25     <LinearLayout 

26         xmlns:android="http://schemas.android.com/apk/res/android"

27         android:id="@+id/tab_clock"

28         android:orientation="vertical" 

29         android:layout_width="fill_parent"

30         android:layout_height="fill_parent">

31         <AnalogClock

32             android:id="@+id/myAnalogClock" 

33             android:layout_width="wrap_content"

34             android:layout_height="wrap_content"/>

35     </LinearLayout>

36     <LinearLayout 

37         xmlns:android="http://schemas.android.com/apk/res/android"

38         android:id="@+id/tab_sex"

39         android:orientation="vertical" 

40         android:layout_width="fill_parent"

41         android:layout_height="fill_parent">

42         <RadioGroup

43             android:id="@+id/sex" 

44             android:layout_width="wrap_content"

45             android:layout_height="wrap_content"

46             android:orientation="vertical">

47             <RadioButton

48                 android:id="@+id/male"

49                 android:checked="true"

50                 android:text="性别：男" />

51             <RadioButton

52                 android:id="@+id/female"

53                 android:text="性别：女" />

54         </RadioGroup>

55     </LinearLayout>

56 </LinearLayout>

View Code

其次就是默认的MainActivity的实现：

 1 public class MyTabHostDemo extends TabActivity { // 继承了TabActivity

 2     private TabHost myTabHost;

 3     private int[] layRes = new int[] { R.id.tab_edit, R.id.tab_clock,

 4             R.id.tab_sex }; // 这些是内嵌布局文件的ID

 5 

 6     @Override

 7     public void onCreate(Bundle savedInstanceState) {

 8         super.onCreate(savedInstanceState);

 9         this.myTabHost = super.getTabHost(); // 取得TabHost对象

10         LayoutInflater.from(this).inflate(R.layout.tab,

11                 this.myTabHost.getTabContentView(), true); // true表示实例化布局文件中的组件

12         for (int x = 0; x < this.layRes.length; x++) {

13             TabSpec myTab = this.myTabHost.newTabSpec("tab" + x) ;

14             myTab.setIndicator("标签  - " + x) ;

15             myTab.setContent(this.layRes[x]) ;

16             this.myTabHost.addTab(myTab) ;

17         }

18     }

19 }

View Code

到此，一个简单的TabHost的使用就完成了。

第二种方式的实现：

首先，我们还是是布局文件的实现。

tab.xml:

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:id="@+id/TabHost01"

 4     android:layout_width="fill_parent"

 5     android:layout_height="fill_parent"

 6     android:layout_alignParentBottom="true"

 7     android:layout_gravity="bottom" >

 8 

 9     <LinearLayout

10         android:layout_width="fill_parent"

11         android:layout_height="fill_parent"

12         android:orientation="vertical" >

13 

14         <RelativeLayout

15             android:layout_width="fill_parent"

16             android:layout_height="fill_parent" >

17 

18             <TabWidget

19                 android:id="@android:id/tabs"

20                 android:layout_width="fill_parent"

21                 android:layout_height="wrap_content"

22                 android:layout_alignParentBottom="true" />

23 

24             <FrameLayout

25                 android:id="@android:id/tabcontent"

26                 android:layout_width="fill_parent"

27                 android:layout_height="fill_parent" >

28 

29                 <LinearLayout

30                     android:id="@+id/LinearLayout1"

31                     android:layout_width="fill_parent"

32                     android:layout_height="wrap_content" >

33 

34                     <TextView

35                         android:id="@+id/TextView01"

36                         android:layout_width="wrap_content"

37                         android:layout_height="wrap_content"

38                         android:text="one" >

39                     </TextView>

40                 </LinearLayout>

41 

42                 <LinearLayout

43                     android:id="@+id/LinearLayout2"

44                     android:layout_width="wrap_content"

45                     android:layout_height="wrap_content" >

46 

47                     <TextView

48                         android:id="@+id/TextView02"

49                         android:layout_width="fill_parent"

50                         android:layout_height="wrap_content"

51                         android:text="two" >

52                     </TextView>

53                 </LinearLayout>

54 

55                 <LinearLayout

56                     android:id="@+id/LinearLayout3"

57                     android:layout_width="wrap_content"

58                     android:layout_height="wrap_content" >

59 

60                     <TextView

61                         android:id="@+id/TextView03"

62                         android:layout_width="fill_parent"

63                         android:layout_height="wrap_content"

64                         android:text="three" >

65                     </TextView>

66                 </LinearLayout>

67             </FrameLayout>

68         </RelativeLayout>

69     </LinearLayout>

70 

71 </TabHost>

View Code

main.xml:(这个不是默认.JAVA文件加载的布局文件，只是为了方便没有新建布局文件。)

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:layout_width="match_parent"

 4     android:layout_height="match_parent"

 5     android:orientation="vertical" >

 6     <TextView 

 7         android:id="@+id/TV"

 8         android:layout_width="wrap_content"

 9         android:layout_height="wrap_content"

10         android:text="nihao!!!"/>

11 

12 </LinearLayout>

View Code

实现默认的MainActivity:

 1 public class MainActivity extends ActivityGroup {//ActivityGroup类也已被建议遗弃

 2     private TabHost tabHost;

 3     Intent oneIntent;

 4 

 5     @Override

 6     protected void onCreate(Bundle savedInstanceState) {

 7         super.onCreate(savedInstanceState);

 8         setContentView(R.layout.tab);

 9         oneIntent = new Intent();

10         oneIntent.setClass(this, testActivity.class);

11         tabHost = (TabHost) this.findViewById(R.id.TabHost01);//获得对象

12         tabHost.setup();//建立对象（与上一行代码必须同时存在）

13         tabHost.setup(this.getLocalActivityManager());//要实现Intent跳转，必须要这句话。

14         try {

15 

16             tabHost.addTab(tabHost

17                     .newTabSpec("tab_1")

18                     .setContent(R.id.LinearLayout1)

19                     .setIndicator("TAB1",

20                             this.getResources().getDrawable(R.drawable.img1)));

21             tabHost.addTab(tabHost

22                     .newTabSpec("tab_2")

23                     .setContent(R.id.LinearLayout2)

24                     .setIndicator("TAB2",

25                             this.getResources().getDrawable(R.drawable.img2)));

26             tabHost.addTab(tabHost.newTabSpec("tab_3")

27                     .setContent(R.id.LinearLayout3).setIndicator("TAB3"));

28             tabHost.addTab(tabHost

29                     .newTabSpec("tab_4")

30                     .setIndicator("TAB4",

31                             this.getResources().getDrawable(R.drawable.img3))

32                     .setContent(oneIntent));

33             tabHost.setCurrentTab(1); // 设置默认的页面

34         } catch (Exception ex) {

35             ex.printStackTrace();

36             Log.d("EXCEPTION", ex.getMessage());

37         }

38     }

39 

40 }

View Code

新建一个用于Intent跳转的Activity：

 1 public class testActivity extends Activity {

 2 

 3     @Override

 4     protected void onCreate(Bundle savedInstanceState) {

 5         // TODO Auto-generated method stub

 6         super.onCreate(savedInstanceState);

 7         setContentView(R.layout.main);

 8         TextView tv=(TextView) findViewById(R.id.TV);

 9         tv.setText("已经跳转了");

10     }

11 

12 }

View Code

接下来运行即可。

这样，用两个例子分别实现了两种不同的实现方式。