Android BottomSheetBehavior(底部弹窗)

目录

一、BottomSheetBehavior 介绍

二、BottomSheetBehavior 基本使用

2.1 在 CoordinatorLayout 中添加底部工作表:

2.2 在代码中获取 BottomSheetBehavior 实例:

2.3 设置工作表的状态,如展开、折叠等

2.4 工作表的状态

三、BottomSheetDialog

3.1 创建 BottomSheetDialog 实例:

3.2 设置对话框内容:

3.3 显示对话框

3.4 关闭对话框

3.5 布局

四、注意事项


一、BottomSheetBehavior 介绍

        BottomSheetBehavior 是 Material 库中的一个类,它用于实现底部工作表(Bottom Sheet)的交互行为。底部工作表是一个可以从屏幕底部向上滑动的交互式面板,通常用于显示与当前内容相关的补充信息或操作选项(如分享)。

        BottomSheetBehavior 允许你以可控制的方式实现底部工作表的显示和隐藏,以及与用户交互时的动画和手势。它提供了一些方法和回调来监控工作表的状态(例如折叠、展开或中间状态),以便你可以相应地调整应用程序的行为。

        你可以在布局文件中使用 CoordinatorLayoutBottomSheetBehavior 来定义一个视图作为底部工作表,并通过设置 app:layout_behavior 属性来关联 BottomSheetBehavior,从而定义其行为。

二、BottomSheetBehavior 基本使用

        要使用 BottomSheetBehavior,首先需要在布局文件中定义一个布局作为底部工作表,然后将其关联到 BottomSheetBehavior。以下是一个简单的步骤示例:

2.1 在 CoordinatorLayout 中添加底部工作表:

        app:layout_behavior="@string/bottom_sheet_behavior" 这个属性是必须的,否则无联动效果。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 主页面布局元素 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:padding="20dp"android:orientation="vertical"><Buttonandroid:id="@+id/btn_show"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Show BottomSheets" /><Buttonandroid:id="@+id/btn_show_dialog"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Show BottomSheet Dialog" /></LinearLayout><!-- 底部工作表的内容布局 --><androidx.core.widget.NestedScrollViewandroid:id="@+id/bottom_sheet"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="parent"app:behavior_hideable="true"app:behavior_peekHeight="0dp"app:layout_behavior="@string/bottom_sheet_behavior"><!-- 在这里添加底部工作表的内容 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:id="@+id/tv"android:layout_width="match_parent"android:layout_height="50dp"android:background="@color/purple_200"android:gravity="center"android:textColor="@android:color/white"android:text="BottomSheets,上下拖动试试"/><ImageViewandroid:layout_width="match_parent"android:layout_height="200dp"android:layout_margin="10dp"android:scaleType="centerCrop"android:src="@mipmap/bg"/></LinearLayout></androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

2.2 在代码中获取 BottomSheetBehavior 实例:

class BottomSheetsActivity:AppCompatActivity() {private lateinit var binding: ActivityBottomSheetsBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityBottomSheetsBinding.inflate(layoutInflater)setContentView(binding.root)// 获取 BottomSheetBehaviorval behavior = BottomSheetBehavior.from<View>(binding.bottomSheet)// 设置底部工作表的状态监听器和行为behavior.addBottomSheetCallback(object : BottomSheetCallback() {override fun onStateChanged(bottomSheet: View, newState: Int) {Log.i("BottomSheetBehavior", "newState: $newState")}override fun onSlide(bottomSheet: View, slideOffset: Float) {Log.i("BottomSheetBehavior", "slideOffset: $slideOffset")}})        }}

监听内容:

2.3 设置工作表的状态,如展开、折叠等

        通过setState即可直接展开、折叠、隐藏

        binding.btnShow.setOnClickListener {//判断 BottomSheetBehavior 的状态if (behavior.state == BottomSheetBehavior.STATE_EXPANDED) {//如果展开的话,则关闭behavior.setState(BottomSheetBehavior.STATE_COLLAPSED)} else {//如果未展开,则展开behavior.setState(BottomSheetBehavior.STATE_EXPANDED)}}

        通过2.1-2.3,你可以在你的 Android 应用中实现一个基本的底部工作表,并控制它的显示、隐藏以及与用户交互时的行为和动画效果。

2.4 工作表的状态

/**正在拖动中*/
public static final int STATE_DRAGGING=1;、/**正在向下收起*/
public static final int STATE_SETLING=2;,/**展开*/
public static int STATE_EXPANDED=3;/**折叠*/
public static final int STATE_COLLAPSED=4;/**隐藏*/
public static final int STATE_HIDDEN=5;/**底部图纸展开一半(当fitToContents为false时使用)*/
public static final int STATE_HALF_EXPANDED=6;

三、BottomSheetDialog

        BottomSheetDialogAndroid 中 Dialog 类的一种变体,它以底部工作表(Bottom Sheet)的形式展示内容。底部工作表对话框从屏幕底部弹出,提供一种非常流行的用户界面模式,用于显示与当前操作或内容相关的选项、操作或信息。

        与普通的对话框不同,底部工作表对话框以一种半透明的方式在底部显示,用户可以通过向上滑动的手势将其展开或关闭。这种对话框通常用于显示辅助操作、快捷方式、选项或其他次要信息,以提供更流畅的用户体验。

        它提供了一个简便的方法,在底部以对话框的形式展示内容。以下是一个使用 BottomSheetDialog 的简单示例:

3.1 创建 BottomSheetDialog 实例:

val mBottomSheetDialog = BottomSheetDialog(this@BottomSheetsActivity)

3.2 设置对话框内容:

val mBottomSheetDialog = BottomSheetDialog(this@BottomSheetsActivity)
val bt: View = layoutInflater.inflate(R.layout.dialog_bottom_sheet, null)
mBottomSheetDialog.setContentView(bt)
// 设置对话框其他属性(可选)
mBottomSheetDialog.setCancelable(true); // 设置是否可以通过点击对话框外部取消对话框
mBottomSheetDialog.setCanceledOnTouchOutside(true); // 设置是否可以通过点击对话框外部区域取消对话框

3.3 显示对话框

mBottomSheetDialog.show()

        BottomSheetDialog 将使用你提供的布局作为其内容,并以底部工作表的样式显示在屏幕上。

3.4 关闭对话框

mBottomSheetDialog.dismiss()
记得在不需要时及时释放对话框以避免内存泄漏

3.5 布局

        布局就是常规布局,没有其他需要特殊注意的地方。

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollViewxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="100dp"android:background="@color/purple_200"android:gravity="center"android:text="好好学习"android:textColor="@android:color/white"android:textSize="18sp"/><ImageView.../><TextView.../><ImageView../></LinearLayout>
</androidx.core.widget.NestedScrollView>

四、注意事项

  • 1.「内容高度与滚动」: 底部对话框内容应该被设计为可滚动的,特别是当内容超出屏幕高度时。这样可以确保用户在查看内容时能够进行滚动操作,而不会出现内容被遮挡的情况。

  • 2.「避免内容过多」: 底部对话框的设计目的是展示次要信息或辅助操作,不应该用于显示大量内容。保持内容简洁明了,让用户能够快速浏览和理解。

  • 3.「可取消性」: 考虑是否允许用户通过点击对话框外部或返回按钮来取消底部对话框。这可以通过设置 setCancelable() 和 setCanceledOnTouchOutside() 来实现。

  • 4.「适配不同屏幕尺寸」: 底部对话框在不同屏幕尺寸上可能会有不同的显示效果,因此确保内容在不同尺寸和密度的屏幕上均能正常显示和操作。

  • 5.「测试交互性能」: 在使用底部对话框前,进行交互性能测试是很重要的。特别是当对话框中包含复杂的交互元素或大量数据时,要确保在各种设备和条件下,对话框的滑动和交互性能都良好。

  • 6.「释放资源」: 当底部对话框不再需要时,确保及时释放资源,调用 dismiss() 方法关闭对话框,以避免内存泄漏。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/220034.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式系统未来的发展趋势走向???

人工智能和机器学习应用 模型优化&#xff1a; 为了在资源有限的嵌入式系统上运行&#xff0c;将会看到更多的努力投入到精简、优化和量化模型&#xff0c;以适应边缘计算的环境。 边缘推理&#xff1a; 嵌入式设备将更多地执行本地推理&#xff0c;而不是将所有数据发送到云端…

Android原生 MQTT开发

一、引包 1.1.模块的build.gradle //mqtt框架implementation org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.1.0implementation org.eclipse.paho:org.eclipse.paho.android.service:1.1.1implementation org.bouncycastle:bcpkix-jdk15on:1.59 1.2 旧版AndroidStudio开…

【设计模式--行为型--命令模式】

设计模式--行为型--命令模式 命令模式定义结构案例优缺点使用场景 命令模式 定义 将一个请求封装为一个对象&#xff0c;使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通&#xff0c;这样方便将命令对象进行存储&#xff0c;传递&#xff0c;调用…

Springboot整合Redis实现消息发布订阅

一、前言 有时候在实际项目中&#xff0c;某些业务场景下我们需要使用消息的发布订阅功能&#xff0c;以实现某些特殊的需求&#xff0c;那么我们实际上可以有多种选择&#xff0c;比如使用常见的消息中间件Rabbitmq&#xff0c;Kafka&#xff0c;Activemq等&#xff0c;但这几…

Nodejs 第二十四章(zlib)

在 Node.js 中&#xff0c;zlib 模块提供了对数据压缩和解压缩的功能&#xff0c;以便在应用程序中减少数据的传输大小和提高性能。该模块支持多种压缩算法&#xff0c;包括 Deflate、Gzip 和 Raw Deflate。 zlib 模块的主要作用如下&#xff1a; 数据压缩&#xff1a;使用 z…

07--面向对象OOP--02

学习面向对象内容的三条主线 Java类及类的成员&#xff1a;&#xff08;重点&#xff09;属性、方法、构造器&#xff1b;&#xff08;熟悉&#xff09;代码块、内部类面向对象的特征&#xff1a;封装、继承、多态、&#xff08;抽象&#xff09;其他关键字的使用&#xff1a;…

城轨线路列车时刻表与车站客流控制协同优化方法

文章信息 论文题目为《城轨线路列车时刻表与车站客流控制协同优化方法》&#xff0c;该文于2021年发表于《交通运输系统工程与信息》上。文章考虑换入客流影响下列车时刻表与客流控制的协同优化问题&#xff0c;以最小化乘车延误人数为目标&#xff0c;以列车时刻表、客流控制和…

前端成神之路-CSS基础选择器

前端成神之路-CSS基础选择器 目录 前端成神之路-CSS基础选择器 CSS选择器&#xff08;重点&#xff09; 1. CSS选择器作用&#xff08;重点&#xff09; 选择器的作用 2. CSS基础选择器 2.1 标签选择器 2.2 类选择器 2.3 类选择器特殊用法- 多类名 2.4 id选择器 id选…

java代码编写twitter授权登录

在上一篇内容已经介绍了怎么申请twitter开放的API接口。 下面介绍怎么通过twitter提供的API&#xff0c;进行授权登录功能。 开发者页面设置 首先在开发者页面开启“用户认证设置”&#xff0c;点击edit进行信息编辑。 我的授权登录是个网页&#xff0c;并且只需要进行简单的…

动物姿态估计:微调 YOLOv8 姿态模型

动物姿态估计是计算机视觉的一个研究领域&#xff0c;是人工智能的一个子领域&#xff0c;专注于自动检测和分析图像或视频片段中动物的姿势和位置。目标是确定一种或多种动物的身体部位&#xff08;例如头部、四肢和尾巴&#xff09;的空间排列。这项技术具有广泛的应用&#…

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】边缘检测(附MATLAB代码实现)

目录 前言 知识储备 数字图像处理(Digital Image Processing) 数字图像处理基础知识与算法

子组件调用父组件的方法

在React中使用函数组件&#xff08;也称为无状态组件&#xff09;和Hooks时&#xff0c;你可以通过以下方式让子组件调用父组件的方法&#xff1a; 1. 使用回调函数&#xff08;Callback Function&#xff09; 这是最常见的方法。当子组件需要调用父组件的方法时&#xff0c;…

uniapp 单选按钮 选中默认设备

需求1&#xff1a;选中默认设备&#xff0c;113 和114 和139都可以选中一个默认设备 选中多个默认设备方法&#xff1a; async toSwitch(typeItem, title) {const res await this.setDefaultDev(typeItem.ibdr_devsn, typeItem.ibdr_pid)if (!res) {this.common.toast(切换默…

关于在Java中打印三角形图形的汇总

前面写过一些关于打印三角形图形代码的文章&#xff0c;这里进行了汇总&#xff0c;话不多说&#xff0c;直接上代码&#xff1a; /*** 关于打印三角形的汇总*/ public class Work1 {public static void main(String[] args) {int num 5;/** 打印如下图形&#xff1a;* ** …

OPCServer KEPServer安装和使用

OPCServer KEPServer安装和使用 简介 KEPServer软件是免费的&#xff0c;驱动收费&#xff0c;每天2小时试用时间, 免费用来模拟仿真是很不错的选择 OPC DA 和OPC UA都支持 中文官网地址: https://www.kepware.com/zh-cn/ 中文官方文档&#xff08;经常有更新&#xff0c;其…

分库分表及ShardingShpere-proxy数据分片

为什么需要分库&#xff1f; 随着数据量的急速上升&#xff0c;单个数据库可能会QPS过高导致读写耗时过长而出现性能瓶颈&#xff0c;所以需要考虑拆分数据库&#xff0c;将数据库分布在不同实例上提升数据库可用性。主要的原因有如下&#xff1a; 磁盘存储。业务量剧增&…

Vite + React + tailwindcss + ts + 多Nodejs环境... 速搭

最近接触了前端代码&#xff0c;作为一个后端&#xff0c;能将其搭起来并用于生产&#xff0c;我感到很是欣慰。 本文纯安装速记与关键点记录&#xff0c;适合有一定经验且对前端React及生态有一些小了解&#xff0c;想要快速的将一个框架搭建起来的童鞋。可当成一个指引。 N…

华为OD机试 - 高效货运(Java JS Python C)

题目描述 老李是货运公司承运人,老李的货车额定载货重量为 wt。 现有两种货物: 货物 A 单件重量为 wa,单件运费利润为 pa货物 B 单件重量为 wb,单件运费利润为 pb老李每次发车时载货总重量刚好为货车额定的载货重量 wt,车上必须同时有货物 A 和货物 B ,货物A、B不可切割…

javaWebssh汽车销售管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh汽车销售管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用 B/S模式开发。开发环境为TOMCAT7.…

redis-学习笔记(Jedis zset 简单命令)

zadd & zrange zadd , 插入的第一个参数是 zset , 第二个参数是 score, 第三个参数是 member 成员 内部依据 score 排序 zrange 返回 key 对应的 对应区间内的值 zrangeWithScore 返回 key 对应的 对应区间内的值和分数 示例代码 zcard 返回 key 对应的 zset 的长度 示例代…