效果图:
%title插图%num

首先看布局文件：

Java代码
  1. <?xml version=“1.0” encoding=“UTF-8”?>
  2. <TabHost android:id=“@android:id/tabhost” android:layout_width=“fill_parent” android:layout_height=“fill_parent”
  3.   xmlns:android=“http://schemas.android.com/apk/res/android”>
  4.     <LinearLayout
  5.         android:orientation=“vertical”
  6.         android:layout_width=“fill_parent”
  7.         android:layout_height=“fill_parent”>
  8.         <FrameLayout
  9.             android:id=“@android:id/tabcontent”
  10.             android:layout_width=“fill_parent”
  11.             android:layout_height=“0.0dip”
  12.             android:layout_weight=“1.0” />
  13.         <TabWidget
  14.             android:id=“@android:id/tabs”
  15.             android:visibility=“gone”
  16.             android:layout_width=“fill_parent”
  17.             android:layout_height=“wrap_content”
  18.             android:layout_weight=“0.0” />
  19.         <RadioGroup
  20.             android:gravity=“center_vertical”
  21.             android:layout_gravity=“bottom”
  22.             android:orientation=“horizontal”
  23.             android:id=“@+id/main_radio”
  24.             android:background=“@drawable/maintab_toolbar_bg”
  25.             android:layout_width=“fill_parent”
  26.             android:layout_height=“wrap_content”>
  27.             <RadioButton
  28.                 android:id=“@+id/radio_button0”
  29.                 android:tag=“radio_button0”
  30.                 android:layout_marginTop=“2.0dip”
  31.                 android:text=“@string/alarm”
  32.                 android:drawableTop=“@drawable/icon_1”
  33.                 style=“@style/main_tab_bottom” />
  34.             <RadioButton
  35.                 android:id=“@+id/radio_button1”
  36.                 android:tag=“radio_button1”
  37.                 android:layout_marginTop=“2.0dip”
  38.                 android:text=“@string/message”
  39.                 android:drawableTop=“@drawable/icon_2”
  40.                 style=“@style/main_tab_bottom” />
  41.             <RadioButton
  42.                 android:id=“@+id/radio_button2”
  43.                 android:tag=“radio_button2”
  44.                 android:layout_marginTop=“2.0dip”
  45.                 android:text=“@string/photo”
  46.                 android:drawableTop=“@drawable/icon_3”
  47.                 style=“@style/main_tab_bottom” />
  48.             <RadioButton
  49.                 android:id=“@+id/radio_button3”
  50.                 android:tag=“radio_button3”
  51.                 android:layout_marginTop=“2.0dip”
  52.                 android:text=“@string/music”
  53.                 android:drawableTop=“@drawable/icon_4”
  54.                 style=“@style/main_tab_bottom” />
  55.             <RadioButton
  56.                 android:id=“@+id/radio_button4”
  57.                 android:tag=“radio_button4”
  58.                 android:layout_marginTop=“2.0dip”
  59.                 android:text=“@string/setting”
  60.                 android:drawableTop=“@drawable/icon_5”
  61.                 style=“@style/main_tab_bottom” />
  62.         </RadioGroup>
  63.     </LinearLayout>
  64. </TabHost>
[java]  view plain copy
  1. <?xml version=“1.0” encoding=“UTF-8”?>
  2. <TabHost android:id=“@android:id/tabhost” android:layout_width=“fill_parent” android:layout_height=“fill_parent”
  3.   xmlns:android=“http://schemas.android.com/apk/res/android”>
  4.     <LinearLayout
  5.         android:orientation=“vertical”
  6.         android:layout_width=“fill_parent”
  7.         android:layout_height=“fill_parent”>
  8.         <FrameLayout
  9.             android:id=“@android:id/tabcontent”
  10.             android:layout_width=“fill_parent”
  11.             android:layout_height=“0.0dip”
  12.             android:layout_weight=“1.0” />
  13.         <TabWidget
  14.             android:id=“@android:id/tabs”
  15.             android:visibility=“gone”
  16.             android:layout_width=“fill_parent”
  17.             android:layout_height=“wrap_content”
  18.             android:layout_weight=“0.0” />
  19.         <RadioGroup
  20.             android:gravity=“center_vertical”
  21.             android:layout_gravity=“bottom”
  22.             android:orientation=“horizontal”
  23.             android:id=“@+id/main_radio”
  24.             android:background=“@drawable/maintab_toolbar_bg”
  25.             android:layout_width=“fill_parent”
  26.             android:layout_height=“wrap_content”>
  27.             <RadioButton
  28.                 android:id=“@+id/radio_button0”
  29.                 android:tag=“radio_button0”
  30.                 android:layout_marginTop=“2.0dip”
  31.                 android:text=“@string/alarm”
  32.                 android:drawableTop=“@drawable/icon_1”
  33.                 style=“@style/main_tab_bottom” />
  34.             <RadioButton
  35.                 android:id=“@+id/radio_button1”
  36.                 android:tag=“radio_button1”
  37.                 android:layout_marginTop=“2.0dip”
  38.                 android:text=“@string/message”
  39.                 android:drawableTop=“@drawable/icon_2”
  40.                 style=“@style/main_tab_bottom” />
  41.             <RadioButton
  42.                 android:id=“@+id/radio_button2”
  43.                 android:tag=“radio_button2”
  44.                 android:layout_marginTop=“2.0dip”
  45.                 android:text=“@string/photo”
  46.                 android:drawableTop=“@drawable/icon_3”
  47.                 style=“@style/main_tab_bottom” />
  48.             <RadioButton
  49.                 android:id=“@+id/radio_button3”
  50.                 android:tag=“radio_button3”
  51.                 android:layout_marginTop=“2.0dip”
  52.                 android:text=“@string/music”
  53.                 android:drawableTop=“@drawable/icon_4”
  54.                 style=“@style/main_tab_bottom” />
  55.             <RadioButton
  56.                 android:id=“@+id/radio_button4”
  57.                 android:tag=“radio_button4”
  58.                 android:layout_marginTop=“2.0dip”
  59.                 android:text=“@string/setting”
  60.                 android:drawableTop=“@drawable/icon_5”
  61.                 style=“@style/main_tab_bottom” />
  62.         </RadioGroup>
  63.     </LinearLayout>
  64. </TabHost>

需要注意的是，如果用TabHost这个控件，其中有几个ID是必须这么写的，android:id=”@android:id/tabhost   ；android:id=”@android:id/tabcontent” ；android:id=”@android:id/tabs” ；之所以要这么写是因为在TabHost这个类中。需要实例化上述这个ID的控件。看源码：

在TabActivity中有么个方法：

  1. @Override
  2. public void onContentChanged() {
  3.     super.onContentChanged();
  4.     mTabHost = (TabHost) findViewById(com.android.internal.R.id.tabhost);
  6.     if (mTabHost == null) {
  7.         throw new RuntimeException(
  8.                 “Your content must have a TabHost whose id attribute is “ +
  9.                 “‘android.R.id.tabhost'”);
  10.     }
  11.     mTabHost.setup(getLocalActivityManager());
  12. }
  14. private void ensureTabHost() {
  15.     if (mTabHost == null) {
  16.         this.setContentView(com.android.internal.R.layout.tab_content);
  17.     }
  18. }
[java]  view plain copy
  1. @Override
  2. public void onContentChanged() {
  3.     super.onContentChanged();
  4.     mTabHost = (TabHost) findViewById(com.android.internal.R.id.tabhost);
  6.     if (mTabHost == null) {
  7.         throw new RuntimeException(
  8.                 “Your content must have a TabHost whose id attribute is “ +
  9.                 “‘android.R.id.tabhost'”);
  10.     }
  11.     mTabHost.setup(getLocalActivityManager());
  12. }
  14. private void ensureTabHost() {
  15.     if (mTabHost == null) {
  16.         this.setContentView(com.android.internal.R.layout.tab_content);
  17.     }
  18. }

当内容发生改变时它会调用这个方法，来更新列表或者其他视图，而这个方法中需要实例化TabHost，所以必须通过ID为tabhost实例化。

再看看TabHost这个类中，

Java代码
  1. public void setup() {
  2.     mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
  3.     if (mTabWidget == null) {
  4.         throw new RuntimeException(
  5.                 “Your TabHost must have a TabWidget whose id attribute is ‘android.R.id.tabs'”);
  6.     }
  8.     // KeyListener to attach to all tabs. Detects non-navigation keys 
  9.     // and relays them to the tab content. 
  10.     mTabKeyListener = new OnKeyListener() {
  11.         public boolean onKey(View v, int keyCode, KeyEvent event) {
  12.             switch (keyCode) {
  13.                 case KeyEvent.KEYCODE_DPAD_CENTER:
  14.                 case KeyEvent.KEYCODE_DPAD_LEFT:
  15.                 case KeyEvent.KEYCODE_DPAD_RIGHT:
  16.                 case KeyEvent.KEYCODE_DPAD_UP:
  17.                 case KeyEvent.KEYCODE_DPAD_DOWN:
  18.                 case KeyEvent.KEYCODE_ENTER:
  19.                     return false;
  21.             }
  22.             mTabContent.requestFocus(View.FOCUS_FORWARD);
  23.             return mTabContent.dispatchKeyEvent(event);
  24.         }
  26.     };
  28.     mTabWidget.setTabSelectionListener(new TabWidget.OnTabSelectionChanged() {
  29.         public void onTabSelectionChanged(int tabIndex, boolean clicked) {
  30.             setCurrentTab(tabIndex);
  31.             if (clicked) {
  32.                 mTabContent.requestFocus(View.FOCUS_FORWARD);
  33.             }
  34.         }
  35.     });
  37.     mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
  38.     if (mTabContent == null) {
  39.         throw new RuntimeException(
  40.                 “Your TabHost must have a FrameLayout whose id attribute is “
  41.                         + “‘android.R.id.tabcontent'”);
  42.     }
  43. }
[java]  view plain copy
  1. public void setup() {
  2.     mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
  3.     if (mTabWidget == null) {
  4.         throw new RuntimeException(
  5.                 “Your TabHost must have a TabWidget whose id attribute is ‘android.R.id.tabs'”);
  6.     }
  8.     // KeyListener to attach to all tabs. Detects non-navigation keys
  9.     // and relays them to the tab content.
  10.     mTabKeyListener = new OnKeyListener() {
  11.         public boolean onKey(View v, int keyCode, KeyEvent event) {
  12.             switch (keyCode) {
  13.                 case KeyEvent.KEYCODE_DPAD_CENTER:
  14.                 case KeyEvent.KEYCODE_DPAD_LEFT:
  15.                 case KeyEvent.KEYCODE_DPAD_RIGHT:
  16.                 case KeyEvent.KEYCODE_DPAD_UP:
  17.                 case KeyEvent.KEYCODE_DPAD_DOWN:
  18.                 case KeyEvent.KEYCODE_ENTER:
  19.                     return false;
  21.             }
  22.             mTabContent.requestFocus(View.FOCUS_FORWARD);
  23.             return mTabContent.dispatchKeyEvent(event);
  24.         }
  26.     };
  28.     mTabWidget.setTabSelectionListener(new TabWidget.OnTabSelectionChanged() {
  29.         public void onTabSelectionChanged(int tabIndex, boolean clicked) {
  30.             setCurrentTab(tabIndex);
  31.             if (clicked) {
  32.                 mTabContent.requestFocus(View.FOCUS_FORWARD);
  33.             }
  34.         }
  35.     });
  37.     mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
  38.     if (mTabContent == null) {
  39.         throw new RuntimeException(
  40.                 “Your TabHost must have a FrameLayout whose id attribute is “
  41.                         + “‘android.R.id.tabcontent'”);
  42.     }
  43. }

这个方法，是在增加选项卡之前由系统调用。在这个方法中需要通过tabs 这个ID实例化一个TabWidget，通过tabcontent这个ID实例化一个FrameLayout，用来放置选项卡内容。所以这两个ID也是固定的。

在上述布局文件中隐藏了系统默认的Widget，取而代之的是带有图片的Button。

看一下主要代码：

Java代码
  1. package com.iteye.androidtoast;
  3. import android.app.TabActivity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.widget.RadioGroup;
  7. import android.widget.RadioGroup.OnCheckedChangeListener;
  8. import android.widget.TabHost;
  10. public class MainActivity extends TabActivity implements OnCheckedChangeListener{
  11.     /** Called when the activity is first created. */
  12.     private TabHost mHost;
  13.     private RadioGroup radioderGroup;
  14.     @Override
  15.     public void onCreate(Bundle savedInstanceState) {
  16.         super.onCreate(savedInstanceState);
  17.         setContentView(R.layout.maintabs);
  18.         //实例化TabHost 
  19.         mHost=this.getTabHost();
  21.         //添加选项卡 
  22.         mHost.addTab(mHost.newTabSpec(“ONE”).setIndicator(“ONE”)
  23.                     .setContent(new Intent(this,OneActivity.class)));
  24.         mHost.addTab(mHost.newTabSpec(“TWO”).setIndicator(“TWO”)
  25.                 .setContent(new Intent(this,TwoActivity.class)));
  26.         mHost.addTab(mHost.newTabSpec(“THREE”).setIndicator(“THREE”)
  27.                 .setContent(new Intent(this,ThreeActivity.class)));
  28.         mHost.addTab(mHost.newTabSpec(“FOUR”).setIndicator(“FOUR”)
  29.                 .setContent(new Intent(this,FourActivity.class)));
  30.         mHost.addTab(mHost.newTabSpec(“FIVE”).setIndicator(“FIVE”)
  31.                 .setContent(new Intent(this,FiveActivity.class)));
  33.         radioderGroup = (RadioGroup) findViewById(R.id.main_radio);
  34.         radioderGroup.setOnCheckedChangeListener(this);
  35.     }
  36.     @Override
  37.     public void onCheckedChanged(RadioGroup group, int checkedId) {
  38.         switch(checkedId){
  39.         case R.id.radio_button0:
  40.             mHost.setCurrentTabByTag(“ONE”);
  41.             break;
  42.         case R.id.radio_button1:
  43.             mHost.setCurrentTabByTag(“TWO”);
  44.             break;
  45.         case R.id.radio_button2:
  46.             mHost.setCurrentTabByTag(“THREE”);
  47.             break;
  48.         case R.id.radio_button3:
  49.             mHost.setCurrentTabByTag(“FOUR”);
  50.             break;
  51.         case R.id.radio_button4:
  52.             mHost.setCurrentTabByTag(“FIVE”);
  53.             break;
  54.         }
  55.     }
  56. }
[java]  view plain copy
  1. package com.iteye.androidtoast;
  3. import android.app.TabActivity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.widget.RadioGroup;
  7. import android.widget.RadioGroup.OnCheckedChangeListener;
  8. import android.widget.TabHost;
  10. public class MainActivity extends TabActivity implements OnCheckedChangeListener{
  11.     /** Called when the activity is first created. */
  12.     private TabHost mHost;
  13.     private RadioGroup radioderGroup;
  14.     @Override
  15.     public void onCreate(Bundle savedInstanceState) {
  16.         super.onCreate(savedInstanceState);
  17.         setContentView(R.layout.maintabs);
  18.         //实例化TabHost
  19.         mHost=this.getTabHost();
  21.         //添加选项卡
  22.         mHost.addTab(mHost.newTabSpec(“ONE”).setIndicator(“ONE”)
  23.                     .setContent(new Intent(this,OneActivity.class)));
  24.         mHost.addTab(mHost.newTabSpec(“TWO”).setIndicator(“TWO”)
  25.                 .setContent(new Intent(this,TwoActivity.class)));
  26.         mHost.addTab(mHost.newTabSpec(“THREE”).setIndicator(“THREE”)
  27.                 .setContent(new Intent(this,ThreeActivity.class)));
  28.         mHost.addTab(mHost.newTabSpec(“FOUR”).setIndicator(“FOUR”)
  29.                 .setContent(new Intent(this,FourActivity.class)));
  30.         mHost.addTab(mHost.newTabSpec(“FIVE”).setIndicator(“FIVE”)
  31.                 .setContent(new Intent(this,FiveActivity.class)));
  33.         radioderGroup = (RadioGroup) findViewById(R.id.main_radio);
  34.         radioderGroup.setOnCheckedChangeListener(this);
  35.     }
  36.     @Override
  37.     public void onCheckedChanged(RadioGroup group, int checkedId) {
  38.         switch(checkedId){
  39.         case R.id.radio_button0:
  40.             mHost.setCurrentTabByTag(“ONE”);
  41.             break;
  42.         case R.id.radio_button1:
  43.             mHost.setCurrentTabByTag(“TWO”);
  44.             break;
  45.         case R.id.radio_button2:
  46.             mHost.setCurrentTabByTag(“THREE”);
  47.             break;
  48.         case R.id.radio_button3:
  49.             mHost.setCurrentTabByTag(“FOUR”);
  50.             break;
  51.         case R.id.radio_button4:
  52.             mHost.setCurrentTabByTag(“FIVE”);
  53.             break;
  54.         }
  55.     }
  56. }