Android入門教程(二十二)——之TabHost,TabWidget)

本文來自http://blog.csdn.net/hellogv/ ，引用必須註明出處！

       這回要介紹的是Android的Tab控制項，Tab控制項可以達到分頁的效果，讓一個螢幕的內容盡量豐富，當然也會增加開發的複雜程度，在有必要的時候再使用。Android的Tab控制項使用起來有點奇怪，必須包含和按照以下的順序：

TabHost控制項->TabWidget(必須命名為tabs)->FrameLayout(必須命名為tabcontent)。

 

接下來貼出本例啟動並執行：

 

main.xml的源碼：

 

view plain copy to clipboard print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TabHost android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/TabHost1">  
4.     <TabWidget android:id="@android:id/tabs"  
5.         android:layout_height="wrap_content" android:layout_width="fill_parent">  
6. </TabWidget>  
7.     <FrameLayout android:id="@android:id/tabcontent"  
8.         android:paddingTop="65px" android:layout_width="fill_parent" android:layout_height="fill_parent">  
9.         <LinearLayout android:layout_height="wrap_content" android:id="@+id/Tab1" android:orientation="vertical" android:layout_width="fill_parent">  
10.            <EditText android:layout_height="wrap_content" android:id="@+id/edtTab1" android:layout_width="fill_parent"></EditText>  
11.            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnTab1" android:text="Tab1"></Button>  
12.         </LinearLayout>  
13.         <LinearLayout android:layout_height="wrap_content" android:id="@+id/Tab2" android:layout_width="fill_parent" android:orientation="horizontal">  
14.            <EditText android:layout_height="wrap_content" android:id="@+id/edtTab2" android:layout_width="wrap_content" android:layout_weight="300"></EditText>  
15.            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnTab2" android:text="Tab2"></Button></LinearLayout>  
16.     </FrameLayout>  
17. </TabHost>  

<?xml version="1.0" encoding="utf-8"?><br /><TabHost android:layout_width="fill_parent"<br /> android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/TabHost1"><br /> <TabWidget android:id="@android:id/tabs"<br /> android:layout_height="wrap_content" android:layout_width="fill_parent"><br /></TabWidget><br /> <FrameLayout android:id="@android:id/tabcontent"<br /> android:paddingTop="65px" android:layout_width="fill_parent" android:layout_height="fill_parent"><br /> <LinearLayout android:layout_height="wrap_content" android:id="@+id/Tab1" android:orientation="vertical" android:layout_width="fill_parent"><br /> <EditText android:layout_height="wrap_content" android:id="@+id/edtTab1" android:layout_width="fill_parent"></EditText><br /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnTab1" android:text="Tab1"></Button><br /> </LinearLayout><br /> <LinearLayout android:layout_height="wrap_content" android:id="@+id/Tab2" android:layout_width="fill_parent" android:orientation="horizontal"><br /> <EditText android:layout_height="wrap_content" android:id="@+id/edtTab2" android:layout_width="wrap_content" android:layout_weight="300"></EditText><br /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnTab2" android:text="Tab2"></Button></LinearLayout><br /> </FrameLayout><br /></TabHost>

 

 

程式源碼:

view plain copy to clipboard print ?

1. package com.testTab;  
2. import android.app.TabActivity;  
3. import android.os.Bundle;  
4. import android.view.View;  
5. import android.widget.Button;  
6. import android.widget.EditText;  
7. import android.widget.TabHost;  
8. import android.widget.TabHost.TabSpec;  
9. public class testTab extends TabActivity {//基於TabActivity構建   
10.       
11.     Button btnTab1,btnTab2;  
12.     EditText edtTab1,edtTab2;  
13.     /** Called when the activity is first created. */  
14.     @Override  
15.     public void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.main);  
18.           
19.         TabHost tabs = getTabHost();  
20.         //設定Tab1   
21.         TabSpec tab1 = tabs.newTabSpec("tab1");  
22.         tab1.setIndicator("tab1");      // 設定tab1的名稱   
23.         tab1.setContent(R.id.Tab1);    // 關聯控制項   
24.         tabs.addTab(tab1);                // 添加tab1   
25.           
26.         btnTab1=(Button)this.findViewById(R.id.btnTab1);  
27.         edtTab1=(EditText)this.findViewById(R.id.edtTab1);  
28.         btnTab1.setOnClickListener(new ClickEvent());  
29.           
30.         //設定Tab2   
31.         TabSpec tab2 = tabs.newTabSpec("tab2");  
32.         tab2.setIndicator("tab2");        
33.         tab2.setContent(R.id.Tab2);      
34.         tabs.addTab(tab2);                  
35.           
36.         btnTab2=(Button)this.findViewById(R.id.btnTab2);  
37.         edtTab2=(EditText)this.findViewById(R.id.edtTab2);  
38.         btnTab2.setOnClickListener(new ClickEvent());  
39.           
40.         tabs.setCurrentTab(0);  
41.     }  
42.       
43.     class ClickEvent implements View.OnClickListener {  
44.         @Override  
45.         public void onClick(View v) {  
46.             if(v==btnTab1)  
47.             {  
48.                 edtTab1.setText("tab1");  
49.             }  
50.             else if(v==btnTab2)  
51.             {  
52.                 edtTab2.setText("tab2");  
53.             }  
54.         }  
55.       
56.     }  
57. }