BottomNavigationView的使用小结

最新推荐文章于 2025-05-31 12:36:23 发布

一个在编程道路上渐行渐远的娃

最新推荐文章于 2025-05-31 12:36:23 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： BottomNavigationView

本文链接：https://blog.csdn.net/Marvinhq/article/details/84727637

Android 专栏收录该内容

86 篇文章

订阅专栏

本文详细介绍如何在Android应用中使用BottomNavigationView组件，包括添加依赖、XML布局配置、设置样式及响应事件的方法，解决超过三个Item显示效果偏移的问题。

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

本文首次发表蜗牛魔方
转载请注明
demo地址

1. 添加依赖

 implementation 'com.android.support:design:28.0.0'

2. xml 写法

<android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:labelVisibilityMode="labeled"
            app:itemIconTint="@color/nav_state_list"
            app:itemTextColor="@color/nav_state_list"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/container"
            app:menu="@menu/navigation">

BottomNavigationView 中的Item 超过三个显示效果会有偏移，如果设置了文字和图片，那么只有被选中的显示文字或图片，其他的只显示图片，如果设置的Item超过5个，那么会直接报错。

app:labelVisibilityMode="labeled" 设置显示文字和图片。
 app:itemIconTint="@color/nav_state_list     app:itemTextColor="@color/nav_state_list" 	
 设置Item中文字和图片的选中和未选中的颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Item checked -->
    <item android:color="@color/colorAccent" android:state_checked="true" />
    <!-- Item pressed -->
    <item android:color="@color/colorAccent" android:state_pressed="true" />
    <!-- Item default -->
    <item android:color="@color/colorPrimaryDark" />
</selector>

设置Item app:menu="@menu/navigation" 布局文件：

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

    <item
        android:id="@+id/nav_find"
        android:icon="@drawable/ic_nav_find_black_24dp"
        android:title="@string/nav_find" />

    <item
        android:id="@+id/nav_video"
        android:icon="@drawable/ic_nav_video_black_24dp"
        android:checked="true"
        android:title="@string/nav_video" />

    <item
        android:id="@+id/nav_my"
        android:icon="@drawable/ic_nav_my_black_24dp"
        android:title="@string/nav_my" />

    <item
        android:id="@+id/nav_friend"
        android:icon="@drawable/ic_nav_friend_black_24dp"
        android:title="@string/nav_friend" />

    <item
        android:id="@+id/nav_account"
        android:icon="@drawable/ic_nav_person_black_24dp"
        app:showAsAction="always"
        android:title="@string/nav_account" />

</menu>

注册点击事件

 mBinding.includeMainContent.bottomNavigationView.setOnNavigationItemSelectedListener(menuItem -> {

            switch (menuItem.getItemId()) {
                case R.id.nav_find:
                    replaceFragment(lastShowFragment,0);
                    ToastUtil.INSTANCE.show(getContext(), "find");

                    break;
                case R.id.nav_video:
                    replaceFragment(lastShowFragment,1);
                    break;
                case R.id.nav_my:
                    replaceFragment(lastShowFragment,2);
                    ToastUtil.INSTANCE.show(getContext(), "my");
                    break;
                case R.id.nav_friend:
                    replaceFragment(lastShowFragment,3);
                    ToastUtil.INSTANCE.show(getContext(), "friend");
                    break;
                case R.id.nav_account:
                    replaceFragment(lastShowFragment,4);
                    ToastUtil.INSTANCE.show(getContext(), "account");
                    break;
                default:
                    ToastUtil.INSTANCE.show(getContext(), "find");
                    break;
            }
            **return true;**
        });

TIPS: OnNavigationItemSelected方法的返回值是一个boolean 返回false 点击item 不会被选中，返回true 点击Item 会被选中。