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="" />
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
欢迎关注微信公众号：非也缘也
- 7364
-
ObliviateOnline
Android
掘金·金石计划
- 1.1w
-
Android
Android Jetpack
Kotlin
- 2894
-
风雨_83
掘金·日新计划
Flutter
Android
- 2720
-
Kongzue
Android
GitHub
