Android弹窗探究之Dialog(二)—— BottomSheetDialog的基本使用

在上篇介绍完Dialog的基本使用之后,接下来我们就具化一下,看下最近比较流行的MD样式的底部弹出框BottomSheetDialog,先看下效果。


1 00_00_00-00_00_30~3.gif

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的简单使用就完成了。

你可能感兴趣的:(Android弹窗探究之Dialog(二)—— BottomSheetDialog的基本使用)