Android小项目之采用TabHost和RadioButton实现底部页面导航

一、TabHost和RadioButton实现底部页面导航，嵌套多个Activity。

二、xml布局如下

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent">

    <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.0dp" android:layout_weight="1" />

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

        <LinearLayout  android:id="@+id/console_line_bottom" android:layout_width="fill_parent" android:layout_height="@dimen/radiogroup_height" android:layout_alignParentBottom="true" android:background="@drawable/bottombar_bg" android:orientation="horizontal">

            <RadioGroup  android:layout_width="fill_parent" android:layout_height="@dimen/radiogroup_height" android:layout_gravity="bottom" android:background="@drawable/bottombar_bg" android:orientation="horizontal" android:paddingTop="@dimen/bottom_tab_padding_top">

                <RadioButton  android:id="@+id/rb_home" style="@style/main_tab_bottom" android:drawableTop="@drawable/main_navigation_home" android:text="@string/main_home" />

                <RadioButton  android:id="@+id/rb_life" style="@style/main_tab_bottom" android:drawableTop="@drawable/main_navigation_personal" android:text="@string/main_life" />

                <RadioButton  android:id="@+id/rb_send" style="@style/main_tab_bottom" android:drawableTop="@drawable/main_navigation_catagory" android:text="@string/main_send" />

                <RadioButton  android:id="@+id/rb_receive" style="@style/main_tab_bottom" android:drawableTop="@drawable/main_navigation_more" android:text="@string/main_receive" />
            </RadioGroup>
        </LinearLayout>
    </LinearLayout>
</TabHost>

三、MainActivity实现如下

MainActivity.java

package com.example.guan.activitywork;

import android.app.Activity;
import android.app.TabActivity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

import com.example.guan.activitywork.R;

/** * @author Yeeku.H.Lee [email protected] * @version 1.0 */
public class MainActivity extends TabActivity implements CompoundButton.OnCheckedChangeListener {

    private TabHost tabHost;
    private RadioButton mHome;
    private RadioButton mLife;
    private RadioButton mSend;
    private RadioButton mReceive;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // 获取该Activity里面的TabHost组件
        tabHost = getTabHost();
        Intent _intentHome = new Intent(MainActivity.this, HomeActivity.class);
        Intent _intentLife = new Intent(MainActivity.this, LifeActivity.class);
        Intent _intentSend = new Intent(MainActivity.this, SendActivity.class);
        Intent _intentReceive = new Intent(MainActivity.this, ReceiveActivity.class);

        mHome = (RadioButton) findViewById(R.id.rb_home);
        mLife = (RadioButton) findViewById(R.id.rb_life);
        mSend = (RadioButton) findViewById(R.id.rb_send);
        mReceive = (RadioButton) findViewById(R.id.rb_receive);

        // 创建并添加Tab页
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("主页面")
                .setContent(_intentHome));
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("生命周期")
                .setContent(_intentLife));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("发送")
                .setContent(_intentSend));
        tabHost.addTab(tabHost.newTabSpec("tab4")
                .setIndicator("接收")
                .setContent(_intentReceive));

        mHome.setOnCheckedChangeListener(this);
        mLife.setOnCheckedChangeListener(this);
        mSend.setOnCheckedChangeListener(this);
        mReceive.setOnCheckedChangeListener(this);

        tabHost.setCurrentTabByTag("tab1");
    }

    @Override
    public void onCheckedChanged(CompoundButton view, boolean ischeak) {
        if (ischeak) {
            switch (view.getId()) {
                case R.id.rb_home:
            /** * 设置选中与未选中的状态 */                  
//mHome.setBackgroundColor(getResources().getColor(R.color.hotpink));
//mLife.setBackgroundColor(getResources().getColor(R.color.hotpink));
//mSend.setBackgroundColor(getResources().getColor(R.color.hotpink)); 
//mReceive.setBackgroundColor(getResources().getColor(R.color.hotpink)); 

                    tabHost.setCurrentTabByTag("tab1");
                    break;
                case R.id.rb_life:
                    tabHost.setCurrentTabByTag("tab2");
                    break;
                case R.id.rb_send:
                    tabHost.setCurrentTabByTag("tab3");
                    break;
                case R.id.rb_receive:
                    tabHost.setCurrentTabByTag("tab4");
                    break;
                default:
                    break;
            }
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        return super.onKeyDown(keyCode, event);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();       
    }
}

四、资源

style:

<style name="main_tab_bottom">
        <item name="android:textSize">@dimen/bottom_tab_font_size</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
        <item name="android:paddingBottom">@dimen/bottom_tab_padding_up</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:button">@null</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>

dimen:

    <dimen name="button_height">45dp</dimen>
    <dimen name="bottom_tab_font_size">16sp</dimen>
    <dimen name="bottom_tab_padding_up">1dp</dimen>
    <dimen name="bottom_tab_padding_button">2dp</dimen>
    <dimen name="bottom_tab_padding_drawable">2dp</dimen>
    <dimen name="bottom_tab_padding_top">1dp</dimen>
    <dimen name="bottom_layout_marginLeft">16dp</dimen>
    <dimen name="radiogroup_height">64dp</dimen>
    <dimen name="edit_height">56dp</dimen>
    <dimen name="edit_text_size">18sp</dimen>

string:

    <string name="main_home">主页面</string>
    <string name="main_life">生命周期</string>
    <string name="main_send">发送</string>
    <string name="main_receive">接收</string>

drawable:
bottombar_bg.png

main_navigation_home.png

main_navigation_personal.png

main_navigation_catagory.png

main_navigation_more.png

Activity:

自定义—Activity

五、实现效果如图