Android彈窗探究之Dialog（二）—— BottomSheetDialog的基本使用

在上篇介紹完Dialog的基本使用之后，接下來我們就具化一下，看下最近比較流行的MD樣式的底部彈出框BottomSheetDialog，先看下效果。


1 00_00_00-00_00_30~3.gif

BottomSheet

BottomSheet的效果是指從屏幕底部向上滑的效果，是MaterialDesign風(fēng)格的一種,使用起來也很簡單。

布局文件

<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>

代碼實現(xiàn)功能

val behavior = BottomSheetBehavior.from(ll_bottom_sheet)
if (behavior.state == BottomSheetBehavior.STATE_EXPANDED) {
    // 打開狀態(tài)，執(zhí)行隱藏操作
    behavior.state = BottomSheetBehavior.STATE_COLLAPSED
} else {
    // 隱藏狀態(tài)，執(zhí)行打開操作
    behavior.state = BottomSheetBehavior.STATE_EXPANDED
}
需要強(qiáng)調(diào)一點的就是，由于BottomSheet屬于MD風(fēng)格，因此最直接的父布局需要設(shè)置為CoordinatorLayout，這樣才能保證布局聯(lián)動。

BottomSheetDialog

BottomSheetDialog是擁有MD風(fēng)格的底部彈出框樣式的Dialog，其基本的使用步驟為：

（1）創(chuàng)建View作為BottomSheetDialog的內(nèi)容展示，通過
BottomSheetDialog.setContentView(view)進(jìn)行添加。

val view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_recycler, null)
bottomSheetDialog.setContentView(view)

（2）獲取對應(yīng)的dialogBehavior并設(shè)置視圖顯示的高度

 // 設(shè)置為全屏(直接在view里面設(shè)置高度為match_parent無效)
val dialogBehavior = BottomSheetBehavior.from(view.parent as View)
dialogBehavior.peekHeight = getScreenHeight()

（3）給我們的內(nèi)容View添加數(shù)據(jù)

val recyclerView = view.findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.layoutManager = LinearLayoutManager(this)
val adapter = BottomSheetDialogAdapter()
recyclerView.adapter = adapter
adapter.setList(list)

在這里需要強(qiáng)調(diào)的是，在設(shè)置為全屏的時候，直接在布局里面設(shè)置為match_parent是無效的，需要手動在代碼里面進(jìn)行設(shè)置才可以。

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)
// 設(shè)置為全屏(直接在view里面設(shè)置高度為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()

系統(tǒng)默認(rèn)顯示

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容