上周Google更新了Android应用设计指导规范。新的规范主要是建议Android应用的开发者更多的使用Material Design对象库来让应用看的更加简洁。而最新的对象库中新增的一个亮点就是此前已经在Google Photos和Google+中出现过的「Bottom Navigation」组件,也就是我们在iOS应用中经常见到的底部Tab导航栏。
那么我们今天就来了解一下Bottom navigation组件吧
使用方法
底部导航提供了一个应用程序的顶层视图之间快速导航。它主要设计用于在移动设备上使用。在大一点的设备,比如平板,桌面系统上,可以实现通过使用侧边栏导航类似的效果。例如,在默认情况下,使用紧凑型的显示导航图标。
使用注意事项
底部导航栏应该在以下的情况使用动在顶层的导航需要
有类似重要性的三至五个条目(或者在程序的任意地方都需要显示)
底部的导航栏不能超过六个条目,更不能让他滑动显示
当导航栏的条目有焦点的时候显示当前条目的图标和文字
如果只有三个条目的话同时显示图标和文字
当底部导航栏有四至五个条目的时候展示动态展示图标和文字(获取焦点的时候展示图标和文字,没有焦点只展示图标)
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
不周之处尽请指正,如果喜欢可以打赏
附英文网站截屏