【译】Android材质组件的动手实践：Bottom Navig

作者: FredWhite | 来源:发表于2020-03-26 15:54 被阅读0次

【译】Android材质组件的动手实践：Bottom Navig
【译】Android材质组件的动手实践：Bottom Sheet
【译】Android材质组件的动手实践：Bottom App B
【译】Android材质组件的动手实践：Dialogs
【译】Android材质组件的动手实践：Cards
【译】Android材质组件的动手实践：Buttons
【译】Android材质组件的动手实践：Selection Co
Android Bottom navigation 规范二：样式
Android 组件化开发实践
Android点击水纹效果和QQ拖拽效果的底部导航栏

本文为 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_AUTO and 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

A basic 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：用于分配，检索，检查和清除徽章内显示的数字。默认情况下，显示的徽章没有数字。

带数字的 badge

setMaxCharacterCount/ getMaxCharacterCount：用于设置/获取徽章数字中允许的最大字符数，然后将其用'+'截断。预设值为4。

最大值的 badge

setBadgeGravity/ getBadgeGravity：用于设置/获取它可以是徽章的严重性TOP_END，TOP_START，BOTTOM_END或BOTTOM_START。默认值为TOP_END。

位于不同位置的 badge

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。