Bottom navigation 官方文档学习笔记

推荐直接查看以下链接的文档介绍。

• Bottom navigation

• 官方文档-需要翻墙

• 官方 Meterial Design demos

================== 本文开始 ========================

该控件在实际项目拓展性不高可以使用。否则还是自己实现吧~

下面是练手项目中使用 BottomNavigation 的一张动图。

玩Android.gif

实现了 一个 Activity + 多个Fragment沉浸式状态栏，同时Bottom Navigation 和 Toolbar 在内容滑动的时候也跟随滑动显示显示和隐藏。

从上面的截图可以看出，底部导航栏有些不一样，而这个底部导航栏就是 Android 5.0 之后推出的 Bottom navigation 控件。下面一张图是宣传图。

image.png

navigation bar 导航栏
Android中的Android导航栏包含设备导航控件：Back，Home和Overview。它还显示为Android 2.3或更早版本编写的应用程序菜单。

image.png
image.png

添加红点、气泡

看到效果但是没有实现的 API ，感觉有点坑。

• 红色气泡
• 数字气泡

• 具有最大数量限制的数字气泡

  
  image.png

滑动

这个滑动效果给我找的也是很辛苦，最后在 Github material-components-android 中的 demos 目录下边找到，而且只有滑动隐藏底部图标导航栏的，但是 Toolbar 标题栏是没有跟随滑动隐藏的。动图中能滑动隐藏，我是做个一个位移动画。

• 上滑隐藏
• 下滑显示

页面切换

• 避免页面横向切换（像 ViewPager 控件的默认点击切换动画）
• 应该使用渐变切换

页面切换 改变 文本和 icon 颜色

• 使用应用程序的主要颜色来指示点击的页面
• 避免使用不同的彩色图标和文字标签。
• 如果底部导航栏已着色，请将当前操作的图标和文本标签设置为黑色或白色。否则在彩色底部导航栏上放置彩色图标和文本时，请确保清晰的颜色对比。
  image.png

变色

不建议底部色彩颜色太多

• 文本图标
• 背景色

设计规范

让设计师看看这张图.png

================== 本文结束 ========================
期待你的留言讨论~