Android 底部导航栏

z520250l

已于 2023-09-28 09:47:20 修改

阅读量254

点赞数 1

CC 4.0 BY-SA版权

文章标签： android-studio

于 2023-09-28 09:44:26 首次发布

本文链接：https://blog.youkuaiyun.com/z520250l/article/details/133376165

本文介绍了如何在Android应用中实现底部导航栏的设计，包括自定义布局、图标和文本状态的切换，提供了XML示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

底部导航栏（Bottom navigation）这种设计在很多 Android App 中都是随处可见的，如支付宝、微信、QQ等都使用了，它允许用户可以在多个顶级视图之间快速切换。已下尺寸是给自定义菜单参考使用

自定义底部导航栏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <LinearLayout
        android:id="@+id/home_container"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:paddingTop="6dp"
        android:paddingBottom="10dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/homeIcon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:scaleType="fitXY"
            android:src="@drawable/home_bottom_bar"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@drawable/text_style"
            android:text="首页" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/cart_container"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:paddingTop="6dp"
        android:paddingBottom="10dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:scaleType="centerCrop"
            android:src="@drawable/cart_bottom_bar"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@drawable/text_style"
            android:text="购物车" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/my_container"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:paddingTop="6dp"
        android:paddingBottom="10dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/my_bottom_bar"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@drawable/text_style"
            android:text="我的" />
    </LinearLayout>
</LinearLayout>

图片的不同状态配置selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cart" android:state_selected="false"/>
    <item android:drawable="@drawable/cart_select" android:state_selected="true"/>
</selector>

文字不同状态配置 text_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#1296db" android:state_selected="true" />
    <item android:color="#8a8a8a" android:state_selected="false" />
</selector>