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

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...