从零开始搭建app—首页导航栏实现（一）

最新推荐文章于 2025-07-09 15:11:49 发布

qq_30686255

最新推荐文章于 2025-07-09 15:11:49 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：从零打造一个简单app 文章标签： android开发应用导航 android studio

本文链接：https://blog.youkuaiyun.com/qq_30686255/article/details/78289932

从零打造一个简单app 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Android应用中实现底部导航栏的方法，通过使用RadioGroup和RadioButton组件结合样式和选择器，实现了导航栏的选中状态变化效果。

要实现的效果

目前项目结构

说明：

目前计划应用由一个HomeActivity加载三个Fragment(HomeFragment,MessageFragment,MineFragment)做切换作为主体.

BaseFragement和BaseActivity为基类，为后期配置一些Activity和Fragemnt的共有属性做准备.

MyApplication为app一启动时，做一些初始操作。

首页底部导航栏实现

底部导航栏由一个横向排布radiogroup和三个radiobutton组成，布局如下。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lulu.myvedio.activity.HomeActivity">


    <RadioGroup
        android:id="@+id/rbg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        <RadioButton
            android:id="@+id/home"
            style="@style/home_rb_style"
            android:drawableTop="@drawable/select_mian"
            android:text="首页" />

        <RadioButton
            android:id="@+id/message"
            style="@style/home_rb_style"
            android:drawableTop="@drawable/select_message"
            android:text="信息" />

        <RadioButton
            android:id="@+id/mine"
            style="@style/home_rb_style"
            android:drawableTop="@drawable/select_mine"
            android:text="我的" />

    </RadioGroup>
</RelativeLayout>

由于三个radiobutton的效果都一致，都为选中变颜色，所以给其设置了统一的style。

在values文件夹下的styles文件下创建一个style

<style name="home_rb_style">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_weight">1</item>
    <item name="android:button">@null</item>
    <item name="android:drawablePadding">3dp</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@color/select_rb_text</item>
    <item name="android:background">@color/white</item>
    <item name="android:paddingTop">4dp</item>
</style>

注意这里图片和文字都有个选中与不选中的差别。

图片的实现方式是准备两张图片，右击res的drawable文件夹，选择new－drawable resource file 选selector命名select_mian

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

    <item android:drawable="@mipmap/application_2xx" android:state_checked="true" />
    <item android:drawable="@mipmap/application_xx" />
</selector>

文字的实现方式，在res下创建一个color文件夹右击选择new － color resource file命名select_rb_text

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

注意：设置radiobutton的默认选中，不能直接在代码里面写，不然会一直选中不能切换。可以给radiobutton写一个id，然后实例化他，在代码里设置默认选中

private void initView() {
    rbg = ((RadioGroup) findViewById(R.id.rbg));
    rbg.setOnCheckedChangeListener(this);
    rb_home = ((RadioButton) findViewById(R.id.home));
    rb_home.setChecked(true);//设置默认选中
}