上周Google更新了Android应用设计指导规范。新的规范主要是建议Android应用的开发者更多的使用Material Design对象库来让应用看的更加简洁。而最新的对象库中新增的一个亮点就是此前已经在Google Photos和Google+中出现过的「Bottom Navigation」组件，也就是我们在iOS应用中经常见到的底部Tab导航栏。

那么我们今天就来了解一下Bottom navigation组件吧

使用方法

底部导航提供了一个应用程序的顶层视图之间快速导航。它主要设计用于在移动设备上使用。在大一点的设备，比如平板，桌面系统上，可以实现通过使用侧边栏导航类似的效果。例如，在默认情况下，使用紧凑型的显示导航图标。

移动设备上的底部导航栏 在大屏设备上的左侧导航栏样式, 如在桌面设备或者平板

使用注意事项

底部导航栏应该在以下的情况使用动在顶层的导航需要

有类似重要性的三至五个条目（或者在程序的任意地方都需要显示）

底部的导航栏不能超过六个条目，更不能让他滑动显示

当导航栏的条目有焦点的时候显示当前条目的图标和文字

如果只有三个条目的话同时显示图标和文字

当底部导航栏有四至五个条目的时候展示动态展示图标和文字（获取焦点的时候展示图标和文字，没有焦点只展示图标）

使用程序的Primary Color来展示，取得焦点的条目 如果底部的导航栏被选中了把条目的颜色和图标设置成白色或者黑色 底部的标签要剪短

Behavior

如果你了解Design Library那么你一定了解behavior

那么Bottom navigation有什么behavior呢我们通过图片简单了解一下

Bottom navigation样式以及设计细节

最小宽度和最大宽度(包括padding):

最大值: 168dp

最小值: 120dp（大的View）, 104dp （比较小的View）

高度:56dp

图标:24 x 24dp

内容对齐方式:

文本和图标水平居中

Padding:

6dp 图标上方(获取焦点), 8dp 图标上方 (没有获取焦点)

10dp 文字底下

12dp 文字左右

文字标签:

正常的图片14sp (获取焦点)

正常的图片12sp (没有获取焦点)

阴影

因为snackbars 有一个 (6dp) 的阴影,snackbar在bottom navigation bar 后边显示(8dp elevation).

Bottom sheets, navigation drawers 和键盘显示的时候在bottom navigation bar的上部, 暂时覆盖他

整体样式

https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

不周之处尽请指正，如果喜欢可以打赏

---

附英文网站截屏