Android BottomSheetDialog

发表于 分类于 Waline： 阅读次数： 本文字数： 4.8k 阅读时长 ≈ 4 分钟

MD 风格的底部弹窗，比自定义 Dialog 或 PopupWindow 使用更简单，功能也更强大，比如可以方便的实现拖拽关闭。 细分来说，分为 BottomSheet、BottomSheetDialog、BottomSheetDialogFragment。

  • BottomSheet：依赖于 CoordinatorLayout 和 BottomSheetBehavior，需要将底部菜单作为CoordinatorLayout 的子 View，并且有三个关键的属性需要其设置。
    • app:layout_behavior=”@string/bottom_sheet_behavior”：代表这是一个 Bottom Sheet。
    • app:behavior_peekHeight=”66dp”：当关闭时，底部能看到的高度，不显示的话设置为 0 即可。
    • app:behavior_hideable=”true”：当拖拽下拉时，是否能全部隐藏。
  • BottomSheetDialog：不必指定父布局是 CoordinatorLayout。因为在 setContentView 时，自定义布局也是会自动被 CoordinatorLayout 包裹起来。
  • BottomSheetDialogFragment：通过继承 BottomSheetFragment 来实现底部菜单布局，并且根据 Fragment 的生命周期做较多逻辑操作的情况。

BottomSheetDialog

使用起来更灵活。父布局与底部菜单布局正常写即可。

示例：

父布局

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="" />

        <TextView
            android:id="@+id/plot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="" />
    </LinearLayout>
</LinearLayout>

底部菜单布局

include_bottomsheetdialog.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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="wrap_content">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />

    <View
        android:layout_width="40dp"
        android:layout_height="5dp"
        android:layout_centerHorizontal="true"
        android:background="@android:color/black" />

    <TextView
        android:id="@+id/tv_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_below="@id/tv_next"
        android:layout_marginTop="10dp" />

</RelativeLayout>

代码实现

MainActivity.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private lateinit var bottomSheetDialog : BottomSheetDialog
private val mList = ArrayList<Bean>()
private lateinit var adapter: Adapter

private fun initView() {

    btn.setOnClickListener {

        bottomSheetDialog = BottomSheetDialog(this)
        val view = LayoutInflater.from(this).inflate(R.layout.include_bottomsheetdialog.xml, null)
      
        val layoutManager = StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL)
        view.rv.layoutManager = layoutManager
        adapter = Adapter(mList)
        view.rv.adapter = adapter

        bottomSheetDialog.setContentView(view)
        bottomSheetDialog.setCancelable(true)
        bottomSheetDialog.setCanceledOnTouchOutside(true)
        bottomSheetDialog.show()
    }
}

圆角设置：

底部菜单布局添加 android:background=”@drawable/bottomsheetdialog”

include_bottomsheetdialog.xml
1
2
3
4
5
6
7
8
<?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="wrap_content"
    android:background="@drawable/bottomsheetdialog">
    
    ...
</RelativeLayout>
bottomsheetdialog.xml
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <corners
        android:topRightRadius="16dp"
        android:topLeftRadius="16dp"/>
</shape>
MainActivity.kt
1
2
3
4
5
6
7
8
...
private fun initView() {
    btn.setOnClickListener {
    // 添加 style
        bottomSheetDialog = BottomSheetDialog(this, R.style.BottomSheetDialog)
    ...
    }
}
styles.xml
1
2
3
4
5
6
7
8
9
10
11
12
<resources>

    ...

    <style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
    </style>
    <style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@android:color/transparent</item>
    </style>

</resources>

备注

参考资料：

BottomSheetDialog | Android Developers

欢迎关注微信公众号：非也缘也