首先，在做底部導(dǎo)航欄界面之前，先來分析一下界面結(jié)構(gòu)，比如界面的基本布局，用到哪些基礎(chǔ)的控件。

界面分析.png

整體是一個(gè)縱向的線性布局（紫色框），自上到下放了一個(gè)線性布局（紅色框）和一個(gè)單選按鈕組（橙色框）。單選按鈕組類似于一個(gè)橫向的線性布局，從左到右放了四個(gè)單選按鈕。
分析完后開始寫代碼，
因?yàn)槲覀兊膯芜x按鈕是自定義的樣式，所以先做下面這些準(zhǔn)備。
第一，準(zhǔn)備素材資源。
把圖片資源放入res/drawable/文件夾下。ctrl+c，選中res/drawable 文件夾ctrl+v
第二，準(zhǔn)備樣式資源。
把寫好的selector_nav_course.xml,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/ic_course_selected"/>
    <item android:drawable="@mipmap/ic_course"/>
</selector>

selector_nav_excise.xml,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/ic_exercise_selected"/>
    <item android:drawable="@mipmap/ic_exercise"/>
</selector>

selector_nav_massage.xml,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/ic_message_selected"/>
    <item android:drawable="@mipmap/ic_message"/>
</selector>

selector_nav_my.xml,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/ic_my_selected"/>
    <item android:drawable="@mipmap/ic_my"/>
</selector>

selector_nav_text.xml,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorBlue"/>
    <item android:color="@color/colorGray"/>
</selector>

如果你selector_nav_text.xml文件中用到的顏色沒有定義，請?jiān)趓es/value/color.xml中定義

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="colorGray">#2F2F2F</color>
    <color name="colorBlue">#1E6D96</color>
</resources>

5個(gè)文件放在res/drawable/文件夾下。就像這樣

6.png

第三，資源準(zhǔn)備完畢，自定義按鈕樣式。在res/values/style.xml中寫入如下代碼

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>
<!--    底部菜單按鈕的樣式-->
    <style name="TabMenuItem">
<!--        將默認(rèn)的按鈕樣式設(shè)為空，即不使用默認(rèn)的樣式-->
        <item name="android:button">@null</item>
<!--        自定義按鈕樣式 name后的內(nèi)容為屬性設(shè)置樣式的名稱通過設(shè)置<item></item>之間的內(nèi)容設(shè)置自定義的樣式的屬性值-->
        <item name="android:layout_weight">1</item>
        <item name="android:layout_width">8dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@drawable/selector_nav_text</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingTop">3dp</item>
    </style>

</resources>

這種寫法是引用了下面的知識點(diǎn)，可以回顧一下

樣式.png

主題.png

終于最后一步啦?。?！

1.png

2.png

在res/layout/activity_tab_bar.xml中寫入如下代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".HomeActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#00ff00"
        android:orientation="vertical"
        >
     <FrameLayout
         android:id="@+id/main_body"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:background="@color/colorBlue">

     </FrameLayout>
    </LinearLayout>
    <RadioGroup
        android:id="@+id/btn_group"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="#F2F2F2"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/btn_course"
            style="@style/TabMenuItem"
            android:drawableTop="@drawable/selector_nav_course"
            android:text="課程"
            />
        <RadioButton
            android:id="@+id/btn_execise"
            style="@style/TabMenuItem"
            android:drawableTop="@drawable/selector_nav_execise"
                android:text="習(xí)題"
            />
        <RadioButton
            android:id="@+id/btn_message"
            style="@style/TabMenuItem"
            android:drawableTop="@drawable/selector_nav_message"
            android:text="咨詢"
            />
        <RadioButton
            android:id="@+id/btn_my"
            style="@style/TabMenuItem"
            android:drawableTop="@drawable/selector_nav_my"
            android:checked="true"
            android:text="我"
            />
    </RadioGroup>
</LinearLayout>

需要注意的是第一個(gè)LinerLayout的orientation屬性是縱向的，RadioGroup的orientation屬性是橫向的。當(dāng)?shù)诙€(gè)LinerLayout的高度設(shè)為0dp,RadioGroup的高度設(shè)為指定高度是可以實(shí)現(xiàn)RadioGroup被LinerLayout頂在最下方的效果。
就做好了。