在上篇介绍完Dialog的基本使用之后，接下来我们就具化一下，看下最近比较流行的MD样式的底部弹出框BottomSheetDialog，先看下效果。
1 00_00_00-00_00_30~3.gif
BottomSheet
BottomSheet的效果是指从屏幕底部向上滑的效果，是MaterialDesign风格的一种,使用起来也很简单。
布局文件
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints">
<LinearLayout
android:id="@+id/ll_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_peekHeight="80dp"
app:layout_behavior="@string/bottom_sheet_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_red_light"
android:gravity="center"
android:text="上拉解锁隐藏功能"
android:textColor="@android:color/white"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_blue_light"
android:gravity="center"
android:text="第一个条目"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_orange_dark"
android:gravity="center"
android:text="第二个条目"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_green_light"
android:gravity="center"
android:text="第三个条目"
android:textSize="20sp" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
代码实现功能
val behavior = BottomSheetBehavior.from(ll_bottom_sheet)
if (behavior.state == BottomSheetBehavior.STATE_EXPANDED) {
// 打开状态，执行隐藏操作
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
} else {
// 隐藏状态，执行打开操作
behavior.state = BottomSheetBehavior.STATE_EXPANDED
}
需要强调一点的就是，由于BottomSheet属于MD风格，因此最直接的父布局需要设置为CoordinatorLayout，这样才能保证布局联动。
BottomSheetDialog
BottomSheetDialog是拥有MD风格的底部弹出框样式的Dialog，其基本的使用步骤为：
（1）创建View作为BottomSheetDialog的内容展示，通过
BottomSheetDialog.setContentView(view)进行添加。
val view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_recycler, null)
bottomSheetDialog.setContentView(view)
（2）获取对应的dialogBehavior并设置视图显示的高度
// 设置为全屏(直接在view里面设置高度为match_parent无效)
val dialogBehavior = BottomSheetBehavior.from(view.parent as View)
dialogBehavior.peekHeight = getScreenHeight()
（3）给我们的内容View添加数据
val recyclerView = view.findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.layoutManager = LinearLayoutManager(this)
val adapter = BottomSheetDialogAdapter()
recyclerView.adapter = adapter
adapter.setList(list)
在这里需要强调的是，在设置为全屏的时候，直接在布局里面设置为match_parent是无效的，需要手动在代码里面进行设置才可以。
BottomSheetDialog最终选择样式有三种：
全屏展示型
val bottomSheetDialog = BottomSheetDialog(this)
val list = arrayListOf<String>(
"第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个栏目",
"第32个栏目",
"第33个栏目",
"第34个栏目"
)
val view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_recycler, null)
bottomSheetDialog.setContentView(view)
// 设置为全屏(直接在view里面设置高度为match_parent无效)
val dialogBehavior = BottomSheetBehavior.from(view.parent as View)
dialogBehavior.peekHeight = getScreenHeight()
dialogBehavior.addBottomSheetCallback(object : BottomSheetCallback() {
override fun onStateChanged(view: View, i: Int) {
if (i == BottomSheetBehavior.STATE_HIDDEN) {
bottomSheetDialog.dismiss()
dialogBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
}
}
override fun onSlide(view: View, v: Float) {}
})
val recyclerView = view.findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.layoutManager = LinearLayoutManager(this)
val adapter = BottomSheetDialogAdapter()
recyclerView.adapter = adapter
adapter.setList(list)
bottomSheetDialog.show()
固定高度显示
val bottomSheetDialog = BottomSheetDialog(this)
val view = LayoutInflater.from(this).inflate(R.layout.dialog_bottom_sheet, null)
bottomSheetDialog.setContentView(view)
bottomSheetDialog.show()
系统默认显示
fun bottomSheetDialogFullScreenOrHalfScreenClick(view: View) {
val bottomSheetDialog = BottomSheetDialog(this)
val list = arrayListOf<String>(
"第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个栏目",
"第32个栏目",
"第33个栏目",
"第34个栏目"
)
val view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_recycler, null)
bottomSheetDialog.setContentView(view)
val recyclerView = view.findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.layoutManager = LinearLayoutManager(this)
val adapter = BottomSheetDialogAdapter()
recyclerView.adapter = adapter
adapter.setList(list)
bottomSheetDialog.show()
}
到这里，bottomSheetDialog的简单使用就完成了。
