本文為 Nick Rout 發(fā)布于 Medium 的文章譯文（Google 翻譯）
原文鏈接為 Hands-on with Material Components for Android: Bottom Navigation
本文僅作為個人學(xué)習(xí)記錄所用。如有涉及侵權(quán)竖共，請相關(guān)人士盡快聯(lián)系譯文作者。
Android MDC 系列文章：
- 第一篇：【譯】為Android設(shè)置Material Components主題
- 第二篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Bottom App Bar
- 第三篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Bottom Navigation
- 第四篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Bottom Sheet
- 第五篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Buttons
- 第六篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Chips
- 第七篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Cards
- 第八篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Dialogs
- 第九篇：【譯】Android材質(zhì)組件的動手實(shí)踐：Selection Controls
這篇文章將介紹 Bottom Navigation 組件的功能和API襟诸。要了解如何處理Android的Material Components的初始設(shè)置（包括Gradle依賴關(guān)系和創(chuàng)建應(yīng)用程序主題）瓦堵，請參閱我的原始文章：
為Android設(shè)置Material Components主題
Bottom Navigation 是頂級導(dǎo)航組件。它顯示三到五個目的地歌亲，每個目的地都有一個圖標(biāo)和一個可選的文本標(biāo)簽菇用。它是符合人體工程學(xué)的組件；它的底部位置使您可以輕松地單手觸摸移動設(shè)備陷揪。
這些目的地的特征是：
- 在您的應(yīng)用程序上下文中刨疼，它們應(yīng)該同等重要
- 應(yīng)該可以從應(yīng)用程序中的任何位置訪問它們（這意味著即使在當(dāng)前任務(wù)層次結(jié)構(gòu)中向下導(dǎo)航時，底部導(dǎo)航欄仍然可見）
- 它們不應(yīng)代表啟動新任務(wù)的一次性動作（例如鹅龄，撰寫電子郵件）
- 它們不應(yīng)代表用戶偏好或設(shè)置
注意：建議僅對移動設(shè)備和平板電腦設(shè)備使用底部導(dǎo)航揩慕。對于其他形狀因素，請考慮其他導(dǎo)航組件扮休，例如導(dǎo)航抽屜迎卤。有關(guān)更多信息，請參閱了解導(dǎo)航文章玷坠。
基本用法??
BottomNavigatonView可以將A 包含在您的屏幕布局中蜗搔，如下所示：
< FrameLayout
... >
< com.google.android.material.bottomnavigation.BottomNavigationView
android：id =“ @ + id / bottomNavigation”
android：layout_width =“ match_parent”
android：layout_height =“ wrap_content”
android：layout_gravity =“ bottom” />
</ FrameLayout >
處理導(dǎo)航項(xiàng)目??
BottomNavigationView通過展開菜單來添加a的導(dǎo)航目標(biāo)。這可以用XML完成：
< com.google.android.material.bottomnavigation.BottomNavigationView
...
app：menu =“ @ menu / menu_bottom_navigation” />
另外八堡，也可以通過編程方式完成：
bottomNavigation.inflateMenu（R.menu樟凄。menu_bottom_navigation）
注意：嘗試為菜單添加5個以上的項(xiàng)目會導(dǎo)致崩潰*IllegalStateException*。要動態(tài)確定最大項(xiàng)目數(shù)兄渺，請使用*BottomNavigationView#maxItemCount*缝龄。
可以使用便捷功能來檢測何時選擇了導(dǎo)航項(xiàng)：
bottomNavigation.setOnNavigationItemSelectedListener { item ->
when(item.itemId) {
R.id.item1 -> {
// Do something for navigation item 1
true
}
R.id.item2 -> {
// Do something for navigation item 2
true
}
else -> false
}
}
還有一個用于檢測何時重新選擇導(dǎo)航項(xiàng)的功能：
bottomNavigation.setOnNavigationItemReselectedListener { item ->
when(item.itemId) {
R.id.item1 -> {
// Do something for navigation item 1
}
R.id.item2 -> {
// Do something for navigation item 2
}
}
}
最后，可以通過以下方式以編程方式選擇導(dǎo)航項(xiàng)：
bottomNavigation.selectedItemId = R.id.item1
調(diào)整物品的外觀和行為?
可以根據(jù)項(xiàng)目數(shù)量挂谍，所選狀態(tài)和設(shè)計偏好來調(diào)整導(dǎo)航項(xiàng)目的外觀和位置叔壤。具體來說，這包括項(xiàng)目標(biāo)簽的可見性和水平平移口叙。
標(biāo)簽可見度
該labelVisibilityMode屬性可用于調(diào)整每個導(dǎo)航項(xiàng)目的文本標(biāo)簽的行為炼绘。有四種可見性模式：
-
LABEL_VISIBILITY_AUTO：當(dāng)少于或等于3個項(xiàng)目時，標(biāo)簽的行為為“已標(biāo)記”妄田；當(dāng)不超過4個項(xiàng)目時俺亮，標(biāo)簽的行為為“已選擇”（這是默認(rèn)行為） -
LABEL_VISIBILITY_SELECTED：標(biāo)簽僅顯示在所選的導(dǎo)航項(xiàng)目上 -
LABEL_VISIBILITY_LABELED：標(biāo)簽顯示在所有導(dǎo)航項(xiàng)目上 -
LABEL_VISIBILITY_UNLABELED：標(biāo)簽對于所有導(dǎo)航項(xiàng)都是隱藏的
可以使用XML更改模式：
< com.google.android.material.bottomnavigation.BottomNavigationView
...
app：labelVisibilityMode =“ selected” />
另外，也可以通過編程方式完成：
bottomNavigation.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_SELECTED
水平平移
該itemHorizontalTranslationEnabled屬性可用于設(shè)置在選擇/取消選擇時導(dǎo)航項(xiàng)目是否應(yīng)“移動”疟呐。默認(rèn)值為false脚曾。該源代碼顯示，這種行為還取決于所選擇labelVisibilityMode和項(xiàng)目的數(shù)量萨醒。為了進(jìn)行轉(zhuǎn)移斟珊，還需要滿足以下要求：
-
labelVisibilityMode=LABEL_VISIBILITY_AUTOand item count > 3 or -
labelVisibilityMode=LABEL_VISIBILITY_SELECTED
即使?jié)M足了上述所有條件苇倡，子視圖的組合寬度也需要填充屏幕寬度才能實(shí)現(xiàn)富纸。實(shí)際上囤踩，當(dāng)以縱向方向使用移動設(shè)備時，這似乎等于較高的項(xiàng)目計數(shù)（4個或更多）晓褪。堵漱！
可以使用XML更改此標(biāo)志：
< com.google.android.material.bottomnavigation.BottomNavigationView
...
app：itemHorizo??ntalTranslationEnabled =“ true” />
另外，也可以通過編程方式完成：
bottomNavigation涣仿。isItemHorizo??ntalTranslationEnabled = true
Badging（徽章）??
可以標(biāo)記導(dǎo)航項(xiàng)以指示對特定目的地的重要更新勤庐，例如推送通知或新消息『酶郏徽章顯示為右上角項(xiàng)目圖標(biāo)上方的點(diǎn)（帶有可選數(shù)字）愉镰。這是通過以下相對簡單的API實(shí)現(xiàn)的BottomNavigationView：
bottomNavigation.getOrCreateBadge(R.id.item1) // Show badge
bottomNavigation.removeBadge(R.id.item1) // Remove badge
val badge = bottomNavigation.getBadge(R.id.item1) // Get badge
這兩個BottomNavigationView#getBadge（可為空）和BottomNavigationView#getOrCreateBadge（非空）返回徽章作為實(shí)例[BadgeDrawable](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/badge/BadgeDrawable.java)類。此類公開了自己的API钧汹，用于更高級的自定義選項(xiàng)：
-
setNumber/getNumber/hasNumber/clearBadgeNumber：用于分配丈探，檢索，檢查和清除徽章內(nèi)顯示的數(shù)字拔莱。默認(rèn)情況下碗降，顯示的徽章沒有數(shù)字。
-
setMaxCharacterCount/getMaxCharacterCount：用于設(shè)置/獲取徽章數(shù)字中允許的最大字符數(shù)塘秦，然后將其用'+'截斷讼渊。預(yù)設(shè)值為4。
-
setBadgeGravity/getBadgeGravity：用于設(shè)置/獲取它可以是徽章的嚴(yán)重性TOP_END尊剔，TOP_START爪幻，BOTTOM_END或BOTTOM_START旅择。默認(rèn)值為TOP_END泡挺。
-
setHorizontalOffset/getHorizontalOffset和setVerticalOffset/setVerticalOffset：用于設(shè)置/獲取徽章朝向其錨點(diǎn)中心的偏移量掂僵。
Tooltips ??
長按或懸停事件時（使用鼠標(biāo)等輸入設(shè)備時）钻心，工具提示將顯示在導(dǎo)航項(xiàng)目上方胯努。默認(rèn)為菜單項(xiàng)的標(biāo)題织阅。您可以通過以下方式使用自定義工具提示文本覆蓋此行為：
<menu
...>
<item
android:id="@+id/item1"
android:title="Item 1"
app:tooltipText="Tooltip text" />
...
</menu>
主題??
BottomNavigationView可以根據(jù)三個材料主題子系統(tǒng)為主題：顏色阶祭，版式和形狀圆仔。有兩個從繼承的樣式變體Widget.MaterialComponents.BottomNavigationView历造，每個樣式變體都帶有可選的樣式后綴：Surface（默認(rèn)甩十，無后綴）和彩色（*.Colored）。實(shí)施全局自定義BottomNavigationView樣式時吭产，請在您的應(yīng)用程序主題中使用bottomNavigationStyle屬性引用它侣监。
徽章也可以是主題。現(xiàn)有的樣式是一種臣淤；Widget.MaterialComponents.Badge橄霉。實(shí)施全局自定義徽章樣式時，請在您的應(yīng)用程序主題中使用badgeStyle屬性引用它邑蒋。
顏色
BottomNavigationView可以使用該backgroundTint屬性自定義背景色姓蜂。colorSurface對于表面底部導(dǎo)航和colorPrimary彩色底部導(dǎo)航按厘，默認(rèn)為。
BottomNavigationView可以分別使用itemIconTint/ itemTextColor屬性自定義導(dǎo)航項(xiàng)圖標(biāo)/標(biāo)簽的顏色钱慢。通常逮京，您希望保持相同。這些要求為ColorStateList束莫，表示需要<selector>用于已檢查/啟用/禁用狀態(tài)懒棉。對于表面底部導(dǎo)航和彩色底部導(dǎo)航，它們默認(rèn)為colorOnSurface（未選中）/ colorPrimary（選中）览绿，colorOnPrimary每個狀態(tài)的不透明性不同（可以在文檔中找到）策严。
最后，BottomNavigationView可以使用該itemRippleColor屬性自定義導(dǎo)航項(xiàng)觸摸波紋的顏色饿敲。它也接受a ColorStateList并且默認(rèn)值與itemIconTint/ 相同itemTextColor享钞。
badge 顏色也可以使用backgroundColor和badgeTextColor屬性自定義。默認(rèn)情況下诀蓉，它們分別是colorError和colorOnError栗竖。這些也可以通過編程方式應(yīng)用于BadgeDrawable。
版式
項(xiàng)目的文本標(biāo)簽BottomNavigationView將采用fontFamily您的應(yīng)用程序主題中定義的屬性渠啤。
這些標(biāo)簽的其他類型方面可以使用itemTextAppearanceActive/ itemTextAppearanceInactive屬性自定義狐肢，分別用于已檢查/未檢查狀態(tài)。通常沥曹，您希望保持相同份名。textAppearanceCaption對于所有底部導(dǎo)航樣式，它們默認(rèn)為妓美。
盡管存在TextAppearance.MaterialComponents.Badge樣式僵腺，但目前不存在任何主題屬性可以自定義此樣式。
形狀
BottomNavigationView由于背景形狀跨越屏幕的寬度壶栋，因此形狀的主題無法調(diào)整任何方面辰如。
雖然不嚴(yán)格限制主題的形狀，但值得一提的是贵试，可以使用調(diào)整導(dǎo)航項(xiàng)目圖標(biāo)的大小BottomNavigationView#itemIconSize琉兜。
更多資源??
- 本文中使用的Playground應(yīng)用程序的源代碼可以在GitHub上找到。
- 底部導(dǎo)航設(shè)計文檔
- 底部導(dǎo)航API文檔
我希望這篇文章對“底部導(dǎo)航”以及如何在您的Android應(yīng)用中使用它有所幫助毙玻。如果您有任何疑問豌蟋，想法或建議，那么我很樂意收到您的來信桑滩！
在Twitter上找到我@ricknout
