功能展示——Android底部导航栏复古风TabHost实现

---

我们app都有底部导航栏吧，形如：

现在我用失传多年的TabHost方法来几步实现底部导航拦的功能

一、主布局

<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"
    android:background="@color/transparent" >

    <LinearLayout
        android:id="@+id/LinearLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

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

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

        <RadioGroup
            android:id="@+id/rg_mainf_menu"
            android:layout_width="match_parent"
            android:layout_height="58dp"
            android:background="@drawable/pic_main"
            android:gravity="bottom|center_vertical"
            android:orientation="horizontal"
            android:visibility="visible" >

            <RadioButton
                android:id="@+id/rb_mainf_menu_index"
                style="@style/bottom_navagation_radioButton"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginRight="20dp"
                android:layout_weight="2"
                android:checked="true"
                android:drawableTop="@drawable/bottom_icon1_selected"
                android:text="@string/tabmain_index"
                android:textSize="16sp" />

            <RadioButton
                android:id="@+id/rb_mainf_menu_mine"
                style="@style/bottom_navagation_radioButton"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="20dp"
                android:layout_weight="2"
                android:drawableTop="@drawable/bottom_icon4_selected"
                android:text="@string/tabmain_mine"
                android:textSize="16sp" />
        </RadioGroup>

        <ImageView
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="-70dp"
            android:src="@drawable/tlogo" />
    </LinearLayout>

</TabHost>

@color/transparent:

<color name="transparent">#00000000</color>

样式bottom_navagation_radioButton：

 <!-- 底部导航菜单的样式 -->
    <style name="bottom_navagation_radioButton" parent="@android:style/Widget.CompoundButton.RadioButton">
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:textColor">@drawable/text_color_white_main</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">60dp</item>
        <item name="android:paddingBottom">3dp</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:textSize">12sp</item>
    </style>

text_color_white_main:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:color="@drawable/mainlight"/>
    <item android:state_selected="true" android:color="@drawable/mainlight"/>
    <item android:state_pressed="true" android:color="@drawable/mainlight"/>
    <item android:state_checked="false" android:color="@drawable/z_white"/>

</selector>

@drawable/mainlight:
@drawable/z_white

<drawable name="mainlight">#75fd9f</drawable>
<drawable name="z_white">#fff</drawable>

@drawable/bottom_icon1_selected:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/button_icon1_h" android:state_checked="true"/>
    <item android:drawable="@drawable/button_icon1_h" android:state_selected="true"/>
    <item android:drawable="@drawable/button_icon1_h" android:state_pressed="true"/>
    <item android:drawable="@drawable/button_icon1" android:state_checked="false"/>

</selector>

@drawable/button_icon1_h是相应的图片

图片资源下载

---

到此布局文件修改完毕

现在我们开始代码的编写

二、编写TabMainActivity

package com.android.daqsoft.emergent.project.tabmain;

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

import com.android.daqsoft.emergent.R;
import com.android.daqsoft.emergent.base.IApplication;
import com.android.daqsoft.emergent.project.index.Activity_Index;
import com.android.daqsoft.emergent.project.mine.Activity_Mine;
import com.android.daqsoft.emergent.utils.ToastUtils;

import butterknife.BindView;
import butterknife.ButterKnife;


public class Activity_TabMain extends TabActivity implements CompoundButton.OnCheckedChangeListener{


    @BindView(R.id.rb_mainf_menu_index)
    RadioButton mRbIndex;
    @BindView(R.id.rb_mainf_menu_mine)
    RadioButton mRbMine;
    @BindView(R.id.rg_mainf_menu)
    RadioGroup mRg;

    private Intent IndexIntent;
    private Intent MineIntent;
    public TabHost tabHost;
    private int mState = 0;
    long exitTime = 0;
    boolean isCommentVisible = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabmain);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        IApplication.mTabActivity = this;
        IApplication.mActivity = this;
        IApplication.addActivity(this);
        IndexIntent = new Intent(this, Activity_Index.class);
        MineIntent = new Intent(this, Activity_Mine.class);
        tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec("first").setIndicator("first").setContent(IndexIntent));
        tabHost.addTab(tabHost.newTabSpec("second").setIndicator("second").setContent(MineIntent));
        mRbIndex.setOnCheckedChangeListener(this);
        mRbMine.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            switch (buttonView.getId()) {
                case R.id.rb_mainf_menu_index:
                    switchState(0);
                    break;
                case R.id.rb_mainf_menu_mine:
                    switchState(1);
                    break;
                default:
                    break;
            }
        }

    }

    public void setCurrentTab(int index) {
        switchState(index);
    }

    private void switchState(int state) {
        if (mState == state) {
            return;
        } // else continue
        mState = state;
        mRbIndex.setChecked(false);
        mRbMine.setChecked(false);
        switch (mState) {
            case 0:
                mRbIndex.setChecked(true);
                tabHost.setCurrentTabByTag("first");
                break;
            case 1:
                mRbMine.setChecked(true);
                tabHost.setCurrentTabByTag("second");
                break;
            default:
                break;
        }
    }

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

    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        if (event.getKeyCode() == KeyEvent.KEYCODE_BACK
                && event.getAction() == KeyEvent.ACTION_DOWN) {
            if (isCommentVisible) {
                return super.dispatchKeyEvent(event);
            }
            if (System.currentTimeMillis() - exitTime > 2000) {
                ToastUtils.showLong("再按一次退出!");
                exitTime = System.currentTimeMillis();
            } else {
                IApplication.exit();
            }
            return true;
        }
        return super.dispatchKeyEvent(event);
    }
}