仿新浪微博底部菜單TabHost

先上效果圖

此圖就是我所實現的底部菜單欄

xml佈局以下：

<!-- lang: xml -->
      <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
          <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="#000000"
                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/main_home" 
                    style="@style/main_tab_bottom" />  
                <RadioButton   
                    android:id="@+id/radio_button1"   
                    android:tag="radio_button1"   
                    android:layout_marginTop="2.0dip"   
                     android:text="@string/main_pay" 
                    style="@style/main_tab_bottom" />  
                <RadioButton   
                    android:id="@+id/radio_button2"   
                    android:tag="radio_button2"   
                    android:layout_marginTop="2.0dip"   
                       android:text="@string/main_data_interface"   
                    style="@style/main_tab_bottom" />  
                <RadioButton   
                    android:id="@+id/radio_button3"   
                    android:tag="radio_button3"   
                    android:layout_marginTop="2.0dip"   
                     android:text="@string/main_setting" 
                    style="@style/main_tab_bottom" />  
            </RadioGroup>  
        </LinearLayout> 
    </TabHost>

從佈局能夠看出，雖然使用了tabhost，但實際實現圖上菜單效果的是radiogroup和radiobutton，在佈局上將TabWidget 控件隱藏，顯示時用radiobutton來代替，這樣也容易自定義一些效果。

radiobutton的樣式：

<!-- lang: xml -->
      <style name="main_tab_bottom">
        <item name="android:textSize">@dimen/bottom_tab_font_size</item>
        <item name="android:textColor">@drawable/main_menu_text_selector</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@null</item>
        <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:drawableTop">@drawable/main_menu_background_selector</item>
        <item name="android:singleLine">true</item>
        <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
        <item name="android:layout_weight">1.0</item>
    </style>

圖上點擊選項卡的效果就是經過樣式中的android:textColor和android:drawableTop來改變的。 就是經過selector來控制，需注意，在此處所應用的場景中，所選狀態的改變應該經過checked屬性來控制，而不是focused和pressed。以下：

<!-- lang: xml -->
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:drawable="@drawable/home_selected" android:state_checked="true"/>
        <item android:drawable="@drawable/home_normal"></item>
    </selector>

activity代碼：

<!-- lang: java -->
      public class MainActivity extends TabActivity implements OnCheckedChangeListener {
    
    	private TabHost tabHost;
    	private RadioGroup radioGroup;
    	
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		requestWindowFeature(Window.FEATURE_NO_TITLE);
    		setContentView(R.layout.activity_main);
    		
    		radioGroup = (RadioGroup)findViewById(R.id.main_radio);
    		tabHost = getTabHost();
    		
    		tabHost.addTab(addTabSpec("1", "1", new Intent(this, HomeActivity.class)));
    		tabHost.addTab(addTabSpec("2", "2", new Intent(this, PayActivity.class)));
    		tabHost.addTab(addTabSpec("3", "3", new Intent(this, DataInterfaceActivity.class)));
    		tabHost.addTab(addTabSpec("4", "4", new Intent(this, SettingActivity.class)));
    	
    		radioGroup.setOnCheckedChangeListener(this);
    	}
    
    	private TabHost.TabSpec addTabSpec(String tag,String label,Intent intent){
    		return tabHost.newTabSpec(tag).setIndicator(label).setContent(intent);
    	}
    
    	@Override
    	public void onCheckedChanged(RadioGroup arg0, int checkedId) {
    		switch (checkedId) {
    		case R.id.radio_button0:
    			tabHost.setCurrentTabByTag("1");
    			break;
    		case R.id.radio_button1:
    			tabHost.setCurrentTabByTag("2");
    			break;
    		case R.id.radio_button2:
    			tabHost.setCurrentTabByTag("3");
    			break;
    		case R.id.radio_button3:
    			tabHost.setCurrentTabByTag("4");
    			break;
    		}
    	}
    }

代碼編寫上，仍然經過tabhost來切換不一樣的頁面。