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

接下来运行即可。

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

posted @ 2014-04-22 15:52  银色的流星  阅读(756)  评论(0编辑  收藏  举报