学步园

效果图:

首先看布局文件：

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>  

<?xml version="1.0" encoding="UTF-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout 
    	android:orientation="vertical" 
    	android:layout_width="fill_parent" 
    	android:layout_height="fill_parent">
        <FrameLayout 
        	android:id="@android:id/tabcontent" 
        	android:layout_width="fill_parent" 
        	android:layout_height="0.0dip" 
        	android:layout_weight="1.0" />
        <TabWidget 
        	android:id="@android:id/tabs" 
        	android:visibility="gone" 
        	android:layout_width="fill_parent" 
        	android:layout_height="wrap_content" 
        	android:layout_weight="0.0" />
        <RadioGroup 
        	android:gravity="center_vertical" 
        	android:layout_gravity="bottom" 
        	android:orientation="horizontal" 
        	android:id="@+id/main_radio" 
        	android:background="@drawable/maintab_toolbar_bg" 
        	android:layout_width="fill_parent" 
        	android:layout_height="wrap_content">
            <RadioButton 
            	android:id="@+id/radio_button0" 
            	android:tag="radio_button0" 
            	android:layout_marginTop="2.0dip" 
            	android:text="@string/alarm" 
            	android:drawableTop="@drawable/icon_1" 
            	style="@style/main_tab_bottom" />
            <RadioButton 
            	android:id="@+id/radio_button1" 
            	android:tag="radio_button1" 
            	android:layout_marginTop="2.0dip" 
            	android:text="@string/message" 
            	android:drawableTop="@drawable/icon_2" 
            	style="@style/main_tab_bottom" />
            <RadioButton 
            	android:id="@+id/radio_button2" 
            	android:tag="radio_button2" 
            	android:layout_marginTop="2.0dip" 
            	android:text="@string/photo" 
            	android:drawableTop="@drawable/icon_3" 
            	style="@style/main_tab_bottom" />
            <RadioButton 
            	android:id="@+id/radio_button3" 
            	android:tag="radio_button3" 
            	android:layout_marginTop="2.0dip" 
            	android:text="@string/music" 
            	android:drawableTop="@drawable/icon_4" 
            	style="@style/main_tab_bottom" />
            <RadioButton 
            	android:id="@+id/radio_button4" 
            	android:tag="radio_button4" 
            	android:layout_marginTop="2.0dip" 
            	android:text="@string/setting" 
            	android:drawableTop="@drawable/icon_5" 
            	style="@style/main_tab_bottom" />
        </RadioGroup>
    </LinearLayout>
</TabHost>

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

在TabActivity中有么个方法：

Java代码
 

1. @Override  
2. public void onContentChanged() {   
3.     super.onContentChanged();   
4.     mTabHost = (TabHost) findViewById(com.android.internal.R.id.tabhost);   
5.   
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. }   
13.   
14. private void ensureTabHost() {   
15.     if (mTabHost == null) {   
16.         this.setContentView(com.android.internal.R.layout.tab_content);   
17.     }   
18. }  

@Override
public void onContentChanged() {
	super.onContentChanged();
	mTabHost = (TabHost) findViewById(com.android.internal.R.id.tabhost);

	if (mTabHost == null) {
		throw new RuntimeException(
				"Your content must have a TabHost whose id attribute is " +
				"'android.R.id.tabhost'");
	}
	mTabHost.setup(getLocalActivityManager());
}

private void ensureTabHost() {
	if (mTabHost == null) {
		this.setContentView(com.android.internal.R.layout.tab_content);
	}
}

当内容发生改变时它会调用这个方法，来更新列表或者其他视图，而这个方法中需要实例化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.     }   
7.   
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;   
20.   
21.             }   
22.             mTabContent.requestFocus(View.FOCUS_FORWARD);   
23.             return mTabContent.dispatchKeyEvent(event);   
24.         }   
25.   
26.     };   
27.   
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.     });   
36.   
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. }  

public void setup() {
	mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
	if (mTabWidget == null) {
		throw new RuntimeException(
				"Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs'");
	}

	// KeyListener to attach to all tabs. Detects non-navigation keys
	// and relays them to the tab content.
	mTabKeyListener = new OnKeyListener() {
		public boolean onKey(View v, int keyCode, KeyEvent event) {
			switch (keyCode) {
				case KeyEvent.KEYCODE_DPAD_CENTER:
				case KeyEvent.KEYCODE_DPAD_LEFT:
				case KeyEvent.KEYCODE_DPAD_RIGHT:
				case KeyEvent.KEYCODE_DPAD_UP:
				case KeyEvent.KEYCODE_DPAD_DOWN:
				case KeyEvent.KEYCODE_ENTER:
					return false;

			}
			mTabContent.requestFocus(View.FOCUS_FORWARD);
			return mTabContent.dispatchKeyEvent(event);
		}

	};

	mTabWidget.setTabSelectionListener(new TabWidget.OnTabSelectionChanged() {
		public void onTabSelectionChanged(int tabIndex, boolean clicked) {
			setCurrentTab(tabIndex);
			if (clicked) {
				mTabContent.requestFocus(View.FOCUS_FORWARD);
			}
		}
	});

	mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
	if (mTabContent == null) {
		throw new RuntimeException(
				"Your TabHost must have a FrameLayout whose id attribute is "
						+ "'android.R.id.tabcontent'");
	}
}

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

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

看一下主要代码：

Java代码
 

1. package com.iteye.androidtoast;   
2.   
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;   
9.   
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();   
20.            
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)));   
32.            
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. }  

package com.iteye.androidtoast;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TabHost;

public class MainActivity extends TabActivity implements OnCheckedChangeListener{
    /** Called when the activity is first created. */
	private TabHost mHost;
	private RadioGroup radioderGroup;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.maintabs);
        //实例化TabHost
        mHost=this.getTabHost();
        
        //添加选项卡
        mHost.addTab(mHost.newTabSpec("ONE").setIndicator("ONE")
        			.setContent(new Intent(this,OneActivity.class)));
        mHost.addTab(mHost.newTabSpec("TWO").setIndicator("TWO")
        		.setContent(new Intent(this,TwoActivity.class)));
        mHost.addTab(mHost.newTabSpec("THREE").setIndicator("THREE")
        		.setContent(new Intent(this,ThreeActivity.class)));
        mHost.addTab(mHost.newTabSpec("FOUR").setIndicator("FOUR")
        		.setContent(new Intent(this,FourActivity.class)));
        mHost.addTab(mHost.newTabSpec("FIVE").setIndicator("FIVE")
        		.setContent(new Intent(this,FiveActivity.class)));
        
        radioderGroup = (RadioGroup) findViewById(R.id.main_radio);
		radioderGroup.setOnCheckedChangeListener(this);
    }
	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch(checkedId){
		case R.id.radio_button0:
			mHost.setCurrentTabByTag("ONE");
			break;
		case R.id.radio_button1:
			mHost.setCurrentTabByTag("TWO");
			break;
		case R.id.radio_button2:
			mHost.setCurrentTabByTag("THREE");
			break;
		case R.id.radio_button3:
			mHost.setCurrentTabByTag("FOUR");
			break;
		case R.id.radio_button4:
			mHost.setCurrentTabByTag("FIVE");
			break;
		}		
	}
}