使用RadioButton模拟底部导航栏

关注

原创最新推荐文章于 2026-09-04 16:16:14 发布 1.1w 阅读 AI 写同款· GEO 优化 ›

Android进阶之路 - 通过RadioGroup + RadioButton 实现底部导航栏 阅读与使用此文知识，仅需5-20分钟大多项目之初，我们都需要搭建UI界面，而底部导航的承载效果是不可或缺的。在我认知中有三种方式: 1.Tablayout+ViewPager+Fragment 2.LinearLayout+TextView+ImageView 3.RadioGroup+RadioButtonEffect：注意点：Xml属性Icon位于文本上方//请注意图片大小，如果图片太大，............ 阅读详情

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