使用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>