本文为 Nick Rout 发布于 Medium 的文章译文（Google 翻译）
原文链接为 Hands-on with Material Components for Android: Bottom App Bar
本文仅作为个人学习记录所用。如有涉及侵权，请相关人士尽快联系译文作者。

---

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 App Bar 组件的功能和API。要了解如何处理Android的Material Components的初始设置（包括Gradle依赖关系和创建应用程序主题），请参阅我的原始文章：

为Android设置Material Components主题

Bottom App Bar 是对传统顶部应用栏（aka Toolbar或ActionBar在Android世界中）的继承，有人认为这是《材料指南》 v1 的定义部分。底部应用栏保留了应用栏的核心功能，同时在关键区域提供了全新的外观和功能改进。

Bottom App Bar

与顶部应用程序一样，底部应用程序栏可用于：

• 使用图标菜单项突出显示重要的屏幕操作
• 通过导航图标菜单项提供与应用程序导航进行交互的方式（例如，打开导航抽屉或向后/向上导航）
• 充当FAB（浮动操作按钮）的锚点

但是，将底部应用栏与众不同的特征是：

• 人体工程学：底部位置使单手操作移动设备更容易
• 灵活性：正如我们将进一步探讨的那样，底部应用程序栏的布局以及FAB和图标菜单项的位置可以根据屏幕的需要进行更改

基本用法🏁

BottomAppBar可以将A 包含在您的屏幕布局中，如下所示：

< androidx.coordinatorlayout.widget.CoordinatorLayout 
  ... > 

  < com.google.android.material.bottomappbar.BottomAppBar 
    android：id =“ @ + id / bottomAppBar     
    android：layout_width =” match_parent“ 
    android：layout_height =” wrap_content“ 
    android： layout_gravity =“ bottom” /> 

</ androidx.coordinatorlayout.widget.CoordinatorLayout >

如上所述，理想情况下ViewGroup，a 的父级BottomAppBar应该是a CoordinatorLayout。这样可以完全自定义滚动和FAB锚定行为。

处理菜单和导航项目🍽

BottomAppBar可以使用与Toolbar（其父类）相同的方式或通过特定于的新便利功能来实现A 的菜单BottomAppBar。

菜单和导航项目

使用setSupportActionBar

对于大多数Android开发人员来说，这应该是熟悉的领域。与一样Toolbar，可以使用多种挂钩/回调将a附加BottomAppBar到Activity或Fragment，从而使菜单膨胀并处理项目单击。为此，您需要使用AndroidX AppCompatActivity 和/或 Fragment 类。您还应该使用*.NoActionBar应用程序主题变体。

如果您使用Fragment，则首先需要在回调中启用上述菜单Fragment#onCreate回调：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setHasOptionsMenu(true)
}

注意：如果使用，则没有必要*Activity*。

扩大布局后，您需要让Activity/ Fragment知道您BottomAppBar是屏幕的主要操作栏，以便将其链接到回调。这可以在Activity#onCreate回调（在调用之后setContentView，除非您使用[ContentView](https://developer.android.com/reference/androidx/annotation/ContentView)批注）或Fragment#onViewCreated回调中完成：

override fun onViewCreated（view：View，savedInstanceState：Bundle？）{ 
    val activity =（requireActivity（）as AppCompatActivity）
    activity.setSupportActionBar（bottomAppBar）
}

现在，您可以使用可覆盖的回调来扩大菜单资源和处理项目单击。这在Android菜单文档中有详细说明。

使用便利功能

与以前的方法相比，存在用于使BottomAppBar菜单膨胀的更简单的便捷功能：

bottomAppBar.replaceMenu（R.menu。menu_bottom_app_bar）

设置一个菜单项单击事件：

bottomAppBar.setOnMenuItemClickListener { item -> 
    when(item.itemId) {
        R.id.item1 -> {
            // Do something for menu item 1
            true
        }
        R.id.item2 -> {
            // Do something for menu item 2
            true
        }
        else -> false
    }
}

导航项呢？

鉴于导航项目不属于膨胀菜单的一部分，因此需要在上分别进行设置BottomAppBar。这可以用XML完成：

< com.google.android.material.bottomappbar.BottomAppBar 
  ... 
  app：navigationIcon =“ @ drawable / ic_navigation” 
  app：navigationContentDescription =“ @ string / cd_navigation” />

另外，也可以通过编程方式完成：

bottomAppBar.setNavigationIcon（R.drawable。ic_navigation）
bottomAppBar.setNavigationContentDescription（R.string。cd_navigation）

检测单击导航项的时间与常规菜单项的完成非常相似。

如果您使用的是上述setSupportActionBar方法，请检查回调中的android.R.id.homeID onOptionsItemSelected。

另外，还存在一个便利功能：

bottomAppBar.setNavigationOnClickListener { 
    //对导航项进行操作
}

锚定FAB⚓

甲FloatingActionButton可锚固到BottomAppBar。这引起了人们对FAB的重要屏幕动作的注意，同时还减少了两个组件占用的垂直空间。菜单项将根据所选的锚固属性更改位置。

从设计的角度来看，有两种锚定FAB的方法：

• 插图：变形后的形状BottomAppBar允许FAB在“切口”内“摇篮”（在同一高度）。这是默认行为。

嵌入式锚固FAB

• 重叠：FAB只是放置在上方BottomAppBar（较高的高度），对形状没有影响。

重叠锚定FAB

注意：《材料指南》告诫不要将扩展FAB与底部应用栏一起使用。在Android的Material Components中添加了有限的锚定支持*1.1.0-alpha04*，但不支持抠图和动画。

为了实现这一点，FAB还需要位于父级中CoordinatorLayout：

< androidx.coordinatorlayout.widget.CoordinatorLayout 
  ... > 
  < com.google.android.material.bottomappbar.BottomAppBar 
    ... /> 
  < com.google.android.material.floatingactionbutton.FloatingActionButton 
    ... 
    app：layout_anchor =“ @ id / bottomAppBar“ /> 
</ androidx.coordinatorlayout.widget.CoordinatorLayout >
![1_VcTCw9qYAxpzfxTULGItIQ.png](https://img.haomeiwen.com/i4876522/6226f50e8dddf77f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

默认情况下，FAB固定并水平居中对齐。存在许多属性可以自定义这些属性：

• fabAlignmentMode：FAB的水平对齐。可以将其设置为center（FAB_ALIGNMENT_MODE_CENTER，默认）或end（FAB_ALIGNMENT_MODE_END）。以编程方式更改后，fabAnimationMode将运行隐藏/显示动画（由下面定义）。

• fabCradleMargin：FAB边缘与通讯BottomAppBar座切口之间的距离。默认为5dp。

• fabCradleRoundedCornerRadius：通讯BottomAppBar座切口的拐角半径。默认为8dp。

• fabCradleVerticalOffset：FAB相对于通讯BottomAppBar座切口的垂直偏移距离。默认值为0dp，表示FAB中心将与的顶部对齐BottomAppBar。

• fabAnimationMode：更改时使用的动画样式fabAlignmentMode（如上所述）。可以将其设置为scale（FAB_ANIMATION_MODE_SCALE，默认）或slide（FAB_ANIMATION_MODE_SLIDE）。

FAB动画模式

注意：所有这些属性也可以通过编程设置。

这些属性的命名表明该BottomAppBar组件不支持重叠的FAB锚。但是，我们可以使用fabCradleMargin和fabCradleRoundedCornerRadius来伪造此行为0dp。

滚动行为☝

如果屏幕上包含可滚动的内容（例如A RecyclerView或NestedScrollView），则可以BottomAppBar使用hideOnScroll属性控制响应滚动的方式。同样，滚动容器也需要位于父容器中CoordinatorLayout：

< androidx.coordinatorlayout.widget.CoordinatorLayout 
  ... > 
  < androidx.core.widget.NestedScrollView 
    ... />
   < com.google.android.material.bottomappbar.BottomAppBar 
    ... 
    app：hideOnScroll =“ true” /> 
< / androidx.coordinatorlayout.widget.CoordinatorLayout >

如果设置为true，则BottomAppBar在上/下滚动内容时，将以动画方式自动隐藏/显示。

您可以BottomAppBar用BottomAppBar#performHide/ BottomAppBar#performShow分别以编程方式隐藏/显示。

隐藏在滚动条上

主题🎨

本BottomAppBar：可以在三个材料主题化子系统方面进行主题颜色，排版和形状。有两个从继承的样式变体Widget.MaterialComponents.BottomAppBar，每个样式变体都带有可选的样式后缀：Surface（默认，无后缀）和彩色（*.Colored）。实施全局自定义BottomAppBar样式时，请在您的应用程序主题中使用bottomAppBarStyle属性引用它。

颜色

BottomAppBar可以使用该backgroundTint属性自定义背景色。colorSurface对于表面底部应用程序栏和colorPrimary彩色底部应用程序栏，默认为。

注意：请勿*android:background*与一起使用*BottomAppBar*，因为这会破坏FAB通讯座的内部处理。

BottomAppBar可以使用该materialThemeOverlay属性自定义菜单/导航项目的颜色。有两个从继承的主题覆盖变体ThemeOverlay.MaterialComponents.BottomAppBar，每个都有一个样式后缀：Surface（*.Surface）和彩色（*.Colored）。它们包含两个属性：（colorControlNormal用于自定义菜单/导航图标颜色）和actionMenuTextColor（用于自定义溢出菜单文本颜色）。通常，您希望保持相同。colorOnSurfaceEmphasisMedium对于表面底部应用栏和colorOnPrimary彩色底部应用栏，它们默认为。

注意：以上方法要求您将菜单/导航图标资源的色调/颜色设置为*colorControlNormal*。如果使用[*VectorDrawable*](https://developer.android.com/reference/android/graphics/drawable/VectorDrawable)s，则可以通过*android:tint*属性来实现。如果您使用的是栅格（PNG / JPG）资产，则可以将其包装*<bitmap>*在新的XML资源中，以应用*android:tint*。这不像例如*itemIconTint*属性那样直观。您可以星发布此的问题跟踪器。

颜色主题

版式

没有主要文本作为BottomAppBar组件的一部分。但是，对于大型菜单，将有一个溢出操作菜单。这些文本项将采用fontFamily您的应用主题中定义的属性。

输入主题

形状

在撰写本文时，适用于Android的材料组件的最新版本为，1.2.0-alpha05并且全局形状主题属性（例如shapeAppearanceMediumComponent）不受影响BottomAppBar。具体来说，FAB通讯座仅支持圆角（相对于切角）。一个手动解决方法已被添加到材料零件的Android GitHub的仓库，并希望使其进入形状在未来的版本主题化。您可以星发布此的问题跟踪器。

形状主题

更多资源📚

• 本文中使用的Playground应用程序的源代码可以在GitHub上找到。
• 底部应用栏设计文档
• 底部应用栏API文档

---

我希望这篇文章对Bottom App Bar以及如何在您的Android应用程序中使用它有所了解。如果您有任何疑问，想法或建议，那么我很乐意收到您的来信！

在Twitter上找到我@ricknout