从0到1打造一款安卓app之8-使用BottomNavigationView+Navigation实现主页

从0到1打造一款安卓app之8-使用BottomNavigationView+Navigation实现主页

1.activity_main.xml 和 bottom_nav.xml和导航图

layout-> activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto">
  4. <data />
  5. <LinearLayout
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent"
  8. android:orientation="vertical">
  9. <androidx.fragment.app.FragmentContainerView
  10. android:id="@+id/nav_host_container"
  11. android:name="androidx.navigation.fragment.NavHostFragment"
  12. android:layout_width="match_parent"
  13. android:layout_height="0dp"
  14. android:layout_weight="1"
  15. app:defaultNavHost="true"
  16. app:navGraph="@navigation/nav_graph" />
  17. <com.google.android.material.bottomnavigation.BottomNavigationView
  18. android:id="@+id/bottom_nav"
  19. android:layout_width="match_parent"
  20. android:layout_height="wrap_content"
  21. android:background="@color/gray"
  22. app:menu="@menu/bottom_nav"
  23. app:itemActiveIndicatorStyle="@null"
  24. app:itemBackground="@null"
  25. app:itemRippleColor="@null"
  26. app:itemTextColor="@color/item_icon_color_selector"
  27. app:itemIconTint="@color/item_icon_color_selector"
  28. app:itemTextAppearanceActive="@style/text_appearance_active_style"
  29. app:itemTextAppearanceInactive="@style/text_appearance_inactive_style"
  30. app:labelVisibilityMode="labeled"/>
  31. </LinearLayout>
  32. </layout>

app:labelVisibilityMode="labeled" 总是显示图标和文字

app:itemTextAppearanceActive="@style/text_appearance_active_style" 文本选中时样式,一般用于定义文本字体大小

app:itemTextAppearanceInactive="@style/text_appearance_inactive_style" 文本未选中时样式,一般用于定义文本字体大小

app:itemTextColor="@color/item_icon_color_selector"文本颜色,通过selector配置选中和未选中时的颜色

app:itemIconTint="@color/item_icon_color_selector" 图标颜色,(好像不生效)

app:itemActiveIndicatorhttps://github.com/null" title="@null" >@null" 去掉选中后图标的背景

app:itemBackground="@null" 去掉图标和文本选中后的背景

app:itemRippleColor="@null" 去掉图标和文本选中后的水波纹

app:menu="@menu/bottom_nav" 设置图标和文本

app:itemIconSize="22dp"设置图标大小,默认 24dp

app:itemPaddingTop="6dp" app:itemPaddingBottom="6dp"设置上下内边距,默认 12dp,16dp

android:minHeight="50dp"设置高度,默认是80dp

android:background="@color/gray" 设置背景

menu -> bottom_nav.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item
  4. android:id="@+id/home"
  5. android:icon="@drawable/ic_message_selector"
  6. android:contentDescription="@string/home_message"
  7. android:title="@string/home_message" />
  8. <item
  9. android:id="@+id/information"
  10. android:icon="@drawable/ic_information_selector"
  11. android:contentDescription="@string/home_information"
  12. android:title="@string/home_information" />
  13. <item
  14. android:id="@+id/form"
  15. android:icon="@drawable/ic_micro_blog_selector"
  16. android:contentDescription="@string/home_micro_blog"
  17. android:title="@string/home_micro_blog" />
  18. <item
  19. android:id="@+id/discover"
  20. android:icon="@drawable/ic_discover_selector"
  21. android:contentDescription="@string/home_discover"
  22. android:title="@string/home_discover" />
  23. <item
  24. android:id="@+id/home_mine"
  25. android:icon="@drawable/ic_mine_selector"
  26. android:contentDescription="@string/home_mine"
  27. android:title="@string/home_mine" />
  28. </menu>

android:icon="@drawable/ic_message_selector"通过selector定义选中和未选中时的国标,实现不同的颜色和大小

导航图

  1. <navigation
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:id="@+id/nav_graph"
  5. app:startDestination="@+id/main_message_nav_graph">
  6. <include app:graph="@navigation/main_message_nav_graph"/>
  7. <include app:graph="@navigation/main_information_nav_graph"/>
  8. <include app:graph="@navigation/main_micro_blog_nav_graph"/>
  9. <include app:graph="@navigation/main_discover_nav_graph"/>
  10. <include app:graph="@navigation/main_mine_nav_graph"/>
  11. <fragment
  12. android:id="@+id/LoginScreen"
  13. android:name="xxx.yyy.zzz.ui.fragments.LoginFragment"
  14. android:label="@string/login">
  15. </fragment>
  16. </navigation>

2.设置未读数图标

  1. getOrCreateBadge(R.id.home) //只显示一个红点
  1. getOrCreateBadge(R.id.home).number = 10 //显示具体数字
  1. bottomNavigationMenuView.removeBadge(menu.itemId)//清除未读效果

3.BottomNavigationView和NavController的关联

NavigationBarView.setupWithNavController(navController: NavController)方法可以把BottomNavigationView和NavController关联起来,当点击相应的MenuItem时,会自动导航到相应的fragment,前提是 menu->bottom_nav下的item的id要和导航图里的一样。

  1. val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_container) as NavHostFragment
  2. navController = navHostFragment.navController.apply {
  3. mainBinding.bottomNav.setupWithNavController(this)
  4. }
  5. }

实现点击到二级页面时,隐藏BottomNavigationView

  1. addOnDestinationChangedListener { controller, destination, arguments ->
  2. mainBinding.bottomNav.visibility = if (mainNavIds.contains(destination.id)) View.VISIBLE else View.GONE

添加一级页面和二级页面的跳转动画

  1. val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_container) as? NavHostFragment
  2. val builder = NavOptions.Builder()
  3. builder.setEnterAnim(R.anim.slide_in_from_right)
  4. .setExitAnim(R.anim.slide_out_to_left)
  5. .setPopEnterAnim(R.anim.slide_in_from_left)
  6. .setPopExitAnim(R.anim.slide_out_to_right)
  7. navHostFragment?.navController?.navigate(R.id.LoginScreen,null,builder.build())

二级页面返回

  1. findNavController().navigateUp()

文章标签:

原文连接:https://juejin.cn/post/7104928822251749389

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?