Android学习之BottomSheetDialog组件的使用


Posted in Java/Android onJune 21, 2022

基本介绍

BottomSheetDialog是底部操作控件,可在屏幕底部创建一个支持滑动关闭视图。

目前依赖使用如下:

implementation 'com.google.android.material:material:1.4.0'

基础使用

BottomSheetDialog需要为它添加视图内容,类似Dialog,且BottomSheetDialog的高度由自定义视图决定。

var text = TextView(this@UIBottomSheetAC)
         text.text = "BottomSheetDialog"
         var linearLayout = LinearLayout(this@UIBottomSheetAC)
         linearLayout.addView(text)
         linearLayout.setBackgroundColor(Color.YELLOW)
         linearLayout.layoutParams = LinearLayout.LayoutParams(-1,500)
         val bottomSheetDialog =
             BottomSheetDialog(context, R.style.bottom_sheet_dialog)
         bottomSheetDialog.setContentView(linearLayout)
         bottomSheetDialog.show()

其他功能实现

圆角样式实现

BottomSheetDialog官方默认样式是矩形弹窗并不带圆角设置。但在日常开发中会遇到需要圆角弹窗设计要求需要对BottomSheetDialog默认样式做一些调整才能实现。

BottomSheetDialog样式文件

<style name="bottom_sheet_dialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/bottom_sheet_style_wrapper</item>
</style>
<style name="bottom_sheet_style_wrapper" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
</style>

布局背景圆角

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/holo_blue_light" />
    <corners
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" />
</shape>

代码配置

// 视图背景增加圆角样式
linearLayout.background = getDrawable(R.drawable.ui_shape_top_radius15)
// bottomSheetDialog设置透明背景样式
val bottomSheetDialog =
    BottomSheetDialog(context, R.style.bottom_sheet_dialog)

Android学习之BottomSheetDialog组件的使用

去弹窗外部遮罩阴影

增加android:backgroundDimEnabled属性为false实现无背景阴影遮罩效果。

<style name="bottom_sheet_dialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/bottom_sheet_style_wrapper</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

Android学习之BottomSheetDialog组件的使用

带阴影

Android学习之BottomSheetDialog组件的使用

不带阴影

关闭触发设置

  • 是否支持拖拽关闭通过设置setCancelable方法实现。
  • 是否支持点击视图外部关闭弹窗通过setCanceledOnTouchOutside方法实现
bottomSheetDialog.setCancelable(false)
bottomSheetDialog.setCanceledOnTouchOutside(true)

列表视图使用

使用列表功能也是可以直接实现,添加ListView即可,列表高度可设置ViewGroup.LayoutParams实现(默认情况下若列表数据较多会撑满整个屏幕)。

Button(this).run {
    it.addView(this)
    text = "BottomSheetListDialog"
    setOnClickListener {
        var listView = ListView(this@UIBottomSheetAC)
        listView.adapter =
            ArrayAdapter<String>(
                this@UIBottomSheetAC,
                android.R.layout.simple_list_item_1,
                values
            )
        var coordinatorLayout = CoordinatorLayout(this@UIBottomSheetAC)
        val params = ViewGroup.LayoutParams(
            resources.displayMetrics.widthPixels,
            resources.displayMetrics.heightPixels
        )
        coordinatorLayout.addView(listView)
        val bottomSheetDialog =
            BottomSheetDialog(context, R.style.bottom_sheet_dialog)
        bottomSheetDialog.setContentView(coordinatorLayout,params)
        bottomSheetDialog.show()
    }
}

但使用BottomSheetBehavior要求根布局必须是CoordinatorLayout否则会报错。

Android学习之BottomSheetDialog组件的使用

val bottomSheetBehavior = BottomSheetBehavior.from(coordinatorLayout)
        bottomSheetBehavior.peekHeight = resources.displayMetrics.heightPixels * 3 / 4
        bottomSheetBehavior.addBottomSheetCallback(object :
            BottomSheetBehavior.BottomSheetCallback() {
            override fun onSlide(bottomSheet: View, slideOffset: Float) {

            }

            override fun onStateChanged(bottomSheet: View, newState: Int) {
                if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                    bottomSheetDialog.dismiss()
                }
            }
        })

到此这篇关于Android学习之BottomSheetDialog组件的使用的文章就介绍到这了,更多相关Android BottomSheetDialog内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Java/Android 相关文章推荐
在Java中Collection的一些常用方法总结
Jun 13 Java/Android
Java实战之用Swing实现通讯录管理系统
Jun 13 Java/Android
Spring Data JPA的Audit功能审计数据库的变更
Jun 26 Java/Android
一篇文章带你复习java知识点
Jun 28 Java/Android
详解Java七大阻塞队列之SynchronousQueue
Sep 04 Java/Android
Java spring单点登录系统
Sep 04 Java/Android
Netty客户端接入流程NioSocketChannel创建解析
Mar 25 Java/Android
Java中API的使用方法详情
Apr 06 Java/Android
java开发双人五子棋游戏
May 06 Java/Android
多线程Spring通过@Scheduled实现定时任务
May 25 Java/Android
Android Gradle 插件自定义Plugin实现注意事项
Jun 16 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
Jun 21 Java/Android
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
Jun 21 #Java/Android
Mybatis-plus配置分页插件返回统一结果集
SpringCloud超详细讲解Feign声明式服务调用
Jun 21 #Java/Android
使用Postman测试需要授权的接口问题
Jun 21 #Java/Android
springboot集成redis存对象乱码的问题及解决
Jun 16 #Java/Android
SpringBoot使用AOP实现统计全局接口访问次数详解
Jun 16 #Java/Android
Java中的Kotlin 内部类原理
Jun 16 #Java/Android
You might like
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
php中错误处理操作实例分析
2019/08/23 PHP
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python实现简易动态时钟
2018/11/19 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
操行评语大全
2014/04/30 职场文书
家具商场的活动方案
2014/08/16 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS