android tabhost --android UI 学习

转自：http://choha.iteye.com/blog/1139320

  实现TabHost有三种方式：继承自TabActivity，ActivityGroup和自定义的Activity 

1.使用TabAcitvity 

    TabActivity他自己包含一个Tabhost,我们通过getTabhost(),也不需要调用setContentView()设置layout。如果设置一定要按照android SDK的规定进行设置。SDK规定的是：TabHost，TabWidget，FrameLayout的id必须为@android:id/tabhost，@android:id/tabs 
，@android:id/tabcontent； 
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_height="match_parent" 
android:layout_width="fill_parent" android:background="@drawable/inde_bg"> 
<LinearLayout android:orientation="vertical" android:id="@+id/layout1" 
android:layout_width="fill_parent" android:layout_height="fill_parent"> 

<TabWidget android:id="@android:id/tabs" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content"> 
</TabWidget> 
<FrameLayout android:id="@android:id/tabcontent" 
android:layout_width="wrap_content" android:layout_height="wrap_content"> 
</FrameLayout> 
</LinearLayout> 

</TabHost> 
否则会报什么需要设置相应的id。 
实现代码如下（需要的图片包括在zip文件中）： 

Java代码  

1.         public class IndexActicity extends TabActivity  {  
2. private int index_tab = 0;  
3. private TabWidget tabWidget;  
4.   
5. @Override  
6. protected void onCreate(Bundle savedInstanceState) {  
7.   
8.     super.onCreate(savedInstanceState);  
9.     DisplayMetrics dm = new DisplayMetrics();  
10.     getWindowManager().getDefaultDisplay().getMetrics(dm);  
11.     Constant.WIDTH = dm.widthPixels;  
12.     Constant.HEIGHT= dm.heightPixels;  
13.     TabHost t =getTabHost();  
14.     t.setBackgroundDrawable(getResources().getDrawable(R.drawable.inde_bg));  
15.     t.setPadding(0, 0, 0, 0);  
16.     tabWidget = t.getTabWidget();  
17.   
18.     LayoutInflater fi = LayoutInflater.from(IndexActicity.this);  
19.   
20.     View view = fi.inflate(R.layout.tab_layout, null);  
21.     LinearLayout ll = (LinearLayout) view.findViewById(R.id.tablayout);  
22.     View tab1 = view.findViewById(R.id.tab1);  
23.     View tab2 = view.findViewById(R.id.tab2);  
24.     View tab3 = view.findViewById(R.id.tab3);  
25.     View tab4 = view.findViewById(R.id.tab4);  
26.     ll.removeAllViews();  
27.     t.addTab(t.newTabSpec("1").setIndicator(tab1  
28.                     ).setContent(  
29.                             new Intent(IndexActicity.this,  
30.                                     TabActivity1.class)));  
31.     t.addTab(t.newTabSpec("2").setIndicator(tab2  
32.                     ).setContent(  
33.                             new Intent(IndexActicity.this,  
34.                                     TabActivity2.class)));  
35.     t.addTab(t.newTabSpec("3").setIndicator(tab3  
36.                     ).setContent(  
37.                             new Intent(IndexActicity.this,  
38.                                     TabActivity3.class)));  
39.     t.addTab(t.newTabSpec("4").setIndicator(tab4).setContent(  
40.             new Intent(IndexActicity.this, TabActivity4.class)));  
41.     tabWidget.setBackgroundColor(getResources().getColor(R.color.alpha_00));  
42.     tabWidget.setBaselineAligned(true);  
43.     tab1.setBackgroundDrawable(getResources().getDrawable(  
44.             R.drawable.menu_bg));  
45.     for (int i = 0; i < tabWidget.getChildCount(); i++) {  
46.         tabWidget.getChildAt(i).getLayoutParams().width = Constant.WIDTH / 4;  
47.         tabWidget.getChildAt(i).getLayoutParams().height=50;  
48.     }  
49.     t.setOnTabChangedListener(new OnTabChangeListener() {  
50.   
51.         @Override  
52.         public void onTabChanged(String tabId) {  
53.             tabChanged(tabId);  
54.         }  
55.     });  
56.   
57. }  
58. /捕获tab变化事件  
59. public void tabChanged(String tabId) {  
60.     if (index_tab != (Integer.valueOf(tabId) - 1)) {  
61.         tabWidget.getChildAt(Integer.valueOf(tabId) - 1)  
62.                 .setBackgroundDrawable(  
63.                         getResources().getDrawable(R.drawable.menu_bg));  
64.         tabWidget.getChildAt(index_tab).setBackgroundDrawable(null);  
65.   
66.         index_tab = Integer.valueOf(tabId) - 1;  
67.     }  
68. }  

运行结构如图1 
[img] 
 
[/img] 

备注：我在继承TabActivity的时候，将TabWidget的android:layout_height设置为"fill_parent"时，结构出现的图为
[img] 
 
[/img] 

2.使用GroupActivity和自定义 
     
   使用GroupActivity和自己定义的Activity的区别不大，主要区别是：GroupActivity主要为了实现每个Tab可以包含不同的Activity，而自己定义的Activity却不能实现，只能显示一些View。所以如果你需要在不同的tab中显示Activity时，则需要继承GroupActivity，或者TabActivity。 
     
        用这两种方法实现需要调用setContentView()设置layout，layout中包括这个tabhost，tabwidget及Fremelayout。而且一定要对tabhost调用setup方法，否则会出现空指针异常，原因是setup方法初始化tabwidget和framelayout对象。 
        这个时候的layout如下： 
        

Java代码  

1. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"   
2. android:id="@+id/testhost" android:layout_height="match_parent"  
3.     android:layout_width="fill_parent" android:background="@drawable/inde_bg">  
4.     <LinearLayout android:orientation="vertical" android:id="@+id/layout1"  
5.         android:layout_width="fill_parent" android:layout_height="fill_parent">  
6.         <TabWidget android:id="@android:id/tabs"  
7.              android:layout_width="fill_parent"  
8.             android:layout_height="wrap_content">  
9.         </TabWidget>  
10.         <FrameLayout android:id="@android:id/tabcontent"  
11.             android:layout_width="wrap_content" android:layout_height="wrap_content">  
12.         </FrameLayout>  
13.     </LinearLayout>  
14.   
15. </TabHost>  

类如下 
  

Java代码  

1. public class IndexActicity extends ActivityGroup  {  
2.     private int index_tab = 0;  
3.     private TabWidget tabWidget;  
4.   
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.   
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.index_layout);  
10.         DisplayMetrics dm = new DisplayMetrics();  
11.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
12.         Constant.WIDTH = dm.widthPixels;  
13.         Constant.HEIGHT= dm.heightPixels;  
14.         //TabHost t =getTabHost();  
15.         TabHost t = (TabHost)findViewById(R.id.testhost);  
16.         t.setBackgroundDrawable(getResources().getDrawable(R.drawable.inde_bg));  
17.         t.setup(this.getLocalActivityManager());  
18.         t.setPadding(0, 0, 0, 0);  
19.         tabWidget = t.getTabWidget();  
20.   
21.         LayoutInflater fi = LayoutInflater.from(IndexActicity.this);  
22.   
23.         View view = fi.inflate(R.layout.tab_layout, null);  
24.         LinearLayout ll = (LinearLayout) view.findViewById(R.id.tablayout);  
25.         View tab1 = view.findViewById(R.id.tab1);  
26.         View tab2 = view.findViewById(R.id.tab2);  
27.         View tab3 = view.findViewById(R.id.tab3);  
28.         View tab4 = view.findViewById(R.id.tab4);  
29.         ll.removeAllViews();  
30.         t.addTab(t.newTabSpec("1").setIndicator(tab1  
31.                         ).setContent(  
32.                                 new Intent(IndexActicity.this,  
33.                                         TabActivity1.class)));  
34.         t.addTab(t.newTabSpec("2").setIndicator(tab2  
35.                         ).setContent(  
36.                                 new Intent(IndexActicity.this,  
37.                                         TabActivity2.class)));  
38.         t.addTab(t.newTabSpec("3").setIndicator(tab3  
39.                         ).setContent(  
40.                                 new Intent(IndexActicity.this,  
41.                                         TabActivity3.class)));  
42.         t.addTab(t.newTabSpec("4").setIndicator(tab4).setContent(  
43.                 new Intent(IndexActicity.this, TabActivity4.class)));  
44.         tabWidget.setBackgroundColor(getResources().getColor(R.color.alpha_00));  
45.         tabWidget.setBaselineAligned(true);  
46.         tab1.setBackgroundDrawable(getResources().getDrawable(  
47.                 R.drawable.menu_bg));  
48.         for (int i = 0; i < tabWidget.getChildCount(); i++) {  
49.             tabWidget.getChildAt(i).getLayoutParams().width = Constant.WIDTH / 4;  
50.             tabWidget.getChildAt(i).getLayoutParams().height=50;  
51.         }  
52.         t.setOnTabChangedListener(new OnTabChangeListener() {  
53.   
54.             @Override  
55.             public void onTabChanged(String tabId) {  
56.                 tabChanged(tabId);  
57.             }  
58.         });  
59.   
60.     }  
61. //捕获tab变化事件  
62.     public void tabChanged(String tabId) {  
63.         if (index_tab != (Integer.valueOf(tabId) - 1)) {  
64.             tabWidget.getChildAt(Integer.valueOf(tabId) - 1)  
65.                     .setBackgroundDrawable(  
66.                             getResources().getDrawable(R.drawable.menu_bg));  
67.             tabWidget.getChildAt(index_tab).setBackgroundDrawable(null);  
68.   
69.             index_tab = Integer.valueOf(tabId) - 1;  
70.         }  
71.     }  

细心的人可能看到，这个layout中的tabhost 的属性id不是android默认的tabhost了，这个时候，就需要在activity中使用findViewById（R.id.XXXX）；当然你也可以使用android的默认id，在类中直接使用：TabHost t = (TabHost)findViewById(android.R.id.tabhost);但是如果你修改了tabhost的属性id，而在调用的时候又使用默认的id，则会报找不到android.R.id.tabhost标签。 

   如果修改了tabwidget和framelayout的id，系统会报需要相应的标签，这个是在setup方法调用的默认id。因为他只会在当前的layout中找android.R.id.tabs和android.R.id.tabcontent。 

   如果想让tab显示在下边，只需要将tabwidget和framelayout调换位置即可。 

    试着修改了一下tabwidget和framelayout的属性id值，但是没有找到解决办法，哪位大牛如果知道，可以告诉一下，