Material Design 中的 Bottom Sheet 使用指南-JavaScript中文网-JavaScript教程资源分享门户

Bottom Sheet 是 Google 在 Material Design 中推荐的一种 UI 元素，可以提供更加自然的用户体验，它通常位于 App 的底部，可以滑动打开，展示一些跟当前内容相关的选项，起到提高 App 功能性的效果，本文将介绍 Bottom Sheet 的使用方法。

Bottom Sheet 的类型

Bottom Sheet 有两种类型，分别是 Persistent Bottom Sheet 和 Modal Bottom Sheet

Persistent Bottom Sheet

Persistent Bottom Sheet 是一种持续性的 Bottom Sheet，它会一直存在于 App 底部，不会自动关闭，通常在 App 主要功能之下使用，如图：

Modal Bottom Sheet

Modal Bottom Sheet 是一种模态 Bottom Sheet，它会覆盖在原有的页面之上，点击其他区域会自动关闭，一般用于临时性的操作，如图：

Bottom Sheet 的使用方法

在使用 Bottom Sheet 之前，我们需要引入 Material Design 的相关库，如下：

implementation 'com.google.android.material:material:x.x.x'

Persistent Bottom Sheet 的使用方法

在 layout 文件中添加 CoordinatorLayout 和 BottomSheetBehavior，此外，还需要添加一个 FrameLayout 用于放置 Bottom Sheet 中的内容，布局文件如下：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <!-- 在这里添加 Bottom Sheet 中的内容，可根据需求进行修改 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="这里是 Bottom Sheet 中的内容" />

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

接下来在 Activity 或 Fragment 中实例化 BottomSheetBehavior 并将它绑定到 FrameLayout 上，绑定后就可以通过调用 BottomSheetBehavior 的 setState() 方法来打开和关闭 Bottom Sheet，如下所示：

class MainActivity : AppCompatActivity() {

    private lateinit var bottomSheetBehavior: BottomSheetBehavior<FrameLayout>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet)

        // 设置 Bottom Sheet 的状态（可使用 STATE_COLLAPSED、STATE_EXPANDED、STATE_HIDDEN 和 STATE_HALF_EXPANDED）
        bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED

        // 监听 Bottom Sheet 状态的变化
        bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetCallback() {
            override fun onStateChanged(bottomSheet: View, newState: Int) {
                // do something
            }

            override fun onSlide(bottomSheet: View, slideOffset: Float) {
                // do something
            }
        })
    }

}

Modal Bottom Sheet 的使用方法

在 layout 文件中添加一个 Button 用于打开 Modal Bottom Sheet，再添加一个 FrameLayout 用于放置 Modal Bottom Sheet 中的内容，布局文件如下：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_bottom_sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="打开 Bottom Sheet"
        android:layout_centerInParent="true" />

    <FrameLayout
        android:id="@+id/modal_bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <!-- 在这里添加 Modal Bottom Sheet 中的内容，可根据需求进行修改 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="这里是 Modal Bottom Sheet 中的内容" />

    </FrameLayout>

</RelativeLayout>

接下来在 Activity 或 Fragment 中实例化 BottomSheetBehavior 并将它绑定到 FrameLayout 上，即可通过点击 Button 来打开 Modal Bottom Sheet，如下所示：

class MainActivity : AppCompatActivity() {

    private lateinit var bottomSheetBehavior: BottomSheetBehavior<FrameLayout>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        bottomSheetBehavior = BottomSheetBehavior.from(modal_bottom_sheet)

        btn_bottom_sheet.setOnClickListener {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        }

        bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetCallback() {
            override fun onStateChanged(bottomSheet: View, newState: Int) {
                // do something
            }

            override fun onSlide(bottomSheet: View, slideOffset: Float) {
                // do something
            }
        })
    }

}

总结

本文详细介绍了 Material Design 中的 Bottom Sheet 的两种类型，以及它们的使用方法，并提供了相应的示例代码，读者可根据自己的需求进行相应的修改。Bottom Sheet 作为 Material Design 中的一个常见 UI 元素，它的使用可以帮助我们提高 App 的功能性和用户体验，建议读者加强对其的学习和运用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659e6d08add4f0e0ff762222

Material Design 中的 Bottom Sheet 使用指南