Android--使用RadioButton模拟底部导航栏

使用RadioButton模拟底部导航栏

1、主布局文件main.xml

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

<!—设置底部导航栏 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

<!—引用底部导航栏的布局文件 -->
        <include
            android:id="@+id/footbar_layout_ly"
            layout="@layout/footbar_layout" />
    </LinearLayout>
</RelativeLayout>

2、底部导航栏的布局文件，  footbar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="60dip"
    android:background="@drawable/bottom_bg"
    android:orientation="horizontal" >

    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <RadioButton
            style="@style/navigation_bottom_radio"
            android:drawableTop="@drawable/bottom_home_d"
            android:text="@string/home_tv" />
        <RadioButton
            style="@style/navigation_bottom_radio"
            android:drawableTop="@drawable/bottom_looks_d"
            android:text="@string/style_tv" />
        <RadioButton
            style="@style/navigation_bottom_radio"
            android:drawableTop="@drawable/bottom_cam"
            android:gravity="center"
            android:text="拍照"/>
        <RadioButton
            style="@style/navigation_bottom_radio"
            android:drawableTop="@drawable/bottom_shopping_d"
            android:text="@string/shopping_tv" />
        <RadioButton
            style="@style/navigation_bottom_radio"
            android:drawableTop="@drawable/bottom_show_d"
            android:text="@string/show_tv" />
    </RadioGroup>

</LinearLayout>

3、在res/value/styles.xml中添加 navigation_bottom_radio名称的布局

<resources>
    <style name="navigation_bottom_radio">

        <!-- 内部组件的排列 -->
        <item name="android:gravity">center_horizontal</item>

        <!-- 背景样式 -->
        <item name="android:background">@drawable/style_navigation_radio</item>

        <!-- 宽度 -->
        <item name="android:layout_width">fill_parent</item>

        <!-- 高度 -->
        <item name="android:layout_height">wrap_content</item>

        <!-- 设置RadioButton的原来图片为空 -->
        <item name="android:button">@null</item>

        <!-- 与其他组件宽度占相同比重 -->
        <item name="android:layout_weight">1.0</item>

        <!-- 底部的空隙 -->
        <item name="android:paddingBottom">2.0dip</item>

        <!-- 顶部的空隙 -->
        <item name="android:paddingTop">2.0dip</item>

        <!-- 文字的大小 -->
        <item name="android:textSize">11dip</item>

        <!-- 文字的颜色 -->
        <item name="android:textColor">@color/white</item>

    </style>
</resources>

4、在res\drawable目录下添加每个Radio的背景的样式style_navigation_radio.xml

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