在上篇介绍完Dialog的基本使用之后,接下来我们就具化一下,看下最近比较流行的MD样式的底部弹出框BottomSheetDialog,先看下效果。
BottomSheet
BottomSheet的效果是指从屏幕底部向上滑的效果,是MaterialDesign风格的一种,使用起来也很简单。
布局文件
代码实现功能
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(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(
"第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(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(
"第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(R.id.recycler_view)
recyclerView.layoutManager = LinearLayoutManager(this)
val adapter = BottomSheetDialogAdapter()
recyclerView.adapter = adapter
adapter.setList(list)
bottomSheetDialog.show()
}
到这里,bottomSheetDialog的简单使用就完成了。