Android---Bottom Sheet
创始人
2024-05-08 02:54:37
0

       

 

目录​​​​​​​

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 。

        \bullet app:layout_behavior="@string/bottom_sheet_behavior", 定义了这个属性就相当于告诉了 CoordinatorLayout 该布局是一个 bottom sheet, 它的显示和交互和普通的 view 不同。@string/bottom_sheet_behavior 是一个定义在支持库中的字符串,等效于 android.support.design.widget.BottomSheetBehavior 。

Bottom Sheets 具有物种状态:

    \bullet STATE_COLLAPSED: Bottom Sheets 是可见的,但只显示可视高度(即部分可见)。此状态通         常是底部工作表的“静止位置”。可视高度由开发人员选择,应足以表明有额外的内容,允许用         户触发某个动作或扩展 Bottom Sheets;

    \bullet STATE_EXPANDED: Bottom Sheets 是可见的并且它是最大高度并且不是拖拽或沉降;

    \bullet STATE_DRAGGING: 用户主动向上或向下拖动 Bottom Sheets;

    \bullet STATE_SETTLING: 拖动/轻扫手势后,Bottom Sheets 将调整到特点高度。这将是可视高              度,展开高度或0,以防用户操作导致底部表单隐藏;

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

        \bullet app:behavior_hideable: 是否可以通过拖拽隐藏底部表单。

       \bullet app:behavior_peekHeight: 折叠状态的窥视高度。

       \bullet 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() {@Overridepublic void onStateChanged(@NonNull View bottomSheet, int newState) {Log.i("HL", "newState" + newState);}@Overridepublic 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

相关内容

热门资讯

银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AsusVivobook无法开... 首先,我们可以尝试重置BIOS(Basic Input/Output System)来解决这个问题。...
ASM贪吃蛇游戏-解决错误的问... 要解决ASM贪吃蛇游戏中的错误问题,你可以按照以下步骤进行:首先,确定错误的具体表现和问题所在。在贪...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...