上周Google更新了Android應(yīng)用設(shè)計(jì)指導(dǎo)規(guī)范。新的規(guī)范主要是建議Android應(yīng)用的開發(fā)者更多的使用Material Design對(duì)象庫(kù)來(lái)讓應(yīng)用看的更加簡(jiǎn)潔。而最新的對(duì)象庫(kù)中新增的一個(gè)亮點(diǎn)就是此前已經(jīng)在Google Photos和Google+中出現(xiàn)過的「Bottom Navigation」組件,也就是我們?cè)趇OS應(yīng)用中經(jīng)常見到的底部Tab導(dǎo)航欄。
那么我們今天就來(lái)了解一下Bottom navigation組件吧
使用方法
底部導(dǎo)航提供了一個(gè)應(yīng)用程序的頂層視圖之間快速導(dǎo)航。它主要設(shè)計(jì)用于在移動(dòng)設(shè)備上使用。在大一點(diǎn)的設(shè)備,比如平板,桌面系統(tǒng)上,可以實(shí)現(xiàn)通過使用側(cè)邊欄導(dǎo)航類似的效果。例如,在默認(rèn)情況下,使用緊湊型的顯示導(dǎo)航圖標(biāo)。


使用注意事項(xiàng)
底部導(dǎo)航欄應(yīng)該在以下的情況使用動(dòng)在頂層的導(dǎo)航需要
有類似重要性的三至五個(gè)條目(或者在程序的任意地方都需要顯示)
底部的導(dǎo)航欄不能超過六個(gè)條目,更不能讓他滑動(dòng)顯示
當(dāng)導(dǎo)航欄的條目有焦點(diǎn)的時(shí)候顯示當(dāng)前條目的圖標(biāo)和文字
如果只有三個(gè)條目的話同時(shí)顯示圖標(biāo)和文字
當(dāng)?shù)撞繉?dǎo)航欄有四至五個(gè)條目的時(shí)候展示動(dòng)態(tài)展示圖標(biāo)和文字(獲取焦點(diǎn)的時(shí)候展示圖標(biāo)和文字,沒有焦點(diǎn)只展示圖標(biāo))



Behavior
如果你了解Design Library那么你一定了解behavior
那么Bottom navigation有什么behavior呢我們通過圖片簡(jiǎn)單了解一下

Bottom navigation樣式以及設(shè)計(jì)細(xì)節(jié)




最小寬度和最大寬度(包括padding):
最大值: 168dp
最小值: 120dp(大的View), 104dp (比較小的View)
高度:56dp
圖標(biāo):24 x 24dp
內(nèi)容對(duì)齊方式:
文本和圖標(biāo)水平居中
Padding:
6dp 圖標(biāo)上方(獲取焦點(diǎn)), 8dp 圖標(biāo)上方 (沒有獲取焦點(diǎn))
10dp 文字底下
12dp 文字左右
文字標(biāo)簽:
正常的圖片14sp (獲取焦點(diǎn))
正常的圖片12sp (沒有獲取焦點(diǎn))





陰影
因?yàn)閟nackbars 有一個(gè) (6dp) 的陰影,snackbar在bottom navigation bar 后邊顯示(8dp elevation).
Bottom sheets, navigation drawers 和鍵盤顯示的時(shí)候在bottom navigation bar的上部, 暫時(shí)覆蓋他

整體樣式

https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs
不周之處盡請(qǐng)指正,如果喜歡可以打賞
附英文網(wǎng)站截屏
