TabHost、RadioGroup实现底部菜单导航

先上效果图：

实现上述效果，我们按照以下几个步骤逐一的实现

1.定义TabHost的布局,TabHost布局 android 有一定的规定：

一般包含id为@android:id/tabhost的Tabhost，id为@android:id/tabs的TabWidget，id为@android:id/tabcontent的FrameLayout

这里结合RadioGroup实现点击切换Activity,RadioButton可以方便设置图片和文字的上下左右位置。

以下为布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<TabHost android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout android:layout_height="match_parent"
        android:layout_width="match_parent">
    <TabWidget android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:visibility="gone">
    </TabWidget>
    <FrameLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
      >
        <RadioGroup android:id="@+id/main_radiogroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="bottom"
            android:gravity="bottom"
            android:background="@drawable/bottom1">
            <RadioButton android:id="@+id/workspace" android:checked="true" style="@style/TabButton" android:text="工作区" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_0"/>
            <RadioButton android:id="@+id/entertainment" style="@style/TabButton" android:text="娱乐生活" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_1"/>
            <RadioButton android:id="@+id/tools"  style="@style/TabButton" android:text="工具箱" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_2"/>
            <RadioButton android:id="@+id/setting"  style="@style/TabButton" android:text="个人中心" android:layout_weight="1" android:drawableTop="@drawable/bg_radio_icon_menu_3"/>
    </RadioGroup>
    </FrameLayout>
    <FrameLayout android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_above="@android:id/tabs">
    </FrameLayout>
    </RelativeLayout>
</TabHost>
</RelativeLayout>

2.编写Activity

Activity需实现TabActivity,初始化Tab 设置RadioButton的选择监听事件用于切换Activity

代码如下:

import com.nisco.twp.R;
import android.app.Activity;
import android.app.ActivityGroup;
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 MainTabHost extends TabActivity
{
    private TabHost tabHost=null;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabhost);
        tabHost=(TabHost)findViewById(android.R.id.tabhost);
        tabHost.setFocusable(true);
        TabHost.TabSpec tabSpec=tabHost.newTabSpec("1");
        Intent intent=new Intent(this, MainActivity.class);
        tabSpec.setIndicator("工作区").setContent(intent);
        tabHost.setup(this.getLocalActivityManager());
        tabHost.addTab(tabSpec);
        
        TabHost.TabSpec tabSpec2=tabHost.newTabSpec("2");
        Intent intent2=new Intent(this, EntertainmentMainActivity.class);
        tabSpec2.setIndicator("娱乐生活").setContent(intent2);
        tabHost.addTab(tabSpec2);
        
        TabHost.TabSpec tabSpec3=tabHost.newTabSpec("3");
        Intent intent3=new Intent(this, ToolsMainActivity.class);
        tabSpec3.setIndicator("工具箱").setContent(intent3);
        tabHost.addTab(tabSpec3);
        
        TabHost.TabSpec tabSpec4=tabHost.newTabSpec("4");
        Intent intent4=new Intent(this, MainActivity.class);
        tabSpec4.setIndicator("个人中心").setContent(intent4);
        tabHost.addTab(tabSpec4);
        tabHost.setCurrentTab(0);
        RadioGroup radioGroup=(RadioGroup)findViewById(R.id.main_radiogroup);
        radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId)
            {
                switch (checkedId) {
                case R.id.workspace:
                    tabHost.setCurrentTab(0);
                    break;
                case R.id.entertainment:
                    tabHost.setCurrentTab(1);
                    break;
                case R.id.tools:
                    tabHost.setCurrentTab(2);
                    break;
                case R.id.setting:
                    tabHost.setCurrentTab(3);
                    break;

                }
            }
        });
    }
    
}

Tab切换对应的几个Activity都相对简单，这里就不再赘述了。