Bottom Navigation Bar可以使你在一個點擊區(qū)域內(nèi)切換不同的界面泪掀。
輕觸底部導(dǎo)航圖標(biāo)可直接進入相關(guān)聯(lián)的視圖或刷新當(dāng)前活動的視圖寂诱。
底部導(dǎo)航主要用于移動設(shè)備泥畅。 要實現(xiàn)類似效果的桌面應(yīng)用韧涨，請使用側(cè)導(dǎo)航家制。
用法
三到五個頂級的界面叹话。
頂級頁面要能夠直接到達(dá)叠国。
顏色
使用應(yīng)用程序的主顏色來調(diào)整活動圖標(biāo)驶忌。 如果底部導(dǎo)航欄已經(jīng)著色擂仍，請使用黑色或白色囤屹。
規(guī)范
每個圖標(biāo)的點擊區(qū)域?qū)挾龋嚎牲c擊的區(qū)域?qū)挾瘸詧D標(biāo)個數(shù)。
最大為168dp逢渔，最小為80dp
導(dǎo)航欄高度：56dp
圖標(biāo)尺寸：24 x 24dp
用法
底部導(dǎo)航提供應(yīng)用程序的頂級視圖之間的快速導(dǎo)航肋坚。 它主要設(shè)計用于移動。
較大的顯示器肃廓，例如桌面智厌，可以通過使用側(cè)邊導(dǎo)航來實現(xiàn)類似的效果。 例如盲赊，緊湊的“軌道”處理默認(rèn)顯示導(dǎo)航圖標(biāo)铣鹏。
何時使用
底部導(dǎo)航應(yīng)用于：
- 三到五個相似重要性的頂級界面（替代方法：從應(yīng)用程序的任何地方訪問的永久性導(dǎo)航抽屜）
- 需要在應(yīng)用中的任何位置直接訪問的目標(biāo)（替代方法：僅一個或兩個界面的標(biāo)簽）
正確的使用
在一個應(yīng)用中有三到五個頂級界面需要直接切換使用Bottom Navtigaiton Bar
錯誤的用法
如果少于3個，請使用tabs來表示
如果你的頂級界面超過6個哀蘑，請使用其他位置的導(dǎo)航欄（如左側(cè)drawer navigation）來訪問Bottom Navigation Bar中未覆蓋的界面诚卸。
正確的做法
圖標(biāo)固定在Bottom Navigation Bar
錯誤的做法
避免在底部導(dǎo)航欄中滾動內(nèi)容。
正確的做法
在Bottom Navigation Bar中最多添加五個圖標(biāo)
錯誤的做法
避免在底部導(dǎo)航中使用超過五個圖標(biāo)绘迁，因為點擊目標(biāo)將彼此太靠近影響美觀合溺。
Bottom Navigation Bar和Tabs
組合使用Bottom Navigation Bar與Tabs時，請謹(jǐn)慎缀台，因為在導(dǎo)航應(yīng)用程序時棠赛，可能導(dǎo)致混亂。 例如膛腐，點擊兩個Tabs和Bottom Navigation Bar可以在同一內(nèi)容中顯示不同轉(zhuǎn)換的動畫而混淆睛约。
樣式
圖標(biāo)和文本
由于Bottom Navigation通過圖標(biāo)產(chǎn)生行為操作，因此應(yīng)該用文字顯示他們操作的內(nèi)容依疼。
根據(jù)以下條件對每個操作進行樣式設(shè)定：
- 當(dāng)view獲得焦點時痰腮，顯示圖標(biāo)和文本
- 當(dāng)只有三個圖標(biāo)時，保持圖標(biāo)和文本一直顯示
- 當(dāng)有四個或者五個圖標(biāo)時律罢，將非活動視圖置為只顯示圖標(biāo)膀值，不顯示文本
顏色
使用應(yīng)用程序的主顏色（ primary color）來調(diào)整當(dāng)前底部導(dǎo)航操作（包括圖標(biāo)和任何文本標(biāo)簽）。
正確的做法
當(dāng)圖標(biāo)獲得焦點時使用程序主顏色(primary color)
錯誤的做法
禁止使用不同顏色的圖標(biāo)和文字顏色
如果Bottom Navigation Bar已經(jīng)被著色误辑，請使用黑白的圖標(biāo)和文本
正確的做法
當(dāng)Bottom Navigation Bar已經(jīng)有顏色時使用黑白的圖標(biāo)和文本
錯誤的做法
避免使用彩色圖標(biāo)來匹配已經(jīng)有顏色的Bottom Navigation Bar
文字
文本標(biāo)簽為Bottom Navigation Bar的圖標(biāo)提供簡短沧踏，有意義的定義。 避免使用長文本標(biāo)簽巾钉，因為這些標(biāo)簽不會截斷或換行翘狱。
正確的做法
使用較短的文本標(biāo)簽
錯誤的做法
避免使用過長的文本標(biāo)簽
錯誤的做法
避免截斷文字，這樣做可能會妨礙用戶理解文字內(nèi)容
錯誤的做法
避免縮小文本來使文本在一行內(nèi)顯示
行為
點擊Bottom Navigation Bar的圖標(biāo)可直接轉(zhuǎn)到相關(guān)聯(lián)的視圖砰苍，或刷新當(dāng)前活動的視圖潦匈。
每個底部導(dǎo)航圖標(biāo)必須連接到它所指向的界面阱高，并且不會打開菜單或其他彈出窗口。
在Android上茬缩，“后退”按鈕不會在底部導(dǎo)航欄視圖之間導(dǎo)航赤惊。
點擊顯示Bottom Navigation Bar時，應(yīng)該顯示當(dāng)前活動按鈕中的頂部位置
點擊其他界面圖標(biāo)后再次返回時應(yīng)該重置狀態(tài)
Bottom Navigation Bar可以在滾動式動態(tài)的顯示和隱藏凰锡。
向下滾動時應(yīng)該隱藏
向上滾動時顯示
Bottom Navigation Bar可以消失并重新顯示未舟，以配合沉浸式內(nèi)容視圖。
在瀏覽應(yīng)用程序?qū)哟谓Y(jié)構(gòu)時掂为，Bottom Navigation Bar仍保持可見裕膀。
在內(nèi)容區(qū)域上使用滑動手勢不會在視圖之間導(dǎo)航。(這條貌似有點問題)
正確的做法
使用交叉淡入淡出動畫在活動和非活動視圖之間切換勇哗。
錯誤的做法
避免使用橫向運動在視圖之間轉(zhuǎn)換昼扛。
規(guī)范
固定Bottom Navigation Bar
要計算每個Bottom Navigation按鈕的寬度，請將視圖的寬度除以按鈕數(shù)：
按鈕寬度=整個視圖的寬度/按鈕數(shù)
例如智绸，如果視圖的寬度為360dp野揪，并且有三個按鈕，則每個操作的寬度應(yīng)為120dp瞧栗。
固定在底部的Bottom Navigation Bar
寬度的最大值和最小值（包含padding）:
- 最大：168dp
- 最兴刮取：80dp
- 高度：56dp
- 圖標(biāo)：24*24dp
- align：文本和圖標(biāo)在視圖中水平居中。
- padding：6dp（活動視圖）迹恐，8dp（非活動視圖）
- Roboto Regular（字體大姓醵琛）：14sp（主動視圖），12sp（非活動視圖）
56dp height,12dp left and right of text 殴边，10dp under text
橫屏是的Bottom Navigation Bar
56dp height憎茂，24 x 24dp icon，6dp above icon (active view)锤岸，8dp above icon (inactive view)竖幔，10dp under text
平板電腦上的Bottom Navigation Bar
56dp height,24 x 24dp icon,6dp above icon (active view),8dp above icon (inactive view),10dp under text
Bottom Navigation Bar圖標(biāo)的移動
寬度最小值和最大值（包括Padding）：
活動視圖
- 最大：168dp
- 最小：96dp
非活動視圖
- 最大：96dp
- 最低：56dp
- 高度：56dp
圖標(biāo)：24 x 24dp
align：文本和圖標(biāo)在視圖中水平居中是偷。
padding：6dp上方圖標(biāo)（活動視圖）拳氢，16dp上方和下方圖標(biāo)（不活動視圖）,10dp下的文本
文字標(biāo)簽：Roboto Regular 14sp（主動視圖）
移設(shè)備上的Bottom Navigation Bar
56dp height，24 x 24dp icon蛋铆，6dp above icon (active view)馋评，10dp under text，6dp below icon刺啦，16dp below icon with no title
活動視圖：最小寬度96dp
活動視圖：最大寬度168dp
非活動視圖：最小寬度56dp
非活動視圖：最大寬度96dp
活動視圖的文本標(biāo)簽使用最大寬度
橫屏模式
56dp height留特，24 x 24dp icon，6dp above icon (active view)，10dp under text蜕青，6dp below icon苟蹈，16dp below icon with no title
平板上的Bottom Navigation Bar
56dp height，24 x 24dp icon右核，6dp above icon (active view)汉操，10dp under text，6dp below icon蒙兰，16dp below icon with no title
高度
由于snackbars的高度屬性（6dp）比Bottom Navigation Bar的高度屬性（8dp）低，所以會展現(xiàn)在Bottom Navigation Bar的下邊芒篷。
由于Bottom Sheets搜变、NavigationDrawer、和Keyboard會暫時性展現(xiàn)在Bottom Navigation Bar前邊针炉。
