Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.由于底部导航操作显示为图标,它应该使用与其内容相符合的图标。根据以下条件来为每个操作设定样式:
Tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color
用应用的主色调给底部导航操作(包括图标与当前标签文字)上色。
如果底部导航条已着色,将底部导航操作图标和文字设置为白色或黑色。
文本标签为导航图标提供简明的定义。应避免使用较长的文本而造成文本被裁截或遮挡。
点击底部导航图标将直接跳转至相关的界面或刷新当前的界面。
每一个底部导航图标都必须指向一个目的,不应打开主菜单或跳转至其他窗口。
每一个底部导航图标都会随着界面的滚动而动态的显示或隐藏。
在内容区域使用滑动手势不能进行界面的跳转。在当前界面与未激活界面的跳转过程中使用淡入淡出的动画效果。
用底部导航栏的总长度除以图标的个数,计算出每个图标的宽度。也就是说,要使得每个底部导航图标占有最充足的空间。
宽度的最大及最小值(这些数据包含边距):
高度:56dp
图标:24*24dp
![104dp min width for smaller views(/images/bottombar2/10.png)
内容对齐:
文本与图标需居中且水平。
边距:
文本标签:
用底部导航栏的总长度除以图标的个数,计算出每个图标的宽度。
宽度的最大及最小值(这些数据包含边距):当前界面
未激活界面
高度:
56dp
图标:24*24 dp
内容对齐:文本与图标需居中且水平。
边距:
文本标签:常规 Roboto 字体: 14sp(当前界面)
由于 snackbars 的层级高度(elevation) 为6dp,而 navigation bar 的层级高度为 8dp,所以 snackbars 显示在 navigation bar 的后面。而 Bottom sheets, navigation drawers 和 keyboards 都显示在 navigation bar 的前面,完全覆盖 navigation bar 。