Bottom navigation 官方文档学习笔记

偏执的太偏执、 2022-04-03 18:20 262阅读 0赞

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

*  **[Bottom navigation ][Bottom navigation]**
 *  **[官方文档-需要翻墙][-]**
 *  **[官方 Meterial Design demos][Meterial Design demos]**

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

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

下面是练手项目中使用 `BottomNavigation` 的一张动图。  
![玩Android.gif][Android.gif]

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

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

![这就是 Bottom navigation][Bottom navigation 1]

项目刚开始我使用的是 **[BottomBar][]** 这个库，但是这个库的作者不更新了，推荐我们使用 `Bottom navigation` ,那就来学习一波官方的控件吧

> 在今天看到了一个还不错的第三方实现的底部导航栏控件 **[BottomNavigation][]**

#### 什么时候使用？ ####

*  顶级页面使用
 *  3 到 5 个页面使用
 *  仅限手机和平板电脑使用

#### 状态栏和虚拟栏 ####

*  Status bar 状态栏  
    在Android上，状态栏包含通知图标和系统图标。  
    ![image.png][]
 *  navigation bar 导航栏  
    Android中的Android导航栏包含设备导航控件：Back，Home和Overview。它还显示为Android 2.3或更早版本编写的应用程序菜单。  
    ![image.png][image.png 1]  
    ![image.png][image.png 2]

#### 添加红点、气泡 ####

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

*  红色气泡
 *  数字气泡
 *  具有最大数量限制的数字气泡  
    ![image.png][image.png 3]

#### 滑动 ####

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

*  上滑隐藏
 *  下滑显示

#### 页面切换 ####

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

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

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

#### 变色 ####

> 不建议底部色彩颜色太多

*  文本图标
 *  背景色

#### 设计规范 ####

![让设计师看看这张图.png][.png]

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

[Bottom navigation]: https://material.io/design/components/bottom-navigation.html#usage
[-]: https://developer.android.com/reference/android/support/design/widget/BottomNavigationView
[Meterial Design demos]: https://github.com/material-components/material-components-android
[Android.gif]: /images/20220403/ccc8635bec21432492712a250b0c4b5f.png
[Bottom navigation 1]: /images/20220403/4eac510cb9624629a1c277da399c7c07.png
[BottomBar]: https://github.com/roughike/BottomBar
[BottomNavigation]: https://github.com/Ashok-Varma/BottomNavigation
[image.png]: /images/20220403/edc7551564d94a61b2333177370357a7.png
[image.png 1]: /images/20220403/512202e5a72a4dbb8e094ac2c0f0a2fd.png
[image.png 2]: /images/20220403/4be430560a254d4eb4b2d0c70e6d6218.png
[image.png 3]: /images/20220403/71e2f16385874cc38b445ff6a1824482.png
[image.png 4]: /images/20220403/616a843d9666426e80ad4ba46e35da3c.png
[.png]: /images/20220403/6594a0caaa5547e6b968510adf544440.png