Bottom Sheet

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

有兩種類型的 Bottom Sheet:

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

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

Bottom Sheets 具有物種狀態：

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

如果已經在 Activity 使用 CoordinatorLayout，添加底部表單很簡單：

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

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

app:layout_behavior="@string/bottom_sheet_behavior"

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

3. 設置所需的行為標志：

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

BottomSheetBehavior

bottom sheet 的狀態是通過 BottomSheetBehavior 來設置的，因此需要先得到 BottomSheetBehavior 對象，然后調用 BottomSheetBehavior.setState() 來設置狀態，比如設置為折疊狀態。當然也可以使用 getState() 來獲取當前狀態。

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

// TODO 設置為折疊狀態
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

// TODO 獲取當前 BottomSheetBehavior 的狀態
bottomSheetBehavior.getState()

要監聽 Bottom Sheet 的狀態變化則要使用 addBottomSheetCallback() 方法，之所以要監聽是因為 Bottom Sheet 的狀態還可以通過手勢來改變。

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. 模態 bottom sheet: 顧名思義，模態的 bottom sheet 在打開的時候會阻止和主界面的交互，并且在視覺上會在 bottom sheet 背后加一層半透明的陰影，使得看上去深度(evelation)更深。

BottomSheetDialog

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

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

完整 Demo

鏈接: https://pan.baidu.com/s/1ozPLg2j8pByY4lk0XnSI2Q

提取碼: bsu8?