Kotlin 中的 Android BottomSheet 示例

BottomSheet 是一种 Android 中的交互式界面元素，可向用户表示有关当前应用程序上下文的信息，可以在屏幕底部使用，还可以滑动展开或折叠。BottomSheet 可以是“持久性”的，也可以是“模态”的（即只有在用户与其交互时才会展开）。在本文中，我们将介绍如何使用 Kotlin 在 Android 应用程序中实现 BottomSheet。

概述

本文所用的代码示例基于 Android Studio 的最新版本。

安装

要在 Android 应用程序中使用 BottomSheet，需要在应用程序的 build.gradle 文件中添加以下依赖项：

dependencies {
    implementation 'com.google.android.material:material:1.5.0-alpha01'
}

这会将 Material 设计库添加到项目中，其中包括 BottomSheet 的支持。

基本用法

要在应用程序中使用 BottomSheet，您需要以下文件：

• 包含 BottomSheet 的布局文件
• BottomSheetDialogFragment 类

布局文件

我们的布局文件将简单包含一个 RecyclerView 和一个 FloatingActionButton，无需进行任何额外的设置或使用样式。在这个布局文件中，我们将添加一个视图来触发 BottomSheet：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_add_note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_white_24dp" />
 
    <TextView
        android:id="@+id/tv_sheet_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="16dp"
        android:text="Bottom Sheet Example"
        android:textColor="@color/white"
        android:textSize="20sp" />
 
    <View
        android:id="@+id/view_separator"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/tv_sheet_title"
        android:background="#DDDDDD" />
 
    <TextView
        android:id="@+id/tv_sheet_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/view_separator"
        android:padding="16dp"
        android:text="This is the content of the Bottom Sheet" />
 
</RelativeLayout>

BottomSheetDialogFragment

我们将创建一个名为 NotesBottomSheetDialog 的 BottomSheetDialogFragment 类。我们需要覆盖 onCreateDialog() 方法并返回一个 BottomSheetDialog 实例，该 BottomSheetDialog 使用我们的布局文件：

class NotesBottomSheetDialog : BottomSheetDialogFragment() {
 
    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val view = layoutInflater.inflate(R.layout.bottom_sheet_notes, null)
        val dialog = BottomSheetDialog(requireContext(), theme)
        dialog.setContentView(view)
 
        return dialog
    }
 
    companion object {
        val TAG: String = NotesBottomSheetDialog::class.java.simpleName
 
        fun newInstance(): NotesBottomSheetDialog =
            NotesBottomSheetDialog()
    }
 
}

触发 BottomSheet

要触发 BottomSheet，您只需按下 FloatingActionButton：

fab_add_note.setOnClickListener {
    NotesBottomSheetDialog.newInstance().show(parentFragmentManager, NotesBottomSheetDialog.TAG)
}

完成了！您现在可以在应用程序中使用具有基本信息的 BottomSheet。

通过 RecyclerView 显示数据

要使用 RecyclerView 显示数据，我们需要一个适配器。 下面是我们的 NoteAdapter 类：

class NoteAdapter(val notes: List<String>) : RecyclerView.Adapter<NoteViewHolder>() {
 
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NoteViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_note, parent, false)
        return NoteViewHolder(view)
    }
 
    override fun getItemCount(): Int = notes.size
 
    override fun onBindViewHolder(holder: NoteViewHolder, position: Int) {
        holder.bind(notes[position])
    }
 
}
 
class NoteViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
 
    fun bind(text: String) {
        itemView.tv_note_text.text = text
    }
 
}

此适配器将在我们的 BottomSheet 布局中显示每个便笺。

更新布局文件

我们需要将 RecyclerView 添加到布局文件中，并将 adapter 设置为 NoteAdapter：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/view_separator"
    android:clipToPadding="false"
    android:padding="16dp"
    android:scrollbars="vertical"/>

更新 BottomSheetDialogFragment

我们需要在 onCreateDialog() 方法中查找 RecyclerView 并将其与 NoteAdapter 搭配使用：

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val view = layoutInflater.inflate(R.layout.bottom_sheet_notes, null)
    val dialog = BottomSheetDialog(requireContext(), theme)
    dialog.setContentView(view)
 
    val notes = listOf("Note 1", "Note 2", "Note 3")
    val adapter = NoteAdapter(notes)
    view.recyclerView.adapter = adapter
 
    return dialog
}

好的，现在您的 BottomSheet 将使用 RecyclerView 显示数据。

总结

在本文中，您已经学会了如何使用 Kotlin 在 Android 应用程序中使用 BottomSheet，包括如何：

• 添加 BottomSheet 支持到应用程序中
• 创建 BottomSheet 的布局文件
• 创建 BottomSheetDialogFragment 类
• 将 RecyclerView 与 BottomSheet 搭配使用以显示数据

示例代码

示例代码可在以下 GitHub 存储库中找到：

https://github.com/Lingara/Android-Kotlin-Bottom-Sheet-Example