AndroidUI组件之Tabhost

1. package com.gc.tabhost; 
2. /**
3. * @author Android将军
4. *
5. *
6. *
7. * 1、TabHost是一种非常实用的组件，TabHost可以很方便地在窗口上放置
8. * 多个标签页，每个标签页相当于获得了一个与外部容器相同大小的组件
9. * 摆放区域。通过这种方式，就可以在一个容器里放置更多组件。
10. * 2、与TabHost结合使用的还有如下组件：
11. * TabWidget:代表选项卡的标签条。
12. * TabSpec：代表选项卡的一个Tab页面。
13. * 3、TabHost仅仅是一个简单的容器，它提供了如下两个方法来创建、添加
14. * 选项卡：
15. * newTabSpec(String tag):创建选项卡。
16. * addTab(TabHost.TabSpec tabSpec)：添加选项卡。
17. * 4、使用TabHost的一般步骤如下：
18. * （1）在界面布局中定义TabHost组件，并为该组件定义该选项卡的内容
19. * （2）Activity应该继承TabActivity
20. * （3）调用TabActivity的getTabHost()方法获取TabHost对象
21. * （4）通过TabHost对象的方法来创建、添加选项卡。
22. * 5、TabHost容器内部需要组合两个组件：TabWidget和FrameLayout
23. * ，其中TabWidget定义选项卡的标题条：FrameLayout则用于“层叠”组合多个选项
24. * 页面。
25. * 6、注意：
26. * 在ID的书写时不时开发者自己书写，TabHost、TabWidget和FrameLayout
27. * 这三个组件的ID是有要求的：
28. * TabHost的ID应该为@android:id/tabhost
29. * TabWidget的ID应该为@android:id/tabs
30. * FrameLayout的ID应该为@android:id/tabcontent.
31. * 这三个ID不是我们自己定义的，而是引用了Android系统已有的ID。
32. * 7、最新版本的Android平台已经不再推荐使用TabActivity，而是推荐使用
33. * Fragment来代替TabActivity。
34. */ 
35. import android.os.Bundle; 
36. import android.app.Activity; 
37. import android.app.TabActivity; 
38. import android.view.Menu; 
39. import android.widget.TabHost; 
40. import android.widget.TabHost.TabSpec; 
41.  
42. public class MainActivity extends TabActivity { 
43.  
44.     @Override 
45.     protected void onCreate(Bundle savedInstanceState) { 
46.         super.onCreate(savedInstanceState); 
47.         setContentView(R.layout.activity_main); 
48.         //获取该Activity里面的TabHost组件 
49.         TabHost tabHost=getTabHost(); 
50.         //创建第一个Tab页 
51.         TabSpec tab1=tabHost.newTabSpec("tab1") 
52.                 .setIndicator("Android将军1") 
53.                 .setContent(R.id.tab01); 
54.         //添加第一个标签页 
55.         tabHost.addTab(tab1); 
56.         TabSpec tab2=tabHost.newTabSpec("tab2") 
57.                 .setIndicator("Android将军2",getResources().getDrawable(R.drawable.ic_launcher)) 
58.                 .setContent(R.id.tab02); 
59.         //添加第二个标签页 
60.         tabHost.addTab(tab2); 
61.         TabSpec tab3=tabHost.newTabSpec("tab3").setIndicator("Android将军3") 
62.                 .setContent(R.id.tab03); 
63.         //添加第三个标签页 
64.         tabHost.addTab(tab3); 
65.          
66.                  
67.     } 
68.  
69.      
70.  
71. } 

package com.gc.tabhost;
/**
 * @author Android将军
 * 
 * 
 * 
 * 1、TabHost是一种非常实用的组件，TabHost可以很方便地在窗口上放置
 * 多个标签页，每个标签页相当于获得了一个与外部容器相同大小的组件
 * 摆放区域。通过这种方式，就可以在一个容器里放置更多组件。
 * 2、与TabHost结合使用的还有如下组件：
 * TabWidget:代表选项卡的标签条。
 * TabSpec：代表选项卡的一个Tab页面。
 * 3、TabHost仅仅是一个简单的容器，它提供了如下两个方法来创建、添加
 * 选项卡：
 * newTabSpec(String tag):创建选项卡。
 * addTab(TabHost.TabSpec tabSpec)：添加选项卡。
 * 4、使用TabHost的一般步骤如下：
 * （1）在界面布局中定义TabHost组件，并为该组件定义该选项卡的内容
 * （2）Activity应该继承TabActivity
 * （3）调用TabActivity的getTabHost()方法获取TabHost对象
 * （4）通过TabHost对象的方法来创建、添加选项卡。
 * 5、TabHost容器内部需要组合两个组件：TabWidget和FrameLayout
 * ，其中TabWidget定义选项卡的标题条：FrameLayout则用于“层叠”组合多个选项
 * 页面。
 * 6、注意：
 * 在ID的书写时不时开发者自己书写，TabHost、TabWidget和FrameLayout
 * 这三个组件的ID是有要求的：
 * TabHost的ID应该为@android:id/tabhost
 * TabWidget的ID应该为@android:id/tabs
 * FrameLayout的ID应该为@android:id/tabcontent.
 * 这三个ID不是我们自己定义的，而是引用了Android系统已有的ID。
 * 7、最新版本的Android平台已经不再推荐使用TabActivity，而是推荐使用
 * Fragment来代替TabActivity。
 */
import android.os.Bundle;
import android.app.Activity;
import android.app.TabActivity;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//获取该Activity里面的TabHost组件
		TabHost tabHost=getTabHost();
		//创建第一个Tab页
		TabSpec tab1=tabHost.newTabSpec("tab1")
				.setIndicator("Android将军1")
				.setContent(R.id.tab01);
		//添加第一个标签页
		tabHost.addTab(tab1);
		TabSpec tab2=tabHost.newTabSpec("tab2")
				.setIndicator("Android将军2",getResources().getDrawable(R.drawable.ic_launcher))
				.setContent(R.id.tab02);
		//添加第二个标签页
		tabHost.addTab(tab2);
		TabSpec tab3=tabHost.newTabSpec("tab3").setIndicator("Android将军3")
				.setContent(R.id.tab03);
		//添加第三个标签页
		tabHost.addTab(tab3);
		
				
	}

	

}

相应的xml布局文件为：

[html] view plain copy print ?

1. <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
2.     android:id="@android:id/tabhost" 
3.     android:layout_width="match_parent" 
4.     android:layout_height="match_parent" 
5.      
6.   > 
7.   <RelativeLayout  
8.       android:layout_width="fill_parent" 
9.       android:layout_height="fill_parent" 
10.       > 
11.        
12.   </RelativeLayout> 
13.   <LinearLayout  
14.       android:layout_width="match_parent" 
15.       android:layout_height="match_parent" 
16.       android:orientation="vertical" 
17.       > 
18.     <RelativeLayout  
19.         android:layout_width="fill_parent" 
20.         android:layout_height="fill_parent" 
21.          
22.         > 
23.          <FrameLayout  
24.           android:id="@android:id/tabcontent" 
25.           android:layout_width="match_parent" 
26.           android:layout_height="match_parent" 
27.           > 
28.           <!-- 定义第一个标签页的内容 --> 
29.           <LinearLayout  
30.               android:id="@+id/tab01" 
31.               android:orientation="vertical" 
32.               android:layout_width="fill_parent" 
33.               android:layout_height="fill_parent" 
34.               > 
35.               <TextView  
36.                   android:layout_width="fill_parent" 
37.                   android:layout_height="wrap_content" 
38.                   android:text="Android将军" 
39.                   /> 
40.               <TextView  
41.                   android:layout_width="fill_parent" 
42.                   android:layout_height="wrap_content" 
43.                   android:text="赳赳老秦，共赴国难，秦朝将军" 
44.                   /> 
45.           </LinearLayout> 
46.             <!-- 定义第二个标签页的内容 --> 
47.           <LinearLayout  
48.               android:id="@+id/tab02" 
49.               android:orientation="vertical" 
50.               android:layout_width="fill_parent" 
51.               android:layout_height="fill_parent" 
52.               > 
53.               <TextView  
54.                   android:layout_width="fill_parent" 
55.                   android:layout_height="wrap_content" 
56.                   android:text="Android将军2" 
57.                   /> 
58.               <TextView  
59.                   android:layout_width="fill_parent" 
60.                   android:layout_height="wrap_content" 
61.                   android:text="赳赳老秦，共赴国难，秦朝将军2" 
62.                   /> 
63.           </LinearLayout> 
64.             <!-- 定义第三个标签页的内容 --> 
65.           <LinearLayout  
66.               android:id="@+id/tab03" 
67.               android:orientation="vertical" 
68.               android:layout_width="fill_parent" 
69.               android:layout_height="fill_parent" 
70.               > 
71.               <TextView  
72.                   android:layout_width="fill_parent" 
73.                   android:layout_height="wrap_content" 
74.                   android:text="Android将军3" 
75.                   /> 
76.               <TextView  
77.                   android:layout_width="fill_parent" 
78.                   android:layout_height="wrap_content" 
79.                   android:text="赳赳老秦，共赴国难，秦朝将军3" 
80.                   /> 
81.           </LinearLayout> 
82.       </FrameLayout> 
83.        
84.         <TabWidget  
85.           android:id="@android:id/tabs" 
86.           android:layout_width="match_parent" 
87.           android:layout_height="wrap_content" 
88.           android:layout_alignParentBottom="true" 
89.           /> 
90.     </RelativeLayout> 
91.       
92.   </LinearLayout> 
93.  
94.  
95. </TabHost> 

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    
  >
  <RelativeLayout 
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      >
      
  </RelativeLayout>
  <LinearLayout 
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      >
    <RelativeLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        
        >
         <FrameLayout 
          android:id="@android:id/tabcontent"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          >
          <!-- 定义第一个标签页的内容 -->
          <LinearLayout 
              android:id="@+id/tab01"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              >
              <TextView 
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Android将军"
                  />
              <TextView 
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="赳赳老秦，共赴国难，秦朝将军"
                  />
          </LinearLayout>
            <!-- 定义第二个标签页的内容 -->
          <LinearLayout 
              android:id="@+id/tab02"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              >
              <TextView 
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Android将军2"
                  />
              <TextView 
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="赳赳老秦，共赴国难，秦朝将军2"
                  />
          </LinearLayout>
            <!-- 定义第三个标签页的内容 -->
          <LinearLayout 
              android:id="@+id/tab03"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              >
              <TextView 
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Android将军3"
                  />
              <TextView 
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="赳赳老秦，共赴国难，秦朝将军3"
                  />
          </LinearLayout>
      </FrameLayout>
      
        <TabWidget 
          android:id="@android:id/tabs"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          />
    </RelativeLayout>
     
  </LinearLayout>


</TabHost>

程序运行效果图为：