iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android学习之BottomSheetDialog组件的使用
  • 171
分享到

Android学习之BottomSheetDialog组件的使用

2024-04-02 19:04:59 171人浏览 独家记忆
摘要

目录基本介绍基础使用其他功能实现圆角样式实现去弹窗外部遮罩阴影关闭触发设置列表视图使用基本介绍 BottomSheetDialog是底部操作控件,可在屏幕底部创建一个支持滑动关闭视图

基本介绍

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: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>

带阴影

不带阴影

关闭触发设置

  • 是否支持拖拽关闭通过设置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否则会报错。

 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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Android学习之BottomSheetDialog组件的使用

本文链接: https://www.lsjlt.com/news/152096.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android学习之BottomSheetDialog组件的使用
    目录基本介绍基础使用其他功能实现圆角样式实现去弹窗外部遮罩阴影关闭触发设置列表视图使用基本介绍 BottomSheetDialog是底部操作控件,可在屏幕底部创建一个支持滑动关闭视图...
    99+
    2024-04-02
  • Android开发之BottomSheetDialog组件的使用
    目录Bottom SheetBottomSheetBehaviorBottomSheetDialog完整 Demo Bottom Sheet Bottom Sheet 是 Desig...
    99+
    2023-01-09
    Android BottomSheetDialog使用 Android BottomSheetDialog
  • Android的BottomSheetDialog组件如何使用
    这篇“Android的BottomSheetDialog组件如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Andro...
    99+
    2023-07-02
  • React组件学习之Hooks使用
    目录一、前言二、React Hooks2.1 useState2.2 useEffect2.3 useMemo2.4 useCallback2.5 useContext2.6 use...
    99+
    2024-04-02
  • Android学习之Broadcast的简单使用
    本文实例为大家分享了Android学习之Broadcast的使用方法,供大家参考,具体内容如下实现开机启动提示网络的广播package com.example.luobo.broadcasttest;import android.conte...
    99+
    2023-05-30
    android broadcast roi
  • Android学习之菜单的使用方法
    本文实例为大家分享了Android学习之菜单使用的具体代码,供大家参考,具体内容如下 Android中菜单包含上下文菜单和选项菜单两种类型。 使用统一的菜单类来管理菜单: Menu、...
    99+
    2024-04-02
  • Python学习之元组的使用详解
    目录元组的创建元组的删除元组部分元素的输出元组的嵌套元组元素的个数计算:len()元组中的元素最大最小值的求解:max(),min()元组中某元素出现的次数:count函数元组中某元...
    99+
    2024-04-02
  • Android学习之Span的使用方法详解
    目录Span集合段落类Span其他Span展示效果小试牛刀小结Span集合 段落类Span BulletSpan 为段落开头增加项目符号并支持大小、颜色、弧度 span.append...
    99+
    2024-04-02
  • Django学习之八:forms组件【对
    目录 Django forms组件 bound and unbound form instance forms渲染有关 隐藏一个字段...
    99+
    2023-01-30
    组件 Django forms
  • Bootstrap学习之如何使用缩略图组件和警示框组件
    这篇“Bootstrap学习之如何使用缩略图组件和警示框组件”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“Bootstrap学习之如何使用缩略图组件和警示框组件”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细...
    99+
    2023-06-06
  • Android中Intent组件的入门学习心得
    目录什么是 Intent ?Intent 的类型?Intent 的组成显式 Intent 的使用隐式 Intent 的使用总结什么是 Intent ? Intent是Android开...
    99+
    2024-04-02
  • Vue组件化学习之scoped详解
    目录简介总结简介 主要介绍scoped的作用。 先弄一个案例: main.js: //引入vue依赖 import Vue from 'vue' //引入组件App import ...
    99+
    2024-04-02
  • day 83 Vue学习三之vue组件
      本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件   首先给大家介绍一下组件(com...
    99+
    2023-01-31
    组件 day Vue
  • python基础学习之组织文件
    目录一、Shutil 模块1.1 复制文件和文件夹1.2 移动文件和文件夹1.3 删除文件和文件夹二、遍历文件三、压缩文件3.1 创建和添加ZIP文件3.2 读取ZIP文件3.3 解...
    99+
    2024-04-02
  • Bootstrap学习之常用表单组件有哪些
    这篇“Bootstrap学习之常用表单组件有哪些”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“Bootstrap学习之常用表单组件有哪些”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过...
    99+
    2023-06-06
  • Python学习之列表和元组的使用详解
    目录列表和元组简介列表学习要点列表的声明语法列表的读取列表操作列表元素的修改和删除列表元素合并列表元素顺序变化元组学习要点元组基本知识元组的基本操作列表和元组简介 如果说在 Pyth...
    99+
    2024-04-02
  • Android Jetpack组件之ViewModel如何使用
    本文小编为大家详细介绍“Android Jetpack组件之ViewModel如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Android Jetpack组件之ViewModel如何使用”文章能帮助大家解决疑惑...
    99+
    2023-07-05
  • VUE3学习教程之全局组件和局部组件
    目录1. 概述2. 全局组件2.1 不使用组件的写法2.2 使用组件2.3 组件中包含变量2.4 组件的复用2.5 组件中使用组件2.6 总结3. 局部组件3.1 局部组件的使用3....
    99+
    2024-04-02
  • 微信小程序学习之常用的视图组件
    目录一.常用的视图组件1.view2.scroll-view3.swiper和swiper-item4.text5.rich-text 6.button7.image8.n...
    99+
    2022-11-13
    微信小程序组件开发 微信小程序开发 微信小程序画布组件
  • python学习之numpy使用
    #NumPy数据库学习#Numpy包含一下特点:'''1.强大的N维数组对象。2.成熟的函数库。3.用于集成c/c++和Fortran代码工具4.实用的线性代数,傅里叶变换和随机生成函数。'''import numpy as np#4.1:...
    99+
    2023-01-31
    python numpy
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作