Bottom Navigation Bar可以使你在一個(gè)點(diǎn)擊區(qū)域內(nèi)切換不同的界面。
輕觸底部導(dǎo)航圖標(biāo)可直接進(jìn)入相關(guān)聯(lián)的視圖或刷新當(dāng)前活動(dòng)的視圖。
底部導(dǎo)航主要用于移動(dòng)設(shè)備。 要實(shí)現(xiàn)類似效果的桌面應(yīng)用，請(qǐng)使用側(cè)導(dǎo)航。
用法
三到五個(gè)頂級(jí)的界面。
頂級(jí)頁(yè)面要能夠直接到達(dá)。
顏色
使用應(yīng)用程序的主顏色來(lái)調(diào)整活動(dòng)圖標(biāo)。 如果底部導(dǎo)航欄已經(jīng)著色，請(qǐng)使用黑色或白色。
規(guī)范
每個(gè)圖標(biāo)的點(diǎn)擊區(qū)域?qū)挾龋嚎牲c(diǎn)擊的區(qū)域?qū)挾瘸詧D標(biāo)個(gè)數(shù)。
最大為168dp，最小為80dp
導(dǎo)航欄高度：56dp
圖標(biāo)尺寸：24 x 24dp
用法
底部導(dǎo)航提供應(yīng)用程序的頂級(jí)視圖之間的快速導(dǎo)航。 它主要設(shè)計(jì)用于移動(dòng)。
較大的顯示器，例如桌面，可以通過(guò)使用側(cè)邊導(dǎo)航來(lái)實(shí)現(xiàn)類似的效果。 例如，緊湊的“軌道”處理默認(rèn)顯示導(dǎo)航圖標(biāo)。
何時(shí)使用
底部導(dǎo)航應(yīng)用于：
- 三到五個(gè)相似重要性的頂級(jí)界面（替代方法：從應(yīng)用程序的任何地方訪問(wèn)的永久性導(dǎo)航抽屜）
- 需要在應(yīng)用中的任何位置直接訪問(wèn)的目標(biāo)（替代方法：僅一個(gè)或兩個(gè)界面的標(biāo)簽）
正確的使用
在一個(gè)應(yīng)用中有三到五個(gè)頂級(jí)界面需要直接切換使用Bottom Navtigaiton Bar
錯(cuò)誤的用法
如果少于3個(gè)，請(qǐng)使用tabs來(lái)表示
如果你的頂級(jí)界面超過(guò)6個(gè)，請(qǐng)使用其他位置的導(dǎo)航欄（如左側(cè)drawer navigation）來(lái)訪問(wèn)Bottom Navigation Bar中未覆蓋的界面。
正確的做法
圖標(biāo)固定在Bottom Navigation Bar
錯(cuò)誤的做法
避免在底部導(dǎo)航欄中滾動(dòng)內(nèi)容。
正確的做法
在Bottom Navigation Bar中最多添加五個(gè)圖標(biāo)
錯(cuò)誤的做法
避免在底部導(dǎo)航中使用超過(guò)五個(gè)圖標(biāo)，因?yàn)辄c(diǎn)擊目標(biāo)將彼此太靠近影響美觀。
Bottom Navigation Bar和Tabs
組合使用Bottom Navigation Bar與Tabs時(shí)，請(qǐng)謹(jǐn)慎，因?yàn)樵趯?dǎo)航應(yīng)用程序時(shí)，可能導(dǎo)致混亂。 例如，點(diǎn)擊兩個(gè)Tabs和Bottom Navigation Bar可以在同一內(nèi)容中顯示不同轉(zhuǎn)換的動(dòng)畫而混淆。
樣式
圖標(biāo)和文本
由于Bottom Navigation通過(guò)圖標(biāo)產(chǎn)生行為操作，因此應(yīng)該用文字顯示他們操作的內(nèi)容。
根據(jù)以下條件對(duì)每個(gè)操作進(jìn)行樣式設(shè)定：
- 當(dāng)view獲得焦點(diǎn)時(shí)，顯示圖標(biāo)和文本
- 當(dāng)只有三個(gè)圖標(biāo)時(shí)，保持圖標(biāo)和文本一直顯示
- 當(dāng)有四個(gè)或者五個(gè)圖標(biāo)時(shí)，將非活動(dòng)視圖置為只顯示圖標(biāo)，不顯示文本
顏色
使用應(yīng)用程序的主顏色（ primary color）來(lái)調(diào)整當(dāng)前底部導(dǎo)航操作（包括圖標(biāo)和任何文本標(biāo)簽）。
正確的做法
當(dāng)圖標(biāo)獲得焦點(diǎn)時(shí)使用程序主顏色(primary color)
錯(cuò)誤的做法
禁止使用不同顏色的圖標(biāo)和文字顏色
如果Bottom Navigation Bar已經(jīng)被著色，請(qǐng)使用黑白的圖標(biāo)和文本
正確的做法
當(dāng)Bottom Navigation Bar已經(jīng)有顏色時(shí)使用黑白的圖標(biāo)和文本
錯(cuò)誤的做法
避免使用彩色圖標(biāo)來(lái)匹配已經(jīng)有顏色的Bottom Navigation Bar
文字
文本標(biāo)簽為Bottom Navigation Bar的圖標(biāo)提供簡(jiǎn)短，有意義的定義。 避免使用長(zhǎng)文本標(biāo)簽，因?yàn)檫@些標(biāo)簽不會(huì)截?cái)嗷驌Q行。
正確的做法
使用較短的文本標(biāo)簽
錯(cuò)誤的做法
避免使用過(guò)長(zhǎng)的文本標(biāo)簽
錯(cuò)誤的做法
避免截?cái)辔淖?，這樣做可能會(huì)妨礙用戶理解文字內(nèi)容
錯(cuò)誤的做法
避免縮小文本來(lái)使文本在一行內(nèi)顯示
行為
點(diǎn)擊Bottom Navigation Bar的圖標(biāo)可直接轉(zhuǎn)到相關(guān)聯(lián)的視圖，或刷新當(dāng)前活動(dòng)的視圖。
每個(gè)底部導(dǎo)航圖標(biāo)必須連接到它所指向的界面，并且不會(huì)打開(kāi)菜單或其他彈出窗口。
在Android上，“后退”按鈕不會(huì)在底部導(dǎo)航欄視圖之間導(dǎo)航。
點(diǎn)擊顯示Bottom Navigation Bar時(shí)，應(yīng)該顯示當(dāng)前活動(dòng)按鈕中的頂部位置
點(diǎn)擊其他界面圖標(biāo)后再次返回時(shí)應(yīng)該重置狀態(tài)
Bottom Navigation Bar可以在滾動(dòng)式動(dòng)態(tài)的顯示和隱藏。
向下滾動(dòng)時(shí)應(yīng)該隱藏
向上滾動(dòng)時(shí)顯示
Bottom Navigation Bar可以消失并重新顯示，以配合沉浸式內(nèi)容視圖。
在瀏覽應(yīng)用程序?qū)哟谓Y(jié)構(gòu)時(shí)，Bottom Navigation Bar仍保持可見(jiàn)。
在內(nèi)容區(qū)域上使用滑動(dòng)手勢(shì)不會(huì)在視圖之間導(dǎo)航。(這條貌似有點(diǎn)問(wèn)題)
正確的做法
使用交叉淡入淡出動(dòng)畫在活動(dòng)和非活動(dòng)視圖之間切換。
錯(cuò)誤的做法
避免使用橫向運(yùn)動(dòng)在視圖之間轉(zhuǎn)換。
規(guī)范
固定Bottom Navigation Bar
要計(jì)算每個(gè)Bottom Navigation按鈕的寬度，請(qǐng)將視圖的寬度除以按鈕數(shù)：
按鈕寬度=整個(gè)視圖的寬度/按鈕數(shù)
例如，如果視圖的寬度為360dp，并且有三個(gè)按鈕，則每個(gè)操作的寬度應(yīng)為120dp。
固定在底部的Bottom Navigation Bar
寬度的最大值和最小值（包含padding）:
- 最大：168dp
- 最小：80dp
- 高度：56dp
- 圖標(biāo)：24*24dp
- align：文本和圖標(biāo)在視圖中水平居中。
- padding：6dp（活動(dòng)視圖），8dp（非活動(dòng)視圖）
- Roboto Regular（字體大小）：14sp（主動(dòng)視圖），12sp（非活動(dòng)視圖）
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)的移動(dòng)
寬度最小值和最大值（包括Padding）：
活動(dòng)視圖
- 最大：168dp
- 最小：96dp
非活動(dòng)視圖
- 最大：96dp
- 最低：56dp
- 高度：56dp
圖標(biāo)：24 x 24dp
align：文本和圖標(biāo)在視圖中水平居中。
padding：6dp上方圖標(biāo)（活動(dòng)視圖），16dp上方和下方圖標(biāo)（不活動(dòng)視圖）,10dp下的文本
文字標(biāo)簽：Roboto Regular 14sp（主動(dòng)視圖）
移設(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
活動(dòng)視圖：最小寬度96dp
活動(dòng)視圖：最大寬度168dp
非活動(dòng)視圖：最小寬度56dp
非活動(dòng)視圖：最大寬度96dp
活動(dòng)視圖的文本標(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）低，所以會(huì)展現(xiàn)在Bottom Navigation Bar的下邊。
由于Bottom Sheets、NavigationDrawer、和Keyboard會(huì)暫時(shí)性展現(xiàn)在Bottom Navigation Bar前邊。
