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

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

【译】Android材质组件的动手实践：Bottom Sheet
【译】Android材质组件的动手实践：Bottom Navig
【译】Android材质组件的动手实践：Bottom App B
【译】Android材质组件的动手实践：Dialogs
【译】Android材质组件的动手实践：Cards
【译】Android材质组件的动手实践：Buttons
[译]三分钟玩转Android Bottom Sheet
【译】Android材质组件的动手实践：Selection Co
Android Bottom Sheet
Bottom Sheet

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

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

为Android设置Material Components主题

底页是包含补充屏幕内容的表面组件。它们固定在屏幕底部（使它们在移动/平板电脑设备上符合人体工程学），并且类似于Dialogs，它们位于主屏幕内容上方。在大多数情况下，可以通过向上/向下拖动手势来扩展/关闭它们。

从设计的角度来看，有两种类型的底表：

标准底页：它们独立运行以（并允许与之交互）主屏幕内容。它们可以处于展开，折叠或隐藏状态。
模态底部表：它们阻止主屏幕内容，必须与之交互或关闭。可在其后面显示一个半透明的稀松布，可以轻按以将其解雇，以指示底层UI暂时不可访问。

标准底板（左），模态底板（右）

注意：存在第三种类型：扩展底页。在撰写本文时，Android的Material Components的最新版本是，*1.2.0-alpha05*并且没有标准组件或类可以处理此问题。可以使用诸如MotionLayout之类的方法来实现自定义实现，但这不在本文的讨论范围之内。

基本用法🏁

实施底页并不像使用单个组件那样简单。每种材料表在Android的Material Components中都有不同的类。

标准底頁

子View项CoordinatorLayout可以通过使用启用“标准底表”特征[BottomSheetBehavior](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/bottomsheet/BottomSheetBehavior.java)。这样，我们可以处理底部锚定，上/下手势支持和动画状态转换等操作。

这可以在您的屏幕布局中完成，如下所示：

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

  < FrameLayout 
    android：id =“ @ + id / standardBottomSheet” 
    android：layout_width =“ match_parent” 
    android：layout_height =“ match_parent” 
    style =“？attr / bottomSheetStyle” 
    app：layout_behavior =“ com.google.android.material.bottomsheet.BottomSheetBehavior” > 

    <!-- Bottom Sheet Contents -->

   </ FrameLayout > 

</ androidx.coordinatorlayout.widget.CoordinatorLayout >

在上面的示例中，我们的底表实际上是FrameLayout。最重要的部分是该layout_behavior属性设置为com.google.android.material.bottomsheet.BottomSheetBehavior。我们还为该bottomSheetStyle属性应用了一些默认样式（背景形状/色调，高程等），下面将在“主题”部分中对其进行详细讨论。

模态底板

对于模态底板，实现是不同的。的[BottomSheetDialogFragment](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/bottomsheet/BottomSheetDialogFragment.java)类（延伸[AppCompatDialogFragment](https://developer.android.com/reference/androidx/appcompat/app/AppCompatDialogFragment)）提供除了现有的期望的模态行为DialogFragment功能。

首先，BottomSheetDialogFragment需要创建一个子类，并且onViewCreated必须重写回调以提供工作表内容的布局：

class ModalBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.modal_bottom_sheet, container, false)

    companion object {
        const val TAG = "ModalBottomSheet"
    }
}

然后，在中[AppCompatActivity](https://developer.android.com/reference/androidx/appcompat/app/AppCompatActivity)，可以使用类来显示工作表，如下所示：

valmodalBottomSheet = ModalBottomSheet（）
modalBottomSheet.show（supportFragmentManager，ModalBottomSheet。TAG）

值得一提的是，在引擎盖下，BottomSheetDialogFragment还使用了BottomSheetBehavior在[BottomSheetDialog](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/bottomsheet/BottomSheetDialog.java)类标准的转换AppCompatDialogFragment，以一个有下片的特点。BottomSheetDialog如果您不想使用，可以单独使用Fragment。

调整行为⚙️

存在多种可用于调整标准底模和模态底片性能的属性。这包括“窥视”（折叠）高度，隐藏性，内容适合度等内容。

应用属性

对于标准的底部的纸张，将这些属性可以在XML应用的属性相同的孩子做View一个具有layout_behavior属性设置为BottomSheetBehavior。在上面“基本用法”部分的示例中，这是FrameLayout。

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

val standardBottomSheetBehavior = BottomSheetBehavior.from(standardBottomSheet)
// Use this to programmatically apply behavior attributes

对于模态底部工作表，工作表本身没有XML布局定义，但是我们可以利用应用程序级主题属性和样式：

<style name="ModalBottomSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
  <!-- Apply attributes here -->
</style>

<style name="ModalBottomSheetDialog" parent="ThemeOverlay.MaterialComponents.*.BottomSheetDialog">
  <item name="bottomSheetStyle">@style/ModalBottomSheet</item>
</style>

<style name="AppTheme" parent="Theme.MaterialComponents.*">
  <item name="bottomSheetDialogTheme">@style/ModalBottomSheetDialog</item>
</style>

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

val standardBottomSheetBehavior = BottomSheetBehavior.from(standardBottomSheet)
// Use this to programmatically apply behavior attributes

属性

既然我们知道如何应用属性，那么让我们深入研究哪些属性对我们可用。

behavior_hideable：确定在使用下拉手势时是否可以隐藏工作表（请记住，可以始终通过编程方式隐藏工作表）。对于标准底板，默认值为false；对于模式底板，默认值为true。
behavior_draggable：确定使用拖动手势时是否可以折叠/扩展图纸（请记住，需要实现自定义方式来扩展/折叠图纸）。默认值是true。
behavior_skipCollapsed：确定隐藏图纸时是否应忽略折叠状态。如果behavior_hideable未设置为true，则无效。默认值为false。
behavior_fitToContents：确定展开的图纸的高度是否包裹其内容。或者，它可以分为两个阶段：父容器的一半高度，父容器的整个高度。默认值是true。
behavior_halfExpandedRatio：确定处于半展开状态时的图纸高度（以父容器高度的比率）。如果behavior_fitToContents未设置为false，则此效果无效，并且应大于窥视高度。默认值为0.5（“材料准则”中的建议比例）。
behavior_expandedOffset：确定展开状态下图纸从父容器顶部的偏移量。如果behavior_fitToContents未设置为false，则此设置无效，并且应大于处于半展开状态时的偏移量。默认值为0dp（工作表的顶部与父容器的顶部匹配）。
behavior_peekHeight：图纸的初始“窥视”（折叠状态）高度。默认值为auto，它将在父容器的16：9比例关键点处设置窥视高度。否则，可以使用尺寸（或以编程方式设置像素值）。

关于模态解雇动画的一句话

您可能会注意到，对于模态底部工作表（即BottomSheetDialog或BottomSheetDialogFragment），调用时使用的动画dismiss()与正常的拖拽动画不匹配。从Android的Material Components开始1.1.0-alpha10，存在一个选择加入标志来对齐这些动画：

// If using BottomSheetDialog directly
bottomSheetDialog.dismissWithAnimation = true
// If using BottomSheetDialogFragment (do in onActivityCreated)
(requireDialog() as BottomSheetDialog).dismissWithAnimation = true

设置（和保存）状态💾

可以通过用户交互来更改底表的状态，但是我们也可以通过编程方式进行更改。默认情况下，这些状态更改是动态的。

Bottom Sheet 状态

设定状态

可以在上设置以下状态BottomSheetBehavior：

STATE_EXPANDED：工作表已完全展开。
STATE_COLLAPSED：工作表已折叠（“窥视”）。
STATE_HIDDEN：工作表处于隐藏状态，只能以编程方式重新显示。
STATE_HALF_EXPANDED：工作表已展开一半（仅behavior_fitToContents在已设置为false的情况下适用）。

可以这样完成：

bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED

尽管不应通过编程方式设置这些值，但a BottomSheetBehavior也可以处于以下状态之一：

STATE_DRAGGING：正在通过手势向上/向下拖动工作表。
STATE_SETTLING：由于以编程方式设置了其状态，因此工作表正在上/下动画。

在配置更改时保留属性状态

我们可以选择当主机Activity经历配置更改时（即，View代表我们的底页被破坏并重新创建）我们希望保留的状态的哪些方面。在这种情况下，“状态”是指上面“调整行为”部分中讨论的属性。

可以在上设置以下标志（或与按位OR操作结合）BottomSheetBehavior：

SAVE_PEEK_HEIGHT：behavior_peekHeight将保留该属性。
SAVE_FIT_TO_CONTENTS：behavior_fitToContents将保留该属性。
SAVE_HIDEABLE：behavior_hideable将保留该属性。
SAVE_SKIP_COLLAPSED：behavior_skipCollapsed将保留该属性。
SAVE_ALL：将保留所有上述属性。
SAVE_NONE：将不保留任何属性。这是默认值。

可以这样完成：

bottomSheetBehavior.saveFlags = BottomSheetBehavior.SAVE_ALL

还有一个相应的behavior_saveFlagsXML属性，可以在布局和样式中使用。

侦听状态更改和幻灯片回调 👂

我们可以侦听对“底部工作表”状态的更改以及当前的幻灯片偏移。这可用于协调其他UI更改，例如淡入/淡出其他Views，调整系统栏颜色等。

调整幻灯片上的背景色

一个BottomSheetCallback可以添加到一个BottomSheetBehavior像这样：

val bottomSheetCallback = object : BottomSheetBehavior.BottomSheetCallback() {
    
    override fun onStateChanged(bottomSheet: View, newState: Int) {
        // Do something for new state
    }

    override fun onSlide(bottomSheet: View, slideOffset: Float) {
        // Do something for slide offset
    }
}
bottomSheetBehavior.addBottomSheetCallback(bottomSheetCallback)

在onStateChanged回调中，newState参数将是上面“设置（和保存）状态”一节中讨论的状态常数之一。

在onSlide回调中，该slideOffset参数是[-1.0，1.0]范围内的Float值。隐藏状态为-1.0，折叠状态为0.0，展开状态为1.0。该值线性插值，并随着图纸向上移动而增加。

注意：可以添加多个回调（并通过删除*BottomSheetBehavior#removeBottomSheetCallback*）。

主题🎨

可以根据三个材料主题子系统对底页进行主题设置：颜色，版式和形状。对于标准底表，没有现有的样式变体，但是我们可以创建自己的样式。实施全局“标准底表”样式时，请在您的应用程序主题中使用bottomSheetStyle属性引用该样式。对于模态底部工作表，我们已经在上面的“调整行为”部分中显示了要使用的样式/属性。主题属性适用于两种图纸类型。