美文网首页安卓学习之鸿蒙&Android学习
Android弹窗探究之Dialog(二)—— BottomSh

Android弹窗探究之Dialog(二)—— BottomSh

作者: 乌托邦式的爱情 | 来源:发表于2021-07-05 10:57 被阅读0次

在上篇介绍完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的简单使用就完成了。

相关文章

网友评论

    本文标题:Android弹窗探究之Dialog(二)—— BottomSh

    本文链接:https://www.haomeiwen.com/subject/kivbultx.html