【Android】BottomNavigationView使用的一些小记忆

最新推荐文章于 2025-04-23 00:15:00 发布

愿相知

最新推荐文章于 2025-04-23 00:15:00 发布

阅读量903

点赞数 29

文章标签： android

本文链接：https://blog.youkuaiyun.com/2303_79296612/article/details/143839922

版权

使用

然后,在 menu 目录下定义 tab 的菜单,例如 res/menu/menu_navigation_tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navi_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="首页"/>
    
    <item
        android:id="@+id/navi_order"
        android:icon="@drawable/ic_view_list_black_24dp"
        android:title="订单"/>
    
    <item
        android:id="@+id/navi_cart"
        android:icon="@drawable/ic_local_grocery_store_black_24dp"
        android:title="购物车"/>
    
    <item
        android:id="@+id/navi_mine"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="我的"/>
</menu>

接着添加 BottomNavigationView 到布局中

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation_view"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/white"
    app:itemIconTint="@color/color_navigation_item"
    app:itemTextColor="@color/color_navigation_item"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/viewpager"
    app:menu="@menu/menu_navigation">
</android.support.design.widget.BottomNavigationView>

menu 指定tab 显示菜单；itemIconTint 和 itemTextColor 对应为指定 tab 的 icon 和文本颜色(通过定义 color ,指定不同选中状态的颜色)。

最后在对应的 activity 中对 BottomNavigationView 添加 item 选中监听，配合 ViewPager 实现界面切换，或者使用fragment

这段代码是在使用Android Jetpack的Navigation组件来设置一个带有BottomNavigationView的导航。下面是每一句代码的解释：

获取BottomNavigationView的实例：
```
BottomNavigationView navView = findViewById(R.id.nav_view);
```
这行代码通过findViewById方法获取布局文件中定义的BottomNavigationView的实例，并将其存储在变量navView中。
创建AppBarConfiguration：
```
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder( R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications, R.id.navigation_my) .build();
```
这行代码创建了一个AppBarConfiguration对象，它定义了哪些目的地（destinations）是顶级的，并且应该显示在AppBar（包括Toolbar和CollapsingToolbarLayout）中。这里的R.id.navigation_home等是各个导航目的地的ID。
获取NavController实例：
```
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment_activity_main);
```
这行代码通过Navigation.findNavController方法获取当前Activity中的NavController实例。R.id.nav_host_fragment_activity_main是导航主机Fragment（NavHostFragment）的ID，它是导航图的容器。
设置ActionBar与NavController的关联：
```
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
```
这行代码使用NavigationUI.setupActionBarWithNavController方法将ActionBar（如果你使用的是Toolbar作为ActionBar，那么就是Toolbar）与NavController关联起来。这样，当导航发生变化时，ActionBar的标题和Up按钮的状态也会相应更新。appBarConfiguration参数用于告诉NavController哪些目的地是顶级的。

IllegalStateException异常是因为您的Activity没有通过setSupportActionBar()方法设置ActionBar。在使用Navigation组件时，如果您的Activity没有设置ActionBar，尝试通过NavigationUI.setupActionBarWithNavController()设置导航控制器与ActionBar的关联会导致这个异常。

将BottomNavigationView与NavController关联：
```
NavigationUI.setupWithNavController(binding.navView, navController);
```
这行代码使用NavigationUI.setupWithNavController方法将BottomNavigationView与NavController关联起来。这样，当用户点击BottomNavigationView中的菜单项时，NavController会根据导航图处理导航请求，并且BottomNavigationView的选中状态也会相应更新。

这段代码的目的是设置一个基于BottomNavigationView的导航系统，使得用户可以通过点击BottomNavigationView中的不同菜单项来在不同的导航目的地之间切换，并且ActionBar（如果有的话）也会相应地更新。

换色：

要设置BottomNavigationView中点击之后的图标颜色，你可以通过使用ColorStateList来定义一个选择器（selector），并将其应用于BottomNavigationView的app:itemIconTint属性。以下是具体的步骤和代码示例：

创建一个颜色选择器（selector）：

在你的res/color目录下创建一个新的XML文件，例如bottom_nav_colors.xml，并定义两种状态（选中和未选中）的颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#63F7DE" android:state_checked="true" /> <!-- 选中状态的颜色 -->
    <item android:color="@android:color/black" android:state_checked="false"/> <!-- 未选中状态的颜色 -->
</selector>

在布局文件中应用选择器：

在你的BottomNavigationView布局中，使用上面创建的选择器来设置app:itemIconTint属性：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu"
    app:itemIconTint="@color/bottom_nav_colors" /> <!-- 应用选择器 -->

这样，当你的BottomNavigationView中的项被点击时，它们的图标颜色就会根据定义的选择器改变。选中状态的项将显示为#63F7DE颜色，而未选中的项则显示为黑色。你可以根据需要调整这些颜色值。

以上方法提供了一个基本的解决方案，你可以根据具体需求调整颜色值和状态。

导航问题：

如果您没有设置 BottomNavigationView 的 OnNavigationItemSelectedListener，点击 BottomNavigationView 的菜单项仍然可以触发导航，只要您通过 NavigationUI.setupWithNavController() 方法将 BottomNavigationView 和 NavController 关联起来。

NavigationUI.setupWithNavController() 方法会自动为 BottomNavigationView 设置一个监听器，当点击菜单项时，它将根据 NavController 的导航图（通常是 navigation.xml 文件）来处理导航逻辑。这意味着，即使您没有显式地设置 OnNavigationItemSelectedListener，只要您的导航图配置正确，点击 BottomNavigationView 的菜单项也可以触发对应的导航操作。

例如，如果您的 bottom_nav_menu.xml 定义了四个菜单项，并且您的 NavController 知道如何处理这些菜单项的导航（即在导航图中定义了对应的目的地和动作），那么点击这些菜单项将自动导航到正确的目的地。

BottomNavigationView navView = findViewById(R.id.nav_view);
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);

// 将BottomNavigationView与NavController关联
NavigationUI.setupWithNavController(navView, navController);

在上面的代码中，NavigationUI.setupWithNavController(navView, navController); 这一行代码会设置一个默认的监听器，使得点击 BottomNavigationView 的菜单项时，NavController 会根据配置的导航图自动导航到对应的目的地。

如果您没有为第四个菜单项配置对应的导航目的地，那么点击它将不会有任何反应，因为没有定义导航动作。如果您希望第四个菜单项复用前一个Fragment或者不进行任何操作，您仍然需要设置一个监听器来处理这个特定的情况，如之前所示的代码示例。

故而：有两种方法可以设置导航

1.在代码中直接设置

BottomNavigationView navView = findViewById(R.id.nav_view);
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);

navView.setOnNavigationItemSelectedListener(item -> {
    switch (item.getItemId()) {
        case R.id.navigation_home:
            navController.navigate(R.id.action_global_to_homeFragment);
            return true;
        case R.id.navigation_dashboard:
            navController.navigate(R.id.action_global_to_dashboardFragment);
            return true;
        case R.id.navigation_notifications:
            navController.navigate(R.id.action_global_to_notificationsFragment);
            return true;
        case R.id.navigation_my: // 第四个菜单项
            // 不做任何操作或复用前一个Fragment
            return true; // 返回true表示已处理点击事件
        default:
            return false;
    }
});

NavigationUI.setupWithNavController(navView, navController);

2.通过导航图

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mobile_navigation"
    app:startDestination="@+id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.example.fakeqqmusic.fragment.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.example.fakeqqmusic.fragment.dashboard.DashboardFragment"
        android:label="@string/title_dashboard"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.example.fakeqqmusic.fragment.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications" />
        
        在这里添加新的fragment
</navigation>