Android BottomSheetDialog

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

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

示例：

父布局

<?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>
           

底部菜单布局

<?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>
           

代码实现

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"

<?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>
           

<?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>
           

...
    private fun initView() {
        btn.setOnClickListener {
						// 添加 style
            bottomSheetDialog = BottomSheetDialog(this, R.style.BottomSheetDialog)
						...
        }
    }
           

<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

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