如何在Android Fragment中实现上滑手势打开Bottom Sheet Dialog？

1. 引入Material组件依赖 #

如果项目还没引入Material组件库，先在模块级build.gradle的dependencies块中添加依赖，已引入可直接跳过：

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

添加后同步项目即可。

2. 编写BottomSheet的布局文件 #

新建布局文件dialog_bottom_sheet.xml，可按需求自定义内容，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="底部弹窗内容"
        android:textSize="18sp"
        android:layout_marginBottom="16dp"/>
    <!-- 此处可添加其他自定义控件 -->
</LinearLayout>

3. 在Fragment中添加上滑手势监听 #

在Fragment的onViewCreated方法中添加手势检测逻辑，识别上滑动作后触发弹窗：

// 全局定义手势检测器和滑动阈值（阈值可自行调整，避免误触，单位为像素）
private lateinit var gestureDetector: GestureDetector
private val swipeMinDistance = 100

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    // 初始化手势检测器
    gestureDetector = GestureDetector(requireContext(), object : GestureDetector.SimpleOnGestureListener() {
        override fun onFling(
            e1: MotionEvent?,
            e2: MotionEvent,
            velocityX: Float,
            velocityY: Float
        ): Boolean {
            e1 ?: return false
            // 计算纵向滑动距离，dy<0代表向上滑动
            val dy = e2.y - e1.y
            // 判断为纵向滑动且滑动距离超过阈值时触发弹窗
            if (dy < -swipeMinDistance && abs(velocityY) > abs(velocityX)) {
                showBottomSheetDialog()
                return true
            }
            return super.onFling(e1, e2, velocityX, velocityY)
        }
    })

    // 给Fragment根布局设置触摸监听，将触摸事件传给手势检测器
    view.setOnTouchListener { _, event ->
        gestureDetector.onTouchEvent(event)
        // 如果Fragment内部有可滚动控件（RecyclerView/ScrollView等），此处返回false避免拦截控件自身的滚动事件
        false
    }
}

// 弹出BottomSheetDialog的方法
private fun showBottomSheetDialog() {
    val bottomSheetDialog = BottomSheetDialog(requireContext())
    bottomSheetDialog.setContentView(R.layout.dialog_bottom_sheet)
    // 可按需添加其他配置，比如是否允许点击外部关闭
    // bottomSheetDialog.setCanceledOnTouchOutside(false)
    bottomSheetDialog.show()
}

特殊场景适配 #

如果Fragment内部有可滚动控件，只需要给滚动控件添加滚动监听，在控件已经滚动到顶部、用户继续向上滑动的时候再触发弹窗，即可避免和控件自身滚动逻辑冲突。

内容的提问来源于stack exchange，提问作者Lộc Trần Phước