亲宝软件园·资讯

展开

Android开发之BottomSheetDialog组件的使用

别偷我的猪_09 人气:0

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 。

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. 设置所需的行为标志:

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

链接: http://pan.baidu.com/s/1ozPLg2j8pByY4lk0XnSI2Q

提取码: bsu8 

加载全部内容

相关教程
猜你喜欢
用户评论