Android 主界面多个Tab栏的实现

前言

现在比较流行的就是类似qq或者微信上的布局，都是在底部都几个Tab栏，点击不同的Tab栏可以切换不同的页面，大概的实现原理就是使用RadioGroup包裹几个RadioButton来实现的，而不同的页面展示则是放置一个FrameLayout来实现的。

效果图：

1.代码布局：

顶部设置了标题，使用的是现在都在用的toolBar，可以在切换不同页面的时候设置不同的标题。然后下面放了一个Radiogroup，里面包裹了四个RadioButton实现不同页面的切换。里面的View控件是设置的水平的分割线，使页面好看点

"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    "http://schemas.android.com/apk/res-auto"
        android:id="@+id/index_title_tb"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/colorPrimaryDark"
        toolbar:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        toolbar:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        "@+id/index_title_tv"
            style="@style/title_text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="@color/white"
            android:text="我是标题"/>
    </android.support.v7.widget.Toolbar>


    "
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/index_title_tb"
        android:background="@drawable/common_horizontal_divider"/>
    @+id/index_bottom_navigation_rg"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="horizontal">

        @+id/index_tab_a_rb"
            style="@style/Index_tab_style"
            android:drawableTop="@drawable/index_equipment_tab_sel"
            android:text="@string/index_tab_equipment"/>

        @+id/index_tab_b_rb"
            style="@style/Index_tab_style"
            android:drawableTop="@drawable/index_bill_tab_sel"
            android:text="@string/index_tab_bill"/>

        @+id/index_tab_c_rb"
            style="@style/Index_tab_style"
            android:drawableTop="@drawable/index_contract_tab_sel"
            android:text="@string/index_tab_contract"/>


        @+id/index_tab_d_rb"
            style="@style/Index_tab_style"
            android:drawableTop="@drawable/index_setting_tab_sel"
            android:text="@string/index_tab_setting"/>

    

    @+id/index_bottom_divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@id/index_bottom_navigation_rg"
        android:background="@drawable/common_horizontal_divider"/>

    @+id/index_content_fl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/index_bottom_divider"
        android:layout_below="@id/index_title_divider"
        android:background="@color/white"/>

2.Java代码控制不同页面切换

package com.css.demo;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.TextView;

import com.css.demo.ui.index.TabA;
import com.css.demo.ui.index.TabB;
import com.css.demo.ui.index.TabC;
import com.css.demo.ui.index.TabD;
import com.css.demo.utils.L;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * Created by cssch on 2016/10/11.
 */

public class IndexActivity extends BaseIndexActivity {

    @Bind(R.id.index_tab_a_rb)//第一页tab按钮
            RadioButton indexTabARb;

    @Bind(R.id.index_tab_b_rb)//第二页tab按钮
            RadioButton indexTabBRb;

    @Bind(R.id.index_tab_c_rb)//第三页tab按钮
            RadioButton indexTabCRb;

    @Bind(R.id.index_tab_d_rb)//第四页tab按钮
            RadioButton indexTabDRb;

    @Bind(R.id.index_title_tv)//标题
            TextView indexTitleTv;

    private static final int TABA = 1;//第一页标记
    private static final int TABB = 2;//第二页标记
    private static final int TABC = 3;//第三页标记
    private static final int TABD = 4;//第四页标记

    //这里的是四个Fragment的说明
    private TabA tabA;//第一页
    private TabB tabB;//第二页
    private TabC tabC;//第三页
    private TabD tabD;//第四页

    private Context context;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        L.d("myname".toString());
        setContentView(R.layout.index);
        ButterKnife.bind(this);
        context = IndexActivity.this;
        //设置四个Tab栏的监听
        indexTabARb.setOnCheckedChangeListener(new OnNaviCheckChangeListener(TABA));
        indexTabBRb.setOnCheckedChangeListener(new OnNaviCheckChangeListener(TABB));
        indexTabCRb.setOnCheckedChangeListener(new OnNaviCheckChangeListener(TABC));
        indexTabDRb.setOnCheckedChangeListener(new OnNaviCheckChangeListener(TABD));
        //设置默认的显示页面为b页面
        indexTabBRb.setChecked(true);
    }

    /**
     * 监听事件的实现
     */
    class OnNaviCheckChangeListener implements CompoundButton.OnCheckedChangeListener {

        private int position;

        public OnNaviCheckChangeListener(int position) {

            this.position = position;
        }

        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

            if (isChecked) {

                changeTab(position);
            }
        }
    }

    /**
     * @param position 切换tab
     */
    public void changeTab(int position) {

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        hideFragments(transaction);
        switch (position) {
            case TABA:
                changeToTabA(transaction);
                break;
            case TABB:
                changeToTabB(transaction);
                break;
            case TABC:
                changeToTabC(transaction);
                break;
            case TABD:
                changeToTabD(transaction);
                break;
            default:
                changeToTabA(transaction);
                break;
        }
        transaction.commitAllowingStateLoss();
    }

    /**
     * 跳转到tabA
     *
     * @param transaction
     */
    private void changeToTabA(FragmentTransaction transaction) {
        indexTitleTv.setText("TabA页面");
        if (tabA == null) {
            tabA = new TabA();
            transaction.add(R.id.index_content_fl, tabA);
        } else {
            transaction.show(tabA);
        }
    }

    /**
     * 跳转到tabB
     *
     * @param transaction
     */
    private void changeToTabB(FragmentTransaction transaction) {
        indexTitleTv.setText("TabB页面");
        if (tabB == null) {
            tabB = new TabB();
            transaction.add(R.id.index_content_fl, tabB);
        } else {
            transaction.show(tabB);
        }
    }

    /**
     * 跳转到tabC
     *
     * @param transaction
     */
    private void changeToTabC(FragmentTransaction transaction) {
        indexTitleTv.setText("TabC页面");
        if (tabC == null) {
            tabC = new TabC();
            transaction.add(R.id.index_content_fl, tabC);
        } else {
            transaction.show(tabC);
        }
    }

    /**
     * 跳转到tabD
     *
     * @param transaction
     */
    private void changeToTabD(FragmentTransaction transaction) {
        indexTitleTv.setText("TabD页面");
        if (tabD == null) {
            tabD = new TabD();
            transaction.add(R.id.index_content_fl, tabD);
        } else {
            transaction.show(tabD);
        }
    }


    /**
     * @param transaction 隐藏所有fragment
     */
    private void hideFragments(FragmentTransaction transaction) {

        if (tabA != null && !tabA.isHidden()) {
            transaction.hide(tabA);
        }
        if (tabB != null && !tabB.isHidden()) {
            transaction.hide(tabB);
        }
        if (tabC != null && !tabC.isHidden()) {
            transaction.hide(tabC);
        }
        if (tabD != null && !tabD.isHidden()) {
            transaction.hide(tabD);
        }
    }

}

总结

总体来说还是挺简单的，当然还可以使用其他的方式进行布局，有兴趣的朋友可以研究下。如果想用这种方式的话，你只用把里面的资源文件改成自己使用的资源文件就可以在自己的项目中使用了。当然，我这个命名还不是很规范，大家可以规范下命名。

特此记录！