快捷導(dǎo)航

Android開發(fā)之BottomSheetDialog組件的使用

更新時(shí)間：2023年01月09日 10:50:29 作者：別偷我的豬_09

BottomSheetDialog是底部操作控件，可在屏幕底部創(chuàng)建一個(gè)支持滑動(dòng)關(guān)閉視圖。本文將通過示例詳細(xì)講解它的使用，感興趣的小伙伴可以了解一下

Bottom Sheet

Bottom Sheet 是 Design Support Library 23.2 版本引入的一個(gè)類似于對(duì)話框的控件，可以暫且叫做底部彈出框。Bottom Sheet 中的內(nèi)容默認(rèn)是隱藏起來的，只顯示很小一部分，可以通過在代碼中設(shè)置其狀態(tài)或者手勢操作將其完全展開，或者完全隱藏，或者部分隱藏。

有兩種類型的 Bottom Sheet:

1. Persistent bottom sheet: 通常用于顯示主界面之外的額外信息，它是主界面的一部分，只不過默認(rèn)被隱藏了，其深度(elevation)跟主界面處于同一級(jí)別；還有一個(gè)重要特點(diǎn)是在 Persistent bottom sheet 打開的時(shí)候，主界面仍然是可操作的，其實(shí) Persistent bottom sheet 不能算是一個(gè)控件，因?yàn)樗皇且粋€(gè)普通的布局在 CoordinatorLayout 這個(gè)布局之下所表現(xiàn)出來的特殊行為。所以其使用方式跟普通的控件也很不一樣，它必須在CoordinatorLayout 中，并且是CoordinatorLayout 的直接子 View 。

app:layout_behavior="@string/bottom_sheet_behavior", 定義了這個(gè)屬性就相當(dāng)于告訴了 CoordinatorLayout 該布局是一個(gè) bottom sheet, 它的顯示和交互和普通的 view 不同。@string/bottom_sheet_behavior 是一個(gè)定義在支持庫中的字符串，等效于 android.support.design.widget.BottomSheetBehavior 。

Bottom Sheets 具有物種狀態(tài)：

STATE_COLLAPSED: Bottom Sheets 是可見的，但只顯示可視高度(即部分可見)。此狀態(tài)通常是底部工作表的“靜止位置”。可視高度由開發(fā)人員選擇，應(yīng)足以表明有額外的內(nèi)容，允許用戶觸發(fā)某個(gè)動(dòng)作或擴(kuò)展 Bottom Sheets；
STATE_EXPANDED: Bottom Sheets 是可見的并且它是最大高度并且不是拖拽或沉降；
STATE_DRAGGING: 用戶主動(dòng)向上或向下拖動(dòng) Bottom Sheets；
STATE_SETTLING: 拖動(dòng)/輕掃手勢后，Bottom Sheets 將調(diào)整到特點(diǎn)高度。這將是可視高度，展開高度或0，以防用戶操作導(dǎo)致底部表單隱藏；
STATE_HIDDEN: Bottom Sheets 隱藏；

如果已經(jīng)在 Activity 使用 CoordinatorLayout，添加底部表單很簡單：

1. 將任何視圖添加為 CoordinatorLayout 的直接子視圖。

2. 通過在 xml 里添加如下屬性：

app:layout_behavior="@string/bottom_sheet_behavior"

"@string/bottom_sheet_behavior" == "com.google.android.material.bottomsheet.BottomSheetBehavior"，是定義在支持庫中的字符串。

3. 設(shè)置所需的行為標(biāo)志：

app:behavior_hideable: 是否可以通過拖拽隱藏底部表單。
app:behavior_peekHeight: 折疊狀態(tài)的窺視高度。
app:behavior_skipCollapsed: 如果底部表單可隱藏，并且設(shè)置為 true, 則表單不會(huì)處于折疊狀態(tài)。

BottomSheetBehavior

bottom sheet 的狀態(tài)是通過 BottomSheetBehavior 來設(shè)置的，因此需要先得到 BottomSheetBehavior 對(duì)象，然后調(diào)用 BottomSheetBehavior.setState() 來設(shè)置狀態(tài)，比如設(shè)置為折疊狀態(tài)。當(dāng)然也可以使用 getState() 來獲取當(dāng)前狀態(tài)。

// TODO 得到 BottomSheetBehavior 對(duì)象
bottomSheetBehavior = BottomSheetBehavior.from(binding.bottomSheet);

// TODO 設(shè)置為折疊狀態(tài)
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

// TODO 獲取當(dāng)前 BottomSheetBehavior 的狀態(tài)
bottomSheetBehavior.getState()

要監(jiān)聽 Bottom Sheet 的狀態(tài)變化則要使用 addBottomSheetCallback() 方法，之所以要監(jiān)聽是因?yàn)?Bottom Sheet 的狀態(tài)還可以通過手勢來改變。

bottomSheetBehavior.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                Log.i("HL", "newState" + newState);
            }
            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                Log.i("HL", "sdeOffset: " + slideOffset);
            }
        });

2. 模態(tài) bottom sheet: 顧名思義，模態(tài)的 bottom sheet 在打開的時(shí)候會(huì)阻止和主界面的交互，并且在視覺上會(huì)在 bottom sheet 背后加一層半透明的陰影，使得看上去深度(evelation)更深。

BottomSheetDialog

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

// TODO 創(chuàng)建 View 作為 BottomSheetDialog 的內(nèi)容展示，
View bt = getLayoutInflater().inflate(R.layout.dialog_bottom_sheet, null);
// TODO 將 View 添加進(jìn)來
mBottomSheetDialog.setContentView(bt);
mBottomSheetDialog.show();