本文为 Nick Rout 发布于 Medium 的文章译文（Google 翻译）
原文链接为 Hands-on with Material Components for Android: Bottom Navigation
本文仅作为个人学习记录所用。如有涉及侵权，请相关人士尽快联系译文作者。
Android MDC 系列文章：
- 第一篇：【译】为Android设置Material Components主题
- 第二篇：【译】Android材质组件的动手实践：Bottom App Bar
- 第三篇：【译】Android材质组件的动手实践：Bottom Navigation
- 第四篇：【译】Android材质组件的动手实践：Bottom Sheet
- 第五篇：【译】Android材质组件的动手实践：Buttons
- 第六篇：【译】Android材质组件的动手实践：Chips
- 第七篇：【译】Android材质组件的动手实践：Cards
- 第八篇：【译】Android材质组件的动手实践：Dialogs
- 第九篇：【译】Android材质组件的动手实践：Selection Controls
这篇文章将介绍 Bottom Navigation 组件的功能和API。要了解如何处理Android的Material Components的初始设置（包括Gradle依赖关系和创建应用程序主题），请参阅我的原始文章：
为Android设置Material Components主题
Bottom Navigation 是顶级导航组件。它显示三到五个目的地，每个目的地都有一个图标和一个可选的文本标签。它是符合人体工程学的组件；它的底部位置使您可以轻松地单手触摸移动设备。
这些目的地的特征是：
- 在您的应用程序上下文中，它们应该同等重要
- 应该可以从应用程序中的任何位置访问它们（这意味着即使在当前任务层次结构中向下导航时，底部导航栏仍然可见）
- 它们不应代表启动新任务的一次性动作（例如，撰写电子邮件）
- 它们不应代表用户偏好或设置
注意：建议仅对移动设备和平板电脑设备使用底部导航。对于其他形状因素，请考虑其他导航组件，例如导航抽屉。有关更多信息，请参阅了解导航文章。
基本用法🏁
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 >
处理导航项目🧭
BottomNavigationView通过展开菜单来添加a的导航目标。这可以用XML完成：
< com.google.android.material.bottomnavigation.BottomNavigationView
...
app：menu =“ @ menu / menu_bottom_navigation” />
另外，也可以通过编程方式完成：
bottomNavigation.inflateMenu（R.menu。menu_bottom_navigation）
注意：尝试为菜单添加5个以上的项目会导致崩溃*IllegalStateException*。要动态确定最大项目数，请使用*BottomNavigationView#maxItemCount*。
可以使用便捷功能来检测何时选择了导航项：
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
}
}
还有一个用于检测何时重新选择导航项的功能：
bottomNavigation.setOnNavigationItemReselectedListener { item ->
when(item.itemId) {
R.id.item1 -> {
// Do something for navigation item 1
}
R.id.item2 -> {
// Do something for navigation item 2
}
}
}
最后，可以通过以下方式以编程方式选择导航项：
bottomNavigation.selectedItemId = R.id.item1
调整物品的外观和行为✅
可以根据项目数量，所选状态和设计偏好来调整导航项目的外观和位置。具体来说，这包括项目标签的可见性和水平平移。
标签可见度
该labelVisibilityMode属性可用于调整每个导航项目的文本标签的行为。有四种可见性模式：
-
LABEL_VISIBILITY_AUTO：当少于或等于3个项目时，标签的行为为“已标记”；当不超过4个项目时，标签的行为为“已选择”（这是默认行为） -
LABEL_VISIBILITY_SELECTED：标签仅显示在所选的导航项目上 -
LABEL_VISIBILITY_LABELED：标签显示在所有导航项目上 -
LABEL_VISIBILITY_UNLABELED：标签对于所有导航项都是隐藏的
可以使用XML更改模式：
< com.google.android.material.bottomnavigation.BottomNavigationView
...
app：labelVisibilityMode =“ selected” />
另外，也可以通过编程方式完成：
bottomNavigation.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_SELECTED
水平平移
该itemHorizontalTranslationEnabled属性可用于设置在选择/取消选择时导航项目是否应“移动”。默认值为false。该源代码显示，这种行为还取决于所选择labelVisibilityMode和项目的数量。为了进行转移，还需要满足以下要求：
-
labelVisibilityMode=LABEL_VISIBILITY_AUTOand item count > 3 or -
labelVisibilityMode=LABEL_VISIBILITY_SELECTED
即使满足了上述所有条件，子视图的组合宽度也需要填充屏幕宽度才能实现。实际上，当以纵向方向使用移动设备时，这似乎等于较高的项目计数（4个或更多）。！
可以使用XML更改此标志：
< com.google.android.material.bottomnavigation.BottomNavigationView
...
app：itemHorizontalTranslationEnabled =“ true” />
另外，也可以通过编程方式完成：
bottomNavigation。isItemHorizontalTranslationEnabled = true
Badging（徽章）🔢
可以标记导航项以指示对特定目的地的重要更新，例如推送通知或新消息。徽章显示为右上角项目图标上方的点（带有可选数字）。这是通过以下相对简单的API实现的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（非空）返回徽章作为实例[BadgeDrawable](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/badge/BadgeDrawable.java)类。此类公开了自己的API，用于更高级的自定义选项：
-
setNumber/getNumber/hasNumber/clearBadgeNumber：用于分配，检索，检查和清除徽章内显示的数字。默认情况下，显示的徽章没有数字。
-
setMaxCharacterCount/getMaxCharacterCount：用于设置/获取徽章数字中允许的最大字符数，然后将其用'+'截断。预设值为4。
-
setBadgeGravity/getBadgeGravity：用于设置/获取它可以是徽章的严重性TOP_END，TOP_START，BOTTOM_END或BOTTOM_START。默认值为TOP_END。
-
setHorizontalOffset/getHorizontalOffset和setVerticalOffset/setVerticalOffset：用于设置/获取徽章朝向其锚点中心的偏移量。
Tooltips ℹ️
长按或悬停事件时（使用鼠标等输入设备时），工具提示将显示在导航项目上方。默认为菜单项的标题。您可以通过以下方式使用自定义工具提示文本覆盖此行为：
<menu
...>
<item
android:id="@+id/item1"
android:title="Item 1"
app:tooltipText="Tooltip text" />
...
</menu>
主题🎨
BottomNavigationView可以根据三个材料主题子系统为主题：颜色，版式和形状。有两个从继承的样式变体Widget.MaterialComponents.BottomNavigationView，每个样式变体都带有可选的样式后缀：Surface（默认，无后缀）和彩色（*.Colored）。实施全局自定义BottomNavigationView样式时，请在您的应用程序主题中使用bottomNavigationStyle属性引用它。
徽章也可以是主题。现有的样式是一种；Widget.MaterialComponents.Badge。实施全局自定义徽章样式时，请在您的应用程序主题中使用badgeStyle属性引用它。
颜色
BottomNavigationView可以使用该backgroundTint属性自定义背景色。colorSurface对于表面底部导航和colorPrimary彩色底部导航，默认为。
BottomNavigationView可以分别使用itemIconTint/ itemTextColor属性自定义导航项图标/标签的颜色。通常，您希望保持相同。这些要求为ColorStateList，表示需要<selector>用于已检查/启用/禁用状态。对于表面底部导航和彩色底部导航，它们默认为colorOnSurface（未选中）/ colorPrimary（选中），colorOnPrimary每个状态的不透明性不同（可以在文档中找到）。
最后，BottomNavigationView可以使用该itemRippleColor属性自定义导航项触摸波纹的颜色。它也接受a ColorStateList并且默认值与itemIconTint/ 相同itemTextColor。
badge 颜色也可以使用backgroundColor和badgeTextColor属性自定义。默认情况下，它们分别是colorError和colorOnError。这些也可以通过编程方式应用于BadgeDrawable。
版式
项目的文本标签BottomNavigationView将采用fontFamily您的应用程序主题中定义的属性。
这些标签的其他类型方面可以使用itemTextAppearanceActive/ itemTextAppearanceInactive属性自定义，分别用于已检查/未检查状态。通常，您希望保持相同。textAppearanceCaption对于所有底部导航样式，它们默认为。
尽管存在TextAppearance.MaterialComponents.Badge样式，但目前不存在任何主题属性可以自定义此样式。
形状
BottomNavigationView由于背景形状跨越屏幕的宽度，因此形状的主题无法调整任何方面。
虽然不严格限制主题的形状，但值得一提的是，可以使用调整导航项目图标的大小BottomNavigationView#itemIconSize。
更多资源📚
我希望这篇文章对“底部导航”以及如何在您的Android应用中使用它有所帮助。如果您有任何疑问，想法或建议，那么我很乐意收到您的来信！
在Twitter上找到我@ricknout
