草庐IT

BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等

yechaoa 2023-03-28 原文

1.效果

MD风格的​​底部弹窗​​​，比自定义​​dialog​​​或​​popupwindow​​使用更简单，功能也更强大。

其实细分来说，是​​BottomSheet​​​、​​BottomSheetDialog​​​、​​BottomSheetDialogFragment​​

2.BottomSheet

与主界面​​同层级​​​关系，可以事件触发，如果有设置显示​​高度​​​的话，也可以​​拉出来​​，且不会影响主界面的交互。

XML

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yechaoa.materialdesign.activity.BottomSheetActivity">

<include
android:id="@+id/include"
layout="@layout/layout_toolbar" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:gravity="center"
android:orientation="vertical">

<Button
android:id="@+id/btn_bottom_sheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="BottomSheet"
android:textAllCaps="false" />

...

</LinearLayout>


<LinearLayout
android:id="@+id/ll_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_peekHeight="80dp"
app:layout_behavior="@string/bottom_sheet_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent">

<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_red_light"
android:gravity="center"
android:text="上拉解锁隐藏功能"
android:textColor="@color/white"
android:textSize="20sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_blue_light"
android:gravity="center"
android:text="a"
android:textSize="20sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_orange_dark"
android:gravity="center"
android:text="b"
android:textSize="20sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_green_light"
android:gravity="center"
android:text="c"
android:textSize="20sp" />

</LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
  • 注意，这里需要协调布局​​CoordinatorLayout​​包裹才行
  • ​​app:behavior_peekHeight​​显示高度，不显示的话设置为0即可
  • ​​app:layout_behavior​​​ 标示这是一个​​bottom_sheet​​
以上3个条件都是​​必须​​的。

代码

btn_bottom_sheet.setOnClickListener {
val behavior = BottomSheetBehavior.from(ll_bottom_sheet)
if (behavior.state == BottomSheetBehavior.STATE_EXPANDED) {
//如果是展开状态，则关闭，反之亦然
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
} else {
behavior.state = BottomSheetBehavior.STATE_EXPANDED
}
}
  • STATE_COLLAPSED： 折叠状态
  • STATE_EXPANDED： 展开状态
  • STATE_DRAGGING ： 过渡状态
  • STATE_SETTLING： 视图从脱离手指自由滑动到最终停下的这一小段时间
  • STATE_HIDDEN ： 默认无此状态（可通过app:behavior_hideable 启用此状态），启用后用户将能通过向下滑动完全隐藏 bottom sheet

3.BottomSheetDialog


可以看到弹出来之后是有一个​​​半透明​​​的蒙层的，这时候是影响主界面交互的，也就意味着此时​​BottomSheetDialog​​的优先级是要高于主界面的。

代码

val bottomSheetDialog = BottomSheetDialog(this)
bottomSheetDialog.setContentView(R.layout.dialog_bottom_sheet)
bottomSheetDialog.show()
dialog_bottom_sheet：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="80dp"
android:paddingBottom="80dp"
android:text="BottomSheetDialog"
android:textSize="30sp"
android:textStyle="bold" />
比较简单的使用方式，直接实例化之后​​setContentView​​​，然后调用​​show​​就可以了。

这里只是一个展示效果，实际上使用场景可能会复杂一些，还要做一些操作等等，所以，也可以自定义dialog继承自BottomSheetDialog，然后处理自己的业务逻辑。

比如：

class MyDialog(context: Context) : BottomSheetDialog(context) {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}

}

4.BottomSheetDialogFragment


效果跟​​​BottomSheetDialog​​​差不多，代码跟​​DialogFragment​​差不多。

代码

class MyBottomSheetDialog : BottomSheetDialogFragment() {

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val dialog = super.onCreateDialog(savedInstanceState)
val view = LayoutInflater.from(context).inflate(R.layout.dialog_my_bottom_sheet, null)
dialog.setContentView(view)
initView(view)
return dialog
}

private fun initView(rootView: View) {
//do something
rootView.tv_cancel.setOnClickListener { dismiss() }

}
}
在创建​​dialog​​​的时候引入布局，然后​​setContentView​​即可。

调用：

MyBottomSheetDialog().show(supportFragmentManager, "MyBottomSheetDialog")
  • FragmentManager
  • tag
但是在实际开发中，我们的需求可能并不能满足于此，比如上部分​​圆角效果​​​、​​指定高度​​等

5.圆角效果

  • 先设置原有背景透明
style.xml

<!--实现BottomSheetDialog圆角效果-->
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>
  • onCreate中设置style
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(STYLE_NORMAL, R.style.BottomSheetDialog)
}
  • 设置我们自己的style
在​​根布局的view​​​上设置​​background​​

android:background="@drawable/shape_sheet_dialog_bg"
shape_sheet_dialog_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<solid android:color="@color/white" />
</shape>

6.去掉背景阴影


可以看到是没有阴影蒙版的，还是style，设置​​​backgroundDimEnabled​​​为​​false​​即可

<!--实现BottomSheetDialog圆角效果 且无背景阴影-->
<style name="BottomSheetDialogBg" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>

7.设置固定高度


可以看到这个弹窗一开始并不是完全展开的，但是可以继续拉出来。

代码

override fun onStart() {
super.onStart()
//拿到系统的 bottom_sheet
val view: FrameLayout = dialog?.findViewById(R.id.design_bottom_sheet)!!
//获取behavior
val behavior = BottomSheetBehavior.from(view)
//设置弹出高度
behavior.peekHeight = 350
}
有一个​​peekHeight​​属性可以设置高度，但是这个api并没有开放给我们，不过也有解决办法

我们可以查看bottomSheetDialog.​​setContentView​​的源码

@Override
public void setContentView(@LayoutRes int layoutResId) {
super.setContentView(wrapInBottomSheet(layoutResId, null, null));
}
这里调用了​​wrapInBottomSheet​​，继续探索

private View wrapInBottomSheet(int layoutResId, @Nullable View view, @Nullable ViewGroup.LayoutParams params) {
ensureContainerAndBehavior();
...
return container;
}
多余的可以不用看，直接探索​​ensureContainerAndBehavior();​​方法

/** Creates the container layout which must exist to find the behavior */
private FrameLayout ensureContainerAndBehavior() {
if (container == null) {
container =
(FrameLayout) View.inflate(getContext(), R.layout.design_bottom_sheet_dialog, null);

FrameLayout bottomSheet = (FrameLayout) container.findViewById(R.id.design_bottom_sheet);
behavior = BottomSheetBehavior.from(bottomSheet);
behavior.addBottomSheetCallback(bottomSheetCallback);
behavior.setHideable(cancelable);
}
return container;
}
到这里，我们就可以看到源码是怎么获取​​behavior​​​的了，获取到​​behavior​​​之后就可以调用​​peekHeight​​设置高度了。

8.设置默认全屏显示

既然有了上面的方法，是不是有思路了，那有人说了，我把高度设置全屏不就完事了吗

事实上还真不行，​​BottomSheetDialogFragment​​​只会显示实际高度，即布局​​有效高度​​​，即使根布局高度​​match_parent​​也不行。

既然我们自己的view不行，那就从BottomSheetDialogFragment本身下手，还记得上面我们通过​​dialog?.findViewById(R.id.design_bottom_sheet)!!​​拿到的view吗，我们试一下设置这个view的高度行不行

view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT
看看效果

首先是像默认效果一样，当内容大于等于全屏的时候，会先到达一个高度，即上面效果的高度，然后继续向上滑的话，可以铺满全屏。

虽然不是预想的效果，但是既然还可以向上滑动至全屏，说明我们设置的高度是有效的，只是没有一次性展开而已，还记得前面提到的状态​​state​​吗，设置一下试试

behavior.state = BottomSheetBehavior.STATE_EXPANDED
看看效果

可以了，这下是直接就全屏了，但是向下拉的时候发现，并没有一次性收起，而是先停在了全屏时显示的​​​默认位置​​，我们再设置高度为全屏试试

behavior.peekHeight = 3000
实际高度可以自己计算

最终代码

override fun onStart() {
super.onStart()
//拿到系统的 bottom_sheet
val view: FrameLayout = dialog?.findViewById(R.id.design_bottom_sheet)!!
//设置view高度
view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT
//获取behavior
val behavior = BottomSheetBehavior.from(view)
//设置弹出高度
behavior.peekHeight = 3000
//设置展开状态
behavior.state = BottomSheetBehavior.STATE_EXPANDED
}
看看最终效果

效果是ok的，但是也有一点点不足，我们下拉的距离快到底部的时候才能关闭，所以建议在弹窗中也加上关闭的操作。

9.监听展开收起

behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {

override fun onStateChanged(bottomSheet: View, newState: Int) {
when(newState){
BottomSheetBehavior.STATE_EXPANDED->{}
BottomSheetBehavior.STATE_COLLAPSED->{}
BottomSheetBehavior.STATE_DRAGGING->{}
BottomSheetBehavior.STATE_SETTLING->{}
BottomSheetBehavior.STATE_HIDDEN->{}
}
}

override fun onSlide(bottomSheet: View, slideOffset: Float) {

}

})
可以写在dialog里，也可以接口抛出去。

10.Github

​​https://github.com/yechaoa/MaterialDesign​​



ok，至此​​BottomSheetDialog​​相关的功能完全演示完了。

如果对你有用，点个赞呗 ^ _ ^


BottomSheetDialog详解paddingspanbackgroundBottomSheetBottomSheetDialDialogFragmentbehaviorpeekHeightAndroid移动开发

有关BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  8. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  9. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  10. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

随机推荐