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. <RelativeLayout
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:orientation="vertical" >
11. <TabWidget
12. android:id="@android:id/tabs"
13. android:layout_width="fill_parent"
14. android:layout_height="60dip"
15. android:layout_alignParentBottom="true"
16. android:background="#424242" >
17. </TabWidget>
18. <FrameLayout
19. android:id="@android:id/tabcontent"
20. android:layout_width="fill_parent"
21. android:layout_height="fill_parent" >
22. <LinearLayout
23. android:id="@+id/theme"
24. android:layout_width="fill_parent"
25. android:layout_height="fill_parent"
26. android:orientation="vertical" >
27. <TextView
28. android:id="@+id/theme_title"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:text="Tab1" />
32. </LinearLayout>
33. <LinearLayout
34. android:id="@+id/wallpaper"
35. android:layout_width="fill_parent"
36. android:layout_height="fill_parent"
37. android:orientation="vertical" >
38. <TextView
39. android:id="@+id/wallpaper_title"
40. android:layout_width="wrap_content"
41. android:layout_height="wrap_content"
42. android:text="Tab2" />
43. </LinearLayout>
44. <LinearLayout
45. android:id="@+id/iconbg"
46. android:layout_width="fill_parent"
47. android:layout_height="fill_parent"
48. android:orientation="vertical" >
49. <TextView
50. android:id="@+id/iconbg_title"
51. android:layout_width="wrap_content"
52. android:layout_height="wrap_content"
53. android:text="Tab3" />
54. </LinearLayout>
55. <LinearLayout
56. android:id="@+id/screenlock"
57. android:layout_width="fill_parent"
58. android:layout_height="fill_parent"
59. android:orientation="vertical" >
60. <TextView
61. android:id="@+id/screenlock_title"
62. android:layout_width="wrap_content"
63. android:layout_height="wrap_content"
64. android:text="Tab4" />
65. </LinearLayout>
66. <LinearLayout
67. android:id="@+id/effect"
68. android:layout_width="fill_parent"
69. android:layout_height="fill_parent"
70. android:orientation="vertical" >
71. <TextView
72. android:id="@+id/effect_title"
73. android:layout_width="wrap_content"
74. android:layout_height="wrap_content"
75. android:text="Tab5" />
76. </LinearLayout>
77. </FrameLayout>
78. </RelativeLayout>
79. </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. android:background="@color/wcity_normal_bg" >
7. <LinearLayout
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:orientation="vertical" >
11. <FrameLayout
12. android:id="@android:id/tabcontent"
13. android:layout_width="fill_parent"
14. android:layout_height="fill_parent"
15. android:layout_weight="1" >
16. </FrameLayout>
17. <TabWidget
18. android:id="@android:id/tabs"
19. android:layout_width="fill_parent"
20. android:layout_height="wrap_content"
21. android:background="@drawable/tab"
22. />
23. </LinearLayout>
24. </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. <LinearLayout
8. android:id="@+id/tabItem
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:background="@drawable/bg_ispressed"
12. android:gravity="center_horizontal|center_vertical"
13. android:orientation="vertical" >
14. <ImageView
15. android:id="@+id/icon"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content" />
18. <TextView
19. android:id="@+id/name"
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content" />
22. </LinearLayout>
23. </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. <item android:drawable="@drawable/tab_selected_bg" android:state_pressed="false" android:state_selected="true"/>
4. </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. import android.app.Activity;
4. import android.content.Context;
5. import android.os.Bundle;
6. import android.view.LayoutInflater;
7. import android.view.View;
8. import android.widget.ImageView;
9. import android.widget.LinearLayout;
10. import android.widget.TabHost;
11. import android.widget.TextView;
12. public class TabDesignActivity extends Activity{
13. private Context mContex = this;
14. private TabHost mTabHost;
15. private String TAB1 = "tab1";
16. private String TAB2 = "tab2";
17. private String TAB3 = "tab3";
18. private String TAB4 = "tab4";
19. private String TAB5 = "tab5";
20. private List<LinearLayout> menuItemList;
21. @Override
22. protected void onCreate(Bundle savedInstanceState) {
23. // TODO Auto-generated method stub
24. super.onCreate(savedInstanceState);
25. setContentView(R.layout.tab_main);
26. menuItemList = new ArrayList<LinearLayout>();
27. mTabHost = (TabHost) findViewById(R.id.tabhost);
28. mTabHost.setup();
29. mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator(getMenuItem(R.drawable.tab1_ispressed, TAB1)).setContent(R.id.tab1));
30. mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator(getMenuItem(R.drawable.tab2_ispressed, TAB2)).setContent(R.id.tab2));
31. mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator(getMenuItem(R.drawable.tab3_ispressed, TAB3)).setContent(R.id.tab3));
32. mTabHost.addTab(mTabHost.newTabSpec("tab4").setIndicator(getMenuItem(R.drawable.tab4_ispressed, TAB4)).setContent(R.id.tab4));
33. mTabHost.addTab(mTabHost.newTabSpec("tab5").setIndicator(getMenuItem(R.drawable.tab5_ispressed, TAB5)).setContent(R.id.tab5));
34. }
35. public View getMenuItem(int imgID, String textID){
36. LinearLayout ll = (LinearLayout) LayoutInflater.from(mContex).inflate(R.layout.tab_item, null);
37. ImageView imgView = (ImageView)ll.findViewById(R.id.icon);
38. imgView.setBackgroundResource(imgID);
39. TextView textView = (TextView)ll.findViewById(R.id.name);
40. textView.setText(textID);
41. menuItemList.add(ll);
42. return ll;
43. }
44. }

继承自TabActivity的实现

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

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. <item android:drawable="@drawable/tab1_menu_effect_selected" android:state_pressed="false" android:state_selected="true"/>
4. <item android:drawable="@drawable/tab1_menu_effect"/>
5. </selector>