Android---Bottom Sheet

       

 

目录​​​​​​​

Bottom Sheet

BottomSheetBehavior

BottomSheetDialog

完整 Demo

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/1jlCH513cIaCNpOcl0qpcZA 
提取码：62ca