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

embedded/2024/11/19 5:14:00/

使用

然后,在 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"><itemandroid:id="@+id/navi_home"android:icon="@drawable/ic_home_black_24dp"android:title="首页"/><itemandroid:id="@+id/navi_order"android:icon="@drawable/ic_view_list_black_24dp"android:title="订单"/><itemandroid:id="@+id/navi_cart"android:icon="@drawable/ic_local_grocery_store_black_24dp"android:title="购物车"/><itemandroid:id="@+id/navi_mine"android:icon="@drawable/ic_person_black_24dp"android:title="我的"/>
</menu>

接着添加 BottomNavigationView 到布局中

<android.support.design.widget.BottomNavigationViewandroid: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的导航。下面是每一句代码的解释:

  1. 获取BottomNavigationView的实例:

    BottomNavigationView navView = findViewById(R.id.nav_view);

      这行代码通过findViewById方法获取布局文件中定义的BottomNavigationView的实例,并将其存储在变量navView中。

  2. 创建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(包括ToolbarCollapsingToolbarLayout)中。这里的R.id.navigation_home等是各个导航目的地的ID。

  3. 获取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,它是导航图的容器。

  4. 设置ActionBarNavController的关联:

    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的关联会导致这个异常。

  1. BottomNavigationViewNavController关联:

    NavigationUI.setupWithNavController(binding.navView, navController);

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

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

换色:

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

  1. 创建一个颜色选择器(selector

  1. 在你的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>
  1. 在布局文件中应用选择器

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

<com.google.android.material.bottomnavigation.BottomNavigationViewandroid: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颜色,而未选中的项则显示为黑色。你可以根据需要调整这些颜色值。

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

导航问题:

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

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: // 第四个菜单项// 不做任何操作或复用前一个Fragmentreturn 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"><fragmentandroid:id="@+id/navigation_home"android:name="com.example.fakeqqmusic.fragment.home.HomeFragment"android:label="@string/title_home"tools:layout="@layout/fragment_home" /><fragmentandroid:id="@+id/navigation_dashboard"android:name="com.example.fakeqqmusic.fragment.dashboard.DashboardFragment"android:label="@string/title_dashboard"tools:layout="@layout/fragment_dashboard" /><fragmentandroid:id="@+id/navigation_notifications"android:name="com.example.fakeqqmusic.fragment.notifications.NotificationsFragment"android:label="@string/title_notifications"tools:layout="@layout/fragment_notifications" />在这里添加新的fragment
</navigation>


http://www.ppmy.cn/embedded/138697.html

相关文章

java组件安全

Solr 默认端口&#xff1a;8983 命令执行&#xff08;cve-2019-17558&#xff09; 影响版本&#xff1a;5.0.0-8.3.1 https://github.com/jas502n/solr_rce 远程命令执行&#xff08;cve-2019-0193&#xff09; 影响版本&#xff1a;<8.2.0 条件&#xff1a;DataImport…

15分钟学 Go 第 59 天 :更高级的Go话题——接触微服务

第59天&#xff1a;更高级的Go话题——接触微服务 欢迎来到Go语言的高级主题学习。今天我们将深入探讨微服务架构&#xff0c;如何使用Go语言构建微服务&#xff0c;以及相关的最佳实践和工具。在这一节中&#xff0c;我们会通过示例代码、流程图和表格来帮助你理解&#xff0…

边缘提取函数 [OPENCV--2]

OPENCV中最常用的边界检测是CANNY函数 下面展示它的用法 通常输入一个灰度图像&#xff08;边界一般和颜色无关&#xff09;这样也可以简化运算cv::Canny(inmat , outmat , therhold1, therhold2 ) 第一个参数是输入的灰度图像&#xff0c;第二个是输出的图像这两个参数都是引用…

将答题成绩排行榜数据通过前端生成excel的方式实现导出下载功能

需求是这样的&#xff0c;在答题活动结束后&#xff0c;主办方想要导出排行榜成绩到excel&#xff0c;并能够在小程序里面打开查看、转发或下载保存到本地的功能。 我的实现思路大概是这样&#xff0c;先把排行榜数据按照得分排名顺序&#xff0c;处理成对应的JSON数据结构&…

React Native 全栈开发实战班 - 图片加载与优化

在移动应用中&#xff0c;图片加载与优化 是提升用户体验和减少资源消耗的重要环节。图片加载不当可能导致应用卡顿、内存泄漏甚至崩溃。本章节将介绍 React Native 中常用的图片加载方法&#xff0c;包括 Image 组件的使用、第三方图片加载库&#xff08;如 react-native-fast…

java 读取 有时需要sc.nextLine();读取换行符 有时不需要sc.nextLine();读取换行符 详解

在 Java 中&#xff0c;使用 Scanner 类读取输入时&#xff0c;换行符的处理行为取决于所用的读取方法。不同方法的工作原理会影响是否需要额外调用 sc.nextLine() 来清理缓冲区中的换行符。 核心问题 根本原因&#xff1a;Scanner 是基于输入流工作的&#xff0c;而换行符&am…

wordcloud库基本介绍

文章目录 wordcloud库概述wordcloud库的安装 wordcloud库使用说明配置对象参数 wordcloud应用实例实例: 政府工作报告词云 wordcloud库概述 wordcloud是优秀的词云展示第三方库 词云以词语为基本单位,更加直观和艺术地展示文本 wordcloud库的安装 (cmd命令行) pip install …

《InsCode AI IDE:编程新时代的引领者》

《InsCode AI IDE&#xff1a;编程新时代的引领者》 一、InsCode AI IDE 的诞生与亮相二、独特功能与优势&#xff08;一&#xff09;智能编程体验&#xff08;二&#xff09;多语言支持与功能迭代 三、实际应用与案例&#xff08;一&#xff09;游戏开发案例&#xff08;二&am…