上周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
不周之處盡請指正,如果喜歡可以打賞
附英文網站截屏