android之TabWidget选项卡

1 概览

l  TabWidget与TabHost。tab组件一般包括TabHost和TabWidget、FrameLayout，且TabWidget、FrameLayout属于TabHost。

l  是否继承TabActivity的问题

l  实现步骤。两种实现方式，一种是将每个Tab的布局嵌在TabHost中的FrameLayout中，每个Tab的内容布局与显示都在FrameLayout中进行，缺点是布局会显得很臃肿；一种是每个Tab从FrameLayout中独立出来，以Activity呈现，这样使得每个Tab有单独的布局。

2 效果图

Widget在顶部的情形：

3 主要布局

3.1 TabMain布局

方式一：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/tabhost"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical" >  
7.   
8.     <RelativeLayout  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent"  
11.         android:orientation="vertical" >  
12.   
13.         <TabWidget  
14.             android:id="@android:id/tabs"  
15.             android:layout_width="fill_parent"  
16.             android:layout_height="60dip"  
17.             android:layout_alignParentBottom="true"  
18.             android:background="#424242" >  
19.         </TabWidget>  
20.   
21.         <FrameLayout  
22.             android:id="@android:id/tabcontent"  
23.             android:layout_width="fill_parent"  
24.             android:layout_height="fill_parent" >  
25.   
26.             <LinearLayout  
27.                 android:id="@+id/theme"  
28.                 android:layout_width="fill_parent"  
29.                 android:layout_height="fill_parent"  
30.                 android:orientation="vertical" >  
31.   
32.                 <TextView  
33.                     android:id="@+id/theme_title"  
34.                     android:layout_width="wrap_content"  
35.                     android:layout_height="wrap_content"  
36.                     android:text="Tab1" />  
37.             </LinearLayout>  
38.   
39.             <LinearLayout  
40.                 android:id="@+id/wallpaper"  
41.                 android:layout_width="fill_parent"  
42.                 android:layout_height="fill_parent"  
43.                 android:orientation="vertical" >  
44.   
45.                 <TextView  
46.                     android:id="@+id/wallpaper_title"  
47.                     android:layout_width="wrap_content"  
48.                     android:layout_height="wrap_content"  
49.                     android:text="Tab2" />  
50.             </LinearLayout>  
51.   
52.             <LinearLayout  
53.                 android:id="@+id/iconbg"  
54.                 android:layout_width="fill_parent"  
55.                 android:layout_height="fill_parent"  
56.                 android:orientation="vertical" >  
57.   
58.                 <TextView  
59.                     android:id="@+id/iconbg_title"  
60.                     android:layout_width="wrap_content"  
61.                     android:layout_height="wrap_content"  
62.                     android:text="Tab3" />  
63.             </LinearLayout>  
64.   
65.             <LinearLayout  
66.                 android:id="@+id/screenlock"  
67.                 android:layout_width="fill_parent"  
68.                 android:layout_height="fill_parent"  
69.                 android:orientation="vertical" >  
70.   
71.                 <TextView  
72.                     android:id="@+id/screenlock_title"  
73.                     android:layout_width="wrap_content"  
74.                     android:layout_height="wrap_content"  
75.                     android:text="Tab4" />  
76.             </LinearLayout>  
77.   
78.             <LinearLayout  
79.                 android:id="@+id/effect"  
80.                 android:layout_width="fill_parent"  
81.                 android:layout_height="fill_parent"  
82.                 android:orientation="vertical" >  
83.   
84.                 <TextView  
85.                     android:id="@+id/effect_title"  
86.                     android:layout_width="wrap_content"  
87.                     android:layout_height="wrap_content"  
88.                     android:text="Tab5" />  
89.             </LinearLayout>  
90.         </FrameLayout>  
91.     </RelativeLayout>  
92.   
93. </TabHost>  

方式二：

1. <?xml version="1.0" encoding="utf-8"?>  
2.    
3.  <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
4.      android:id="@android:id/tabhost"  
5.      android:layout_width="fill_parent"  
6.      android:layout_height="fill_parent"  
7.      android:background="@color/wcity_normal_bg" >  
8.   
9.     <LinearLayout  
10.          android:layout_width="fill_parent"  
11.          android:layout_height="fill_parent"  
12.          android:orientation="vertical" >  
13.   
14.       
15.     <FrameLayout  
16.          android:id="@android:id/tabcontent"  
17.          android:layout_width="fill_parent"  
18.          android:layout_height="fill_parent"  
19.          android:layout_weight="1" >  
20.     </FrameLayout>  
21.           
22.       
23.     <TabWidget  
24.          android:id="@android:id/tabs"  
25.          android:layout_width="fill_parent"  
26.          android:layout_height="wrap_content"  
27.          android:background="@drawable/tab"   
28.          />  
29.   
30.      </LinearLayout>  
31.   
32. </TabHost>  

3.2 TabItem布局

这一部分中方式一与方式二没有什么区别，只有表示形式的区别。比如，根据需求，Tab可以

只以文字呈现，

可以只以图片呈现，

可以同时有图片和文字

其中有文字和图片的布局如下：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:gravity="center_horizontal|center_vertical"  
6.     android:orientation="vertical" >  
7.   
8.     <LinearLayout  
9.         android:id="@+id/tabItem  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/bg_ispressed"  
13.         android:gravity="center_horizontal|center_vertical"  
14.         android:orientation="vertical" >  
15.   
16.         <ImageView  
17.             android:id="@+id/icon"  
18.             android:layout_width="wrap_content"  
19.             android:layout_height="wrap_content" />  
20.   
21.         <TextView  
22.             android:id="@+id/name"  
23.             android:layout_width="wrap_content"  
24.             android:layout_height="wrap_content" />  
25.     </LinearLayout>  
26.   
27. </LinearLayout>  

3.3点击状态

Tab键点击后状态的问题，如果点击后，没有状态提示对用户是不友好的。点击状态的实现就是对TabItem布局的android:background进行设置。例如：

上述TabItem中LinearLayout的android：background设置的属性：@drawable/bg_ispressed

其中bg_ispressed文件如下：

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:drawable="@drawable/tab_selected_bg" android:state_pressed="false" android:state_selected="true"/>  
5.   
6. </selector>  

tab_selected_bg即是点击后变换的图片效果。

3.4 关于Tab位置的问题

Tab标签显示在顶部还是底部也是经常会遇到的问题。

通常TabMain布局中TabWidget在FrameLayout上面默认就是显示在顶部了，如果改成在底部显示，首先会想到的是直接调换顺序，将TabWidget放在FrameLayout后面。

情形一：

问题来了，Tab栏直接消失掉（我试过），后来解决方法是：FrameLayout中添加属性：android:layout_weight="1"。这种情形可以解决的条件是，TabWidget和FrameLayout被嵌套在LinearLayout布局中，如果是其他则行不通。

情形二：

TabWidget与FrameLayout顺序任意，在TabWidget中添加属性

android:layout_alignParentBottom="true"

当然，这种情形适合TabWidget和FrameLayout被嵌套在RelativeLayout布局中，同样的，如果是其他则行不通。

注：以上两种情形也不是绝对的，只实践过以上两种情形，至于其他布局就不清楚了，具体问题具体分析吧。

4 继承TabActivity?

4.1 继承TabActivity与不继承的问题

继承不继承TabActivity，看自己习惯了，都能正确实现，没什么区别，至于在代码方面唯一的区别在于：

不继承TabActivity而继承Activity的需要在代码中加入：

mTabHost.setup();

4.2 主要代码

直接继承自Activity的代码

1. import java.util.ArrayList;  
2. import java.util.List;  
3.   
4. import android.app.Activity;  
5. import android.content.Context;  
6. import android.os.Bundle;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.widget.ImageView;  
10. import android.widget.LinearLayout;  
11. import android.widget.TabHost;  
12. import android.widget.TextView;  
13.   
14. public class TabDesignActivity extends Activity{  
15.     private Context mContex = this;  
16.     private TabHost mTabHost;  
17.       
18.     private String TAB1 = "tab1";  
19.     private String TAB2 = "tab2";  
20.     private String TAB3 = "tab3";  
21.     private String TAB4 = "tab4";  
22.     private String TAB5 = "tab5";  
23.       
24.     private List<LinearLayout> menuItemList;  
25.       
26.       
27.     @Override  
28.     protected void onCreate(Bundle savedInstanceState) {  
29.         // TODO Auto-generated method stub  
30.         super.onCreate(savedInstanceState);  
31.         setContentView(R.layout.tab_main);  
32.         menuItemList = new ArrayList<LinearLayout>();  
33.           
34.         mTabHost = (TabHost) findViewById(R.id.tabhost);  
35.         mTabHost.setup();  
36.           
37.         mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator(getMenuItem(R.drawable.tab1_ispressed, TAB1)).setContent(R.id.tab1));  
38.         mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator(getMenuItem(R.drawable.tab2_ispressed, TAB2)).setContent(R.id.tab2));  
39.         mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator(getMenuItem(R.drawable.tab3_ispressed, TAB3)).setContent(R.id.tab3));  
40.         mTabHost.addTab(mTabHost.newTabSpec("tab4").setIndicator(getMenuItem(R.drawable.tab4_ispressed, TAB4)).setContent(R.id.tab4));  
41.         mTabHost.addTab(mTabHost.newTabSpec("tab5").setIndicator(getMenuItem(R.drawable.tab5_ispressed, TAB5)).setContent(R.id.tab5));  
42.     }  
43.       
44.     public View getMenuItem(int imgID, String textID){  
45.         LinearLayout ll = (LinearLayout) LayoutInflater.from(mContex).inflate(R.layout.tab_item, null);  
46.         ImageView imgView = (ImageView)ll.findViewById(R.id.icon);  
47.         imgView.setBackgroundResource(imgID);  
48.         TextView textView = (TextView)ll.findViewById(R.id.name);  
49.         textView.setText(textID);  
50.         menuItemList.add(ll);  
51.         return ll;  
52.     }     
53. }  

继承自TabActivity的实现

1. /** 
2.  * @author aaron 
3.  */  
4. package com.aaron.activity;  
5.   
6. import java.util.ArrayList;  
7. import java.util.List;  
8.   
9. import android.annotation.SuppressLint;  
10. import android.app.TabActivity;  
11. import android.content.Context;  
12. import android.content.Intent;  
13. import android.os.Bundle;  
14. import android.view.LayoutInflater;  
15. import android.widget.ImageView;  
16. import android.widget.LinearLayout;  
17. import android.widget.TabHost;  
18. import android.widget.TextView;  
19. import android.widget.TabHost.TabSpec;  
20.   
21. import com.aaron.util.R;  
22.   
23. /** 
24.  * @author aaron 
25.  *  
26.  */  
27. public class TabWidget extends TabActivity {// 声明TabHost对象  
28.     private TabHost mTabhost;  
29.     private LayoutInflater mInflater;  
30.     private List<TextView> mtext;  
31.     private List<ImageView> mimage;  
32.     private List<TabSpec> mTabSpec;  
33.     private List<LinearLayout> linearLayout;  
34.     private List<Intent> intent;  
35.     private Context mContext;  
36.     private static final String[] tabTitle = { "Tab1", "Tab2", "Tab3", "Tab4","Tab5"};  
37.     private static final int[] tabImage = { R.drawable.main1  
38.         , R.drawable.main2, R.drawable.main3, R.drawable.main4,R.drawable.main5};  
39.   
40.     /** Called when the activity is first created. */  
41.     @Override  
42.     public void onCreate(Bundle savedInstanceState) {  
43.         super.onCreate(savedInstanceState);  
44.         setContentView(R.layout.tab_main);  
45.         mContext = this;  
46.         mInflater = LayoutInflater.from(this);  
47.         mTabhost = (TabHost) findViewById(android.R.id.tabhost);  
48.         mTabSpec = new ArrayList<TabSpec>();  
49.         linearLayout = new ArrayList<LinearLayout>();  
50.         mtext = new ArrayList<TextView>();  
51.         intent = new ArrayList<Intent>();  
52.           
53.         //****************************************************************  
54.         //若是引用有图片的布局  
55.         mimage = new ArrayList<ImageView>();  
56.         //****************************************************************  
57.           
58.         creatTab();  
59.   
60.     }  
61.   
62.     @SuppressLint("NewApi")  
63.     public void creatTab() {  
64.         for (int i = 0; i < tabTitle.length; i++) {  
65.             mTabSpec.add(mTabhost.newTabSpec(tabTitle[i]));  
66.               
67.             //****************************************************************  
68.             //选择使用哪种布局  
69.             //****************************************************************  
70.             linearLayout.add((LinearLayout) mInflater.inflate(  
71.                     R.layout.tabwidget2, null));  
72.               
73.             mtext.add((TextView) linearLayout.get(i)  
74.                     .findViewById(R.id.tab_Text_name));  
75.             mtext.get(i).setText(tabTitle[i]);  
76.               
77.             //****************************************************************  
78.             //若是引用有图片的布局依次添加进图片  
79.             mimage.add((ImageView) linearLayout.get(i)  
80.                     .findViewById(R.id.tab_Image_name));  
81.             mimage.get(i).setImageResource(tabImage[i]);  
82.             //****************************************************************  
83.   
84.             // 依次加入每个Tab的Activity  
85.             switch (i) {  
86.             case 0:  
87.                 intent.add(new Intent().setClass(TabWidget.this,  
88.                         UdoActivity.class));  
89.                 break;  
90.             case 1:  
91.                 intent.add(new Intent().setClass(TabWidget.this, UdoActivity.class));  
92.                 break;  
93.             case 2:  
94.                 intent.add(new Intent().setClass(TabWidget.this,  
95.                         UdoActivity.class));  
96.                 break;  
97.             case 3:  
98.                 intent.add(new Intent().setClass(TabWidget.this,  
99.                         UdoActivity.class));  
100.                 break;  
101.             case 4:  
102.                 intent.add(new Intent().setClass(TabWidget.this,  
103.                         UdoActivity.class));  
104.                 break;  
105.             }  
106.             mTabSpec.get(i).setIndicator(linearLayout.get(i));  
107.   
108.             mTabSpec.get(i).setContent(intent.get(i));  
109.   
110.             mTabhost.addTab(mTabSpec.get(i));  
111.   
112.         }  
113.     }  

4.3 关键代码详解

1）mTabHost.newTabSpec("tab1")用来new一个tab，同时标记这个tab的tag。

2）setContent()用来处理点击这个tab后的动作，可以是这个Activity下的一个组件，如setContent(R.id.tab1)，也可以是一个intent，比如：setContent(newIntent(this, SubTab.class))。

3）setIndicator()用来标记这个tab的名字，可以是setIndicator("tab1")，也可以包含其他的属性，如图片：setIndicator( "名称",getResources().getDrawable(android.R.tab1))。

4）tabs.addTab(spec)将这个tab添加进TabHost。

5）getMenuItem(R.drawable.tab_ispressed,TAB1)设置其中一Tab被按下的状态改变，R.drawable.tab_ispressed布局如下：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:drawable="@drawable/tab1_menu_effect_selected" android:state_pressed="false" android:state_selected="true"/>  
5.     <item android:drawable="@drawable/tab1_menu_effect"/>  
6.   
7. </selector>