TabHost底部菜单的实现

TabHost底部菜单的实现

一、简介

底部菜单栏是各种Android应用中常用的布局。如新浪微博，qq空间，微信等应用都有用到底部菜单栏。

底部菜单选项卡主要是通过TabHost和RadioGroup实现的。

二、TabHost和RadioGroup的使用

请看具体代码实现：

1、activit_main.xml   主页面布局的实现

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

<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="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0" >
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone" />

        <RadioGroup
            android:id="@+id/main_radio"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/market_sng_me_bg"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/radio_button0"
                style="@style/main_btn_style"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2.0dip"
                android:layout_weight="1"
                android:drawableTop="@drawable/tabbar_home"
                android:tag="radio_button0"
                android:text="@string/main_page" />

            <RadioButton
                android:id="@+id/radio_button1"
                style="@style/main_btn_style"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2.0dip"
                android:layout_weight="1"
                android:drawableTop="@drawable/tabbar_message_center"
                android:tag="radio_button1"
                android:text="@string/message" />

            <RadioButton
                android:id="@+id/radio_button2"
                style="@style/main_btn_style"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2.0dip"
                android:layout_weight="1"
                android:drawableTop="@drawable/tabbar_add" />

            <RadioButton
                android:id="@+id/radio_button3"
                style="@style/main_btn_style"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2.0dip"
                android:layout_weight="1"
                android:drawableTop="@drawable/tabbar_discover"
                android:tag="radio_button3"
                android:text="@string/discover" />

            <RadioButton
                android:id="@+id/radio_button4"
                style="@style/main_btn_style"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2.0dip"
                android:layout_weight="1"
                android:drawableTop="@drawable/tabbar_profile"
                android:tag="radio_button4"
                android:text="@string/profile" />
        </RadioGroup>
    </LinearLayout>

</TabHost>

2、style.xml 样式布局文件

<resources>
    <style name="main_btn_style">
        <item name="android:button">@null</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:textSize">12sp</item>
        <item name="android:drawablePadding">4dp</item>
    </style>
</resources>

button值设置为@null就不会出现radioButton的按钮了。

3、MainActivity.java

package com.demo.tabhost;

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

public class MainActivity extends TabActivity {
	private RadioGroup main_radio;
	private RadioButton tab_home, tab_message, tab_add, tab_discover,
			tab_profile;
	private TabHost mHost;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mHost = this.getTabHost();
		// 添加N个tab选项卡，定义他们的tab名，指示名，目标屏对应的类。
		mHost.addTab(mHost.newTabSpec("one").setIndicator("1")
				.setContent(new Intent(this, HomeActivity.class)));
		mHost.addTab(mHost.newTabSpec("two").setIndicator("2")
				.setContent(new Intent(this, MessageActivity.class)));
		mHost.addTab(mHost.newTabSpec("three").setIndicator("3")
				.setContent(new Intent(this, AddActivity.class)));
		mHost.addTab(mHost.newTabSpec("four").setIndicator("4")
				.setContent(new Intent(this, DiscoverActivity.class)));
		mHost.addTab(mHost.newTabSpec("five").setIndicator("5")
				.setContent(new Intent(this, ProfileActivity.class)));

		main_radio = (RadioGroup) findViewById(R.id.main_radio);
		tab_home = (RadioButton) findViewById(R.id.radio_button0);
		tab_message = (RadioButton) findViewById(R.id.radio_button1);
		tab_add = (RadioButton) findViewById(R.id.radio_button2);
		tab_discover = (RadioButton) findViewById(R.id.radio_button3);
		tab_profile = (RadioButton) findViewById(R.id.radio_button4);
		main_radio
				.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
					public void onCheckedChanged(RadioGroup group, int id) {
						switch (id) {
						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;
						}
					}
				});
	}

}

加载布局，添加tab选项卡，定义他们的tab名，指示名，目标屏对应的类

4、另外还有是个tab选项卡对应的Activity类和相对应的布局文件xml这里就不一一贴出代码了。