RadioButton+Fragment實作底部導航欄

前言

在寫這個Demo的時候，是為了複習下Fragment的基礎用法。不過就單純地寫Fragment又好像有點單一，于是我就想通過Fragment+RadioButton實作一個簡單的底部導航欄。因為這樣的布局在很多項目中都已經常用的。而且平時自己在學習其他技術點的時候，敲代碼寫Demo，也是用這樣的基礎布局來練習，一是由于Fragment的

輕量級，響應速度比較快，二是可以通過比較不同的Fragment，來展現你要學習的技術點的效果，這一點還是比較友善的。

Fragment的使用

Fragment的使用？現在以我的水準肯定是寫得不如其他人好，而且随便百度，google一下資源，也是一大把的。對于還不太熟悉Fragment的使用，可以看看鴻洋大神寫的這篇部落格 Android Fragment 你應該知道的一切

coding time

• 把主布局搞好

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.pyz.navigationbar.MainActivity">

    <FrameLayout
        android:id="@+id/main_fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>


    <RadioGroup
        android:id="@+id/navigation_btn"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/btn1"
            android:text="Fragmnet1"
            android:gravity="center"
            android:button="@null"
            android:checked="true"
            android:background="@drawable/navigation_bar_selector"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

        <RadioButton
            android:id="@+id/btn2"
            android:text="Fragmnet2"
            android:gravity="center"
            android:button="@null"
            android:background="@drawable/navigation_bar_selector"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

        <RadioButton
            android:id="@+id/btn3"
            android:text="Fragmnet3"
            android:gravity="center"
            android:button="@null"
            android:layout_width="0dp"
            android:background="@drawable/navigation_bar_selector"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

        <RadioButton
            android:id="@+id/btn4"
            android:text="Fragmnet4"
            android:gravity="center"
            android:button="@null"
            android:layout_width="0dp"
            android:background="@drawable/navigation_bar_selector"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

    </RadioGroup>
</LinearLayout>
           

• 在drawable檔案下建立RadioButton的樣式檔案(這裡我直接用顔色區分，可以根據情況選擇用一些圖檔上去的)

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

    <item android:drawable="@color/colorAccent" android:state_checked="true"/>
    <item android:drawable="@color/colorAccent" android:state_pressed="true"/>
    <item android:drawable="@color/colorAccent" android:state_selected="true"/>
    <item android:drawable="@color/colorWhite"/>

</selector>
           

• 建立4個Fragment（這個根據自己情況建立吧），然後建立相應的布局。（嗯，介個很簡單d）
• 在MainActivity中執行個體化各個Fragment和RadioButton和RadioParent的控件，設定好監聽器。在這裡我定義了一個switchFragment（）的方法，判斷切換的Fragment是否已經添加過，避免每一次切換Fragment的時候都調用add（）或者replace()，而是通過hide（）和show（），減少頻繁地建立新的執行個體。

private void switchFragment(Fragment fragment) {
        //判斷目前顯示的Fragment是不是切換的Fragment
        if(mFragment != fragment) {
            //判斷切換的Fragment是否已經添加過
            if (!fragment.isAdded()) {
                //如果沒有，則先把目前的Fragment隐藏，把切換的Fragment添加上
                getSupportFragmentManager().beginTransaction().hide(mFragment)
                        .add(R.id.main_fragment,fragment).commit();
            } else {
                //如果已經添加過，則先把目前的Fragment隐藏，把切換的Fragment顯示出來
                getSupportFragmentManager().beginTransaction().hide(mFragment).show(fragment).commit();
            }
            mFragment = fragment;
        }
    }
           

• 最後的效果圖是這樣滴

總結

這個小案例非常的簡單，代碼上也沒有什麼難點。用來實作底部導航欄還是一個不錯的選擇，這樣的布局也是非常友善于平時練習敲demo，我之前寫了一個基于MPCharts（一個開源的圖表項目）的練習Demo也是用這樣的布局。

最後給出這個案例的github位址吧。NavigationBar

小弟不才，還望大家多多指教