实现、设置-Android TabWidget-by小雨

首先先看一个小例子，接着讲授理原

1. 1. 
      
2. TabTest.java
3. 
   
4. view plaincopy to clipboardprint?
5. package org.hualang.tab;
6. import android.app.Activity;
7. import android.app.TabActivity;
8. import android.graphics.Color;
9. import android.os.Bundle;
10. import android.widget.TabHost;
11. import android.widget.Toast;
12. import android.widget.TabHost.OnTabChangeListener;
13. public class TabTest extends TabActivity {
14. /** Called when the activity is first created. */
15. TabHost tabhost;
16. @Override
17. public void onCreate(Bundle savedInstanceState) {
18. super.onCreate(savedInstanceState);
19. setContentView(R.layout.main);
20. //获得TabHost对象
21. tabhost = getTabHost();
22. //为TabHost添加签标
23. //新建一个newTabSpec(newTabSpec)
24. //设置其签标和标图（setIndicator）
25. //设置容内（setContent）
26. tabhost.addTab(tabhost.newTabSpec("tab1")
27. .setIndicator("TAB 1",getResources().getDrawable(R.drawable.img1))
28. .setContent(R.id.text1));
29. tabhost.addTab(tabhost.newTabSpec("tab2")
30. .setIndicator("TAB 2",getResources().getDrawable(R.drawable.img2))
31. .setContent(R.id.text2));
32. tabhost.addTab(tabhost.newTabSpec("tab3")
33. .setIndicator("TAB 3",getResources().getDrawable(R.drawable.img3))
34. .setContent(R.id.text3));
35. //设置TabHost的背景颜色
36. //tabhost.setBackgroundColor(Color.argb(150,22,70,150));
37. //设置TabHost的背景图片资源
38. tabhost.setBackgroundResource(R.drawable.bg0);
39. //设置前当示显哪个签标
40. tabhost.setCurrentTab(0);
41. //签标换切事件处理，setOnTabChangedListener
42. tabhost.setOnTabChangedListener(new OnTabChangeListener()
43. {
44. public void onTabChanged(String tabId)
45. {
46. Toast toast=Toast.makeText(getApplicationContext(), "现在是"+tabId+"签标", Toast.LENGTH_SHORT);
47. toast.show();
48. }
49. });
50. 
    
51. }
52. }
53. 
    
    1. 
       

main.xml

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
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. <LinearLayout
8. android:orientation="vertical"
9. android:layout_width="fill_parent"
10. android:layout_height="fill_parent">
11. <TabWidget
12. android:id="@android:id/tabs"
13. android:layout_width="fill_parent"
14. android:layout_height="wrap_content" />
15. <FrameLayout
16. android:id="@android:id/tabcontent"
17. android:layout_width="fill_parent"
18. android:layout_height="fill_parent">
19. <TextView
20. android:id="@+id/text1"
21. android:layout_width="fill_parent"
22. android:layout_height="fill_parent"
23. android:text="选项卡1" />
24. <TextView
25. android:id="@+id/text2"
26. android:layout_width="fill_parent"
27. android:layout_height="fill_parent"
28. android:text="选项卡2" />
29. <TextView
30. android:id="@+id/text3"
31. android:layout_width="fill_parent"
32. android:layout_height="fill_parent"
33. android:text="选项卡3" />
34. </FrameLayout>
35. </LinearLayout>
36. </TabHost>
    1. 
       

Android TabWidget的实现可以分为二种，一种是应用准标TabActivity实现，另外一种可以自定义方法实现，种这方法实现起来对相较比复杂，但对于要实现较比多元化的view是很好的，这里我们简略看下源码

一、通用做法

继承TabActivity，实现自己的TabActivity

1. 1. 
      
2. import android.app.Activity;
3. import android.app.TabActivity;
4. import android.content.Intent;
5. import android.os.Bundle;
6. import android.widget.TabHost;
7. import android.widget.TabHost.OnTabChangeListener;
8. public class TabWidgetDemo2 extends TabActivity implements OnTabChangeListener {
9. private TabHost mTabHost;
10. 
    
11. @Override
12. protected void onCreate(Bundle savedInstanceState) {
13. // TODO Auto-generated method stub
14. super.onCreate(savedInstanceState);
15. 
    
16. setContentView(R.layout.tabwidgetdemo2);
17. mTabHost = getTabHost();
18. mTabHost.setOnTabChangedListener(this);
19. setupTab1();
20. setupTab2();
21. mTabHost.setCurrentTab(1);
22. }
23. private void setupTab2() {
24. // TODO Auto-generated method stub
25. Intent intent = new Intent();
26. intent.setAction(Intent.ACTION_MAIN);
27. intent.setClass(this, TabWidget2.class);
28. mTabHost.addTab(mTabHost.newTabSpec("TabWidget2")
29. .setIndicator("TabWidget2",getResources().getDrawable(R.drawable.icon))
30. .setContent(intent));
31. }
32. private void setupTab1() {
33. // TODO Auto-generated method stub
34. Intent intent = new Intent();
35. intent.setAction(Intent.ACTION_MAIN);
36. intent.setClass(this, TabWidget1.class);
37. mTabHost.addTab(mTabHost.newTabSpec("TabWidget1")
38. .setIndicator("TabWidget1",getResources().getDrawable(R.drawable.icon))
39. .setContent(intent));
40. }
41. public void onTabChanged(String tabId) {
42. // TODO Auto-generated method stub
43. Activity activity = getLocalActivityManager().getActivity(tabId);
44. if (activity != null) {
45. activity.onWindowFocusChanged(true);
46. }
47. }
48. 
    
49. 
    
50. }
    1. 
       

二个tab对应的Activity，先看TabWidget1，这个类在第二种实现中还会用到，因此我们可以看到对Action的判断。

1. 1. 
      
2. import android.app.Activity;
3. import android.content.Intent;
4. import android.os.Bundle;
5. import com.android.exampledemo.R;
6. import com.android.exampledemo.util.DemoUtils;
7. public class TabWidget1 extends Activity {
8. @Override
9. protected void onCreate(Bundle savedInstanceState) {
10. // TODO Auto-generated method stub
11. super.onCreate(savedInstanceState);
12. 
    
13. Intent intent = this.getIntent();
14. if (intent.getAction().equals(Intent.ACTION_MAIN)){
15. setContentView(R.layout.tabwidgetdemo2_1);
16. }
17. else {
18. setContentView(R.layout.tabwidget_1);
19. DemoUtils.updateButtonBar((Activity)this,R.id.contactstab);
20. }
21. }
22. }
    1. 
       

再看一下TabWidget2，这个Activity我们在第二种实现方法中也会用到。

1. 1. 
      
2. import com.android.exampledemo.R;
3. import com.android.exampledemo.util.DemoUtils;
4. import android.app.Activity;
5. import android.content.Intent;
6. import android.os.Bundle;
7. public class TabWidget2 extends Activity {
8. @Override
9. protected void onCreate(Bundle savedInstanceState) {
10. // TODO Auto-generated method stub
11. super.onCreate(savedInstanceState);
12. 
    
13. Intent intent = this.getIntent();
14. 
    
15. if (intent.getAction().equals(Intent.ACTION_MAIN)){
16. setContentView(R.layout.tabwidgetdemo2_1);
17. }
18. else {
19. setContentView(R.layout.tabwidget_2);
20. DemoUtils.updateButtonBar((Activity)this,R.id.groupstab);
21. }
22. }
23. }
    1. 
       

最后就是各个Activity对应的layout

1.tabwidgetdemo2.xml

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <TabHost
4. xmlns:android="http://schemas.android.com/apk/res/android"
5. android:id="@android:id/tabhost"
6. android:layout_width="fill_parent"
7. android:layout_height="fill_parent">
8. <LinearLayout
9. android:orientation="vertical"
10. android:layout_width="fill_parent"
11. android:layout_height="fill_parent">
12. <TabWidget android:id="@android:id/tabs"
13. android:layout_width="fill_parent"
14. android:layout_height="68dip"
15. android:paddingLeft="1dip"
16. android:paddingRight="1dip"
17. android:paddingTop="4dip"
18. />
19. <FrameLayout android:id="@android:id/tabcontent"
20. android:layout_width="fill_parent"
21. android:layout_height="0dip"
22. android:layout_weight="1"
23. />
24. </LinearLayout>
25. </TabHost>
    1. 
       

2.二个sub tab对应的layout

1. Layout1
2. <?xml version="1.0" encoding="utf-8"?>
3. <LinearLayout
4. xmlns:android="http://schemas.android.com/apk/res/android"
5. android:layout_width="fill_parent"
6. android:layout_height="fill_parent"
7. android:background="#FFF">
8. <TextView android:id="@+id/textview"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:text="Tab Widget first">
12. </TextView>
13. </LinearLayout>
14. Layout2
15. <?xml version="1.0" encoding="utf-8"?>
16. <LinearLayout
17. xmlns:android="http://schemas.android.com/apk/res/android"
18. android:layout_width="fill_parent"
19. android:layout_height="fill_parent"
20. android:background="#FFF">
21. <TextView android:id="@+id/textview"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:text="Tab Widget second">
25. </TextView>
26. </LinearLayout>
    1. 
       

方法2：

先创立一个Activity （TabWidgetDemo）

1. 1. 
      
2. 1.TabWidgetDemo.java
3. import com.android.exampledemo.R;
4. import com.android.exampledemo.util.DemoUtils;
5. import android.app.Activity;
6. import android.content.Context;
7. import android.content.SharedPreferences;
8. import android.os.Bundle;
9. //not use tabhost to organized
10. public class TabWidgetDemo extends Activity {
11. @Override
12. protected void onCreate(Bundle savedInstanceState) {
13. // TODO Auto-generated method stub
14. super.onCreate(savedInstanceState);
15. //int activeTab = DemoUtils.getIntPref(this, "activetab", R.id.artisttab);
16. SharedPreferences prefs =
17. getSharedPreferences(getPackageName(), Context.MODE_PRIVATE);
18. int activeTab = prefs.getInt("activetab", R.id.contactstab);
19. if (activeTab != R.id.contactstab
20. && activeTab != R.id.groupstab) {
21. activeTab = R.id.contactstab;
22. }
23. DemoUtils.activateTab(this, activeTab);
24. }
25. }
26. 2.DemoUtils
27. import android.app.Activity;
28. import android.content.Intent;
29. import android.net.Uri;
30. import android.view.View;
31. import android.widget.TabWidget;
32. import com.android.exampledemo.R;
33. public class DemoUtils {
34. static int sActiveTabIndex = -1;
35. 
    
36. public static void activateTab(Activity a,int active_id){
37. Intent intent = new Intent(Intent.ACTION_PICK);
38. switch (active_id) {
39. case R.id.contactstab:
40. intent.setDataAndType(Uri.EMPTY, "vnd.android.cursor.dir/tb_contacts");
41. break;
42. case R.id.groupstab:
43. intent.setDataAndType(Uri.EMPTY, "vnd.android.cursor.dir/tb_groups");
44. break;
45. default:
46. return;
47. }
48. intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
49. a.startActivity(intent);
50. a.finish();
51. a.overridePendingTransition(0,0);
52. }
53. 
    
54. 
    
55. public static void updateButtonBar(Activity a, int highlight) {
56. final TabWidget ll = (TabWidget) a.findViewById(R.id.buttonbar);
57. 
    
58. for (int i = ll.getChildCount() - 1; i >= 0; i--) {
59. View v = ll.getChildAt(i);
60. boolean isActive = (v.getId() == highlight);
61. if (isActive) {
62. ll.setCurrentTab(i);
63. sActiveTabIndex = i;
64. }
65. 
    
66. v.setTag(i);
67. v.setOnClickListener(new View.OnClickListener() {
68. public void onClick(View v) {
69. int id = v.getId();
70. if (id == ll.getChildAt(sActiveTabIndex).getId()) {
71. return;
72. }
73. activateTab((Activity)ll.getContext(),id );
74. ll.setCurrentTab((Integer) v.getTag());
75. }});
76. }
77. }
78. }
    1. 
       

二个Tab sub activity前一方法中经已给出，这里我们只需要看一下layout的实现就能够了

1>buttonbar.xml

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <TabWidget xmlns:android="http://schemas.android.com/apk/res/android"
4. android:id="@+id/buttonbar"
5. android:layout_width="match_parent"
6. android:layout_height="wrap_content" >
7. <TextView
8. android:id="@+id/contactstab"
9. android:focusable="true"
10. android:drawableTop="@drawable/icon"
11. android:background="@drawable/buttonbarbackground"
12. android:text="Contacts"
13. android:textColor="@color/tab_indicator_text"
14. android:textAppearance="?android:attr/textAppearanceSmall"
15. android:paddingTop="7dip"
16. android:paddingBottom="2dip"
17. android:gravity="center"
18. android:layout_weight="1"
19. android:layout_marginLeft="-3dip"
20. android:layout_marginRight="-3dip"
21. android:layout_width="match_parent"
22. android:layout_height="84dip"
23. android:singleLine="true"
24. android:ellipsize="marquee" />
25. <TextView
26. android:id="@+id/groupstab"
27. android:focusable="true"
28. android:drawableTop="@drawable/icon"
29. android:background="@drawable/buttonbarbackground"
30. android:text="Group"
31. android:textColor="@color/tab_indicator_text"
32. android:textAppearance="?android:attr/textAppearanceSmall"
33. android:paddingTop="7dip"
34. android:paddingBottom="2dip"
35. android:gravity="center"
36. android:layout_weight="1"
37. android:layout_marginLeft="-3dip"
38. android:layout_marginRight="-3dip"
39. android:layout_width="match_parent"
40. android:layout_height="84dip"
41. android:singleLine="true"
42. android:ellipsize="marquee" />
43. </TabWidget>
    1. 
       

2>tabwidget_1.xml

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <LinearLayout
4. xmlns:android="http://schemas.android.com/apk/res/android"
5. android:layout_width="fill_parent"
6. android:layout_height="fill_parent">
7. 
   
8. <include layout="@layout/battonbar" />
9. 
   
10. <ExpandableListView android:id="@+id/android:list"
11. android:layout_width="fill_parent"
12. android:layout_height="wrap_content"
13. android:footerDividersEnabled="true"
14. android:fadeScrollbars="true"
15. android:drawSelectorOnTop="true">
16. </ExpandableListView>
17. 
    
18. </LinearLayout>
    1. 
       

3> tabwidget_2.xml

1. 1. 
      
2. <?xml version="1.0" encoding="utf-8"?>
3. <LinearLayout
4. xmlns:android="http://schemas.android.com/apk/res/android"
5. android:layout_width="fill_parent"
6. android:layout_height="fill_parent">
7. 
   
8. <include layout="@layout/battonbar" />
9. 
   
10. </LinearLayout>