当前位置：网站首页>BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等
BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等
2022-06-11 18:27:00 【InfoQ】
1.效果
MD风格的
底部弹窗，比自定义
dialog或
popupwindow使用更简单，功能也更强大。
其实细分来说，是
BottomSheet、
BottomSheetDialog、
BottomSheetDialogFragment2.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上设置
backgroundandroid: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相关的功能完全演示完了。
如果对你有用，点个赞呗 ^ _ ^
边栏推荐
猜你喜欢
牛客刷题——两种排序方法
全国院校MBA、EMBA、MPA、MEM、提前面试（预面试）时间批次已出（持续更新中）-文都管联院
2023年西安交通大学管理学院MPAcc提前批面试网报通知
Niu Ke's question -- finding the least common multiple
![[c language] shift elements after sorting elements of an array](/img/5b/3e74fc40787d94f6d0ab93332140ba.png)
[c language] shift elements after sorting elements of an array
全志T3开发板（4核ARM Cortex-A7）——系统启动阶段LOGO显示详解
使用Visdom对损失函数进行监控
Complete in-depth learning of MySQL from 0 to 1 -- phase 2 -- basics
Niu Ke brushes the question - no two
牛客刷题——不要二
随机推荐
HashSet collection
SAP UI5 里 XML 视图根节点运行时实例化的分析
力扣刷题——二叉树的层序遍历
Two methods for matlab to save imshow drawing pictures to a specified folder
全志T3开发板（4核ARM Cortex-A7）——系统启动阶段LOGO显示详解
牛客刷题——part8
下载代码，并编译环境的问题
牛客刷题——两种排序方法
[c language] output the average score and the student data below or equal to the average score with the structure
用户组的操作
新项目 搭建环境方法
Labelme for image data annotation
User group actions
[c language] shift elements after sorting elements of an array
Async leads to unexpected function results and changes the intention of the original code; await is only valid in async functions and the top level bodies of modules
制造出静态坦克
防止敌方坦克重叠
Mysql深入完全学习---阶段1---学习总述
【无标题】
On the sequence traversal of binary tree Ⅱ