Android應用開發基礎篇（4）-----TabHost（選項卡）

標籤：

連結地址：http://www.cnblogs.com/lknlfy/archive/2012/02/18/2357093.html

一、概述

       TabHost是一種用來顯示標籤的組件，不清楚？看一下來電通這個應用就知道了。這個組件用起來與其他組件不太一樣，它需要繼承TabActivity這個類，還有它的布局檔案與我們平時用的也有些不一樣。

二、要求

       實現一個具有三個標籤的選項卡，每個標籤使用不同的布局作為內容，當切換不同的標籤時向使用者發出提示。

三、實現

     聲明：這個應用需要用到前面一篇(基礎篇（3）的相關內容)。

     建立工程MyUI（這個名字隨便取），修改/res/layout/main.xml檔案，添加3個LinearLayout作為3個標籤的布局。

完整的main.xml檔案如下，注意第2行不再是使用LinearLayout，而是使用TabHost。

 

 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="fill_parent"
 5     android:layout_height="fill_parent">
 6 
 7     <LinearLayout
 8         android:id="@+id/tab1"
 9         android:orientation="vertical"
10         android:layout_width="fill_parent"
11         android:layout_height="fill_parent">
12 
13         <ListView
14             android:id="@+id/list1"
15             android:layout_width="fill_parent"
16             android:layout_height="wrap_content"
17             >
18 
19         </ListView>
20     </LinearLayout>
21 
22     <LinearLayout
23         android:orientation="vertical"
24         android:layout_width="fill_parent"
25         android:layout_height="fill_parent"
26         >
27 
28     </LinearLayout>
29 
30     <LinearLayout
31         android:id="@+id/tab2"
32         android:orientation="vertical"
33         android:layout_width="fill_parent"
34         android:layout_height="fill_parent">
35 
36         <TextView
37             android:id="@+id/other"
38             android:layout_width="fill_parent"
39             android:layout_height="wrap_content"
40             android:text="這是一個選項卡應用"
41             android:textSize="20px"
42             android:textColor="#FF0000"
43             android:gravity="center_horizontal"
44             />
45 
46     </LinearLayout>
47 
48 </TabHost>

接著建立一個Adapter1.java檔案，編寫一個繼承BaseAdapter的Adapter1類，比較簡單，可以參看基礎篇（3）的相關內容，完整的Adapter1.java檔案如下：

 

 1 package com.nan.ui;
 2 
 3 import android.content.Context;
 4 import android.graphics.Color;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 import android.widget.BaseAdapter;
 9 import android.widget.TextView;
10 
11 
12 public class Adapter1 extends BaseAdapter
13 {
14     private Context mContext;
15     private int num;
16 
17     Adapter1(Context c , int n)
18     {
19         mContext = c;
20         num = n;
21     }
22 
23     @Override
24     public int getCount()
25     {
26         // TODO Auto-generated method stub
27         return num;
28     }
29 
30     @Override
31     public Object getItem(int arg0)
32     {
33         // TODO Auto-generated method stub
34         return arg0;
35     }
36 
37     @Override
38     public long getItemId(int arg0)
39     {
40         // TODO Auto-generated method stub
41         return arg0;
42     }
43 
44     @Override
45     public View getView(int arg0, View arg1, ViewGroup arg2)
46     {
47         // TODO Auto-generated method stub
48 
49         arg1 = LayoutInflater.from(mContext).inflate(R.layout.tab1, null);
50         TextView t1 = (TextView)arg1.findViewById(R.id.name);
51         t1.setText("李小明");
52         t1.setTextColor(Color.BLUE);
53         TextView t2 = (TextView)arg1.findViewById(R.id.num);
54         t2.setText("13709394939");
55 
56         return arg1;
57     }
58 
59 }

我們看到上面的第49行代碼中使用了tab1.xml布局檔案，因此建立一個tab1.xml檔案，在裡面添加2個TextView，如下：

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 
 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     android:orientation="vertical"
 7 >
 8 
 9     <TextView
10         android:id="@+id/name"
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         />
14 
15     <TextView
16         android:id="@+id/num"
17         android:layout_width="wrap_content"
18         android:layout_height="wrap_content"
19         />
20 
21 </LinearLayout>

繼續建立一個Activity1.java檔案，裡面的內容就是我們平時用到的最基本的東西，不解析，內容如下：

 

 1 package com.nan.ui;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 
 6 
 7 public class Activity1 extends Activity
 8 {
 9 
10     /** Called when the activity is first created. */
11     @Override
12     public void onCreate(Bundle savedInstanceState)
13     {
14         super.onCreate(savedInstanceState);
15         setContentView(R.layout.activity1);
16 
17     }
18 
19 }

為上面這個檔案建立一個名為activity1.xml布局檔案，裡面就只有1個TextView，如下：

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 
 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     android:orientation="vertical"
 7 >
 8 
 9     <TextView
10         android:id="@+id/mtextview"
11         android:layout_width="fill_parent"
12         android:layout_height="wrap_content"
13         android:text="這是一個Activity"
14         android:textSize="20px"
15         android:gravity="center_horizontal"
16         android:textColor="#0000FF"
17         />
18 
19 </LinearLayout>

還沒完，最後就是這篇文章的重頭戲了----MyUIActivity.java檔案。該檔案裡面的MyUIActivity類繼承TabActivity類，

首先執行個體化TabHost對象，接著使用main.xml作為布局檔案，為3個標籤設定要顯示的內容，最後是設定標籤切換動作的監聽，用DisplayToast()函數來顯示當前切換到的是第幾個標籤。有詳細注釋，請看如下完整的代碼：

 

 1 package com.nan.ui;
 2 
 3 
 4 import android.app.TabActivity;
 5 import android.content.Intent;
 6 import android.os.Bundle;
 7 import android.view.LayoutInflater;
 8 import android.widget.ListView;
 9 import android.widget.TabHost;
10 import android.widget.Toast;
11 import android.widget.TabHost.OnTabChangeListener;
12 
13 
14 public class MyUIActivity extends TabActivity
15 {
16     //聲明TabHost對象
17     private TabHost mTabHost;
18 
19     private Adapter1 ad1;
20     private ListView ListView1;
21     private Intent mIntent;
22 
23     /** Called when the activity is first created. */
24     @Override
25     public void onCreate(Bundle savedInstanceState)
26     {
27         super.onCreate(savedInstanceState);
28         //setContentView(R.layout.main);
29 
30         //設定ListView中顯示4行內容
31         ad1 = new Adapter1(MyUIActivity.this,4);
32 
33         mIntent = new Intent();
34         //設定要啟動的Activity
35         mIntent.setClass(MyUIActivity.this, Activity1.class);
36 
37         //取得TabHost對象
38         mTabHost = getTabHost();
39         //使用TabHost布局
40         LayoutInflater.from(this).inflate(R.layout.main, mTabHost.getTabContentView(), true);
41         //設定第一個標籤的內容（使用ListView作為內容）
42         mTabHost.addTab(mTabHost.newTabSpec("1").setIndicator("列表", null).setContent(R.id.tab1));
43         //設定第二個標籤的內容（使用Activity作為內容）
44         mTabHost.addTab(mTabHost.newTabSpec("2").setIndicator("頁面", null).setContent(mIntent));
45         //設定第三個標籤的內容（使用簡單的線性布局作為內容）
46         mTabHost.addTab(mTabHost.newTabSpec("3").setIndicator("其他", null).setContent(R.id.tab2));
47 
48         ListView1 = (ListView)mTabHost.findViewById(R.id.list1);
49         //設定ListView要顯示的內容
50         ListView1.setAdapter(ad1);
51 
52         //標籤切換事件處理
53         mTabHost.setOnTabChangedListener(new OnTabChangeListener()
54         {
55             // TODO Auto-generated method stub
56             @Override
57             public void onTabChanged(String tabId)
58             {
59                 //自己添加處理事件
60                 if(tabId=="1")
61                 {
62                     DisplayToast("Tab1");
63                 }
64                 else if(tabId=="2")
65                 {
66                     DisplayToast("Tab2");
67                 }
68                 else
69                 {
70                     DisplayToast("Tab3");
71                 }
72             }
73         });
74     }
75 
76     private void DisplayToast(String s)
77     {
78         Toast.makeText(MyUIActivity.this, s, Toast.LENGTH_SHORT).show();
79     }
80 
81 }

最後，在AndroidManifest.xml檔案下聲明多一個activity，如下：

 

1 <activity
2 android:name=".Activity1"
3     >
4 </activity>

好了，運行該程式，一開始的介面如下：

 

切換到第二個選項卡，如下：

 

切換到第三個選項卡，如下：

OK，完成。

 

Android應用開發基礎篇（4）-----TabHost（選項卡）