当前位置：网站首页>BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等

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

2022-06-11 18:27:00 【InfoQ】

1.效果

MD风格的

底部弹窗

，比自定义

dialog

或

popupwindow

使用更简单，功能也更强大。

其实细分来说，是

BottomSheet

、

BottomSheetDialog

、

BottomSheetDialogFragment

2.BottomSheet

与主界面

同层级

关系，可以事件触发，如果有设置显示

高度

的话，也可以

拉出来

，且不会影响主界面的交互。

XML

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
 xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
 xmlns:tools=&quot;http://schemas.android.com/tools&quot;
 android:layout_width=&quot;match_parent&quot;
 android:layout_height=&quot;match_parent&quot;
 tools:context=&quot;com.yechaoa.materialdesign.activity.BottomSheetActivity&quot;>

 <include
 android:id=&quot;@+id/include&quot;
 layout=&quot;@layout/layout_toolbar&quot; />

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

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

 ...

 </LinearLayout>


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

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

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

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

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

 </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=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
<TextView xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
 android:layout_width=&quot;match_parent&quot;
 android:layout_height=&quot;wrap_content&quot;
 android:gravity=&quot;center&quot;
 android:paddingTop=&quot;80dp&quot;
 android:paddingBottom=&quot;80dp&quot;
 android:text=&quot;BottomSheetDialog&quot;
 android:textSize=&quot;30sp&quot;
 android:textStyle=&quot;bold&quot; />

比较简单的使用方式，直接实例化之后

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, &quot;MyBottomSheetDialog&quot;)

FragmentManager

但是在实际开发中，我们的需求可能并不能满足于此，比如上部分

圆角效果

、

指定高度

等

5.圆角效果

先设置原有背景透明

style.xml

 <!--实现BottomSheetDialog圆角效果-->
 <style name=&quot;BottomSheetDialog&quot; parent=&quot;Theme.Design.Light.BottomSheetDialog&quot;>
 <item name=&quot;bottomSheetStyle&quot;>@style/bottomSheetStyleWrapper</item>
 </style>
 <style name=&quot;bottomSheetStyleWrapper&quot; parent=&quot;Widget.Design.BottomSheet.Modal&quot;>
 <item name=&quot;android:background&quot;>@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=&quot;@drawable/shape_sheet_dialog_bg&quot;

shape_sheet_dialog_bg

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

6.去掉背景阴影

可以看到是没有阴影蒙版的，还是style，设置

backgroundDimEnabled

为

false

即可

 <!--实现BottomSheetDialog圆角效果 且无背景阴影-->
 <style name=&quot;BottomSheetDialogBg&quot; parent=&quot;Theme.Design.Light.BottomSheetDialog&quot;>
 <item name=&quot;bottomSheetStyle&quot;>@style/bottomSheetStyleWrapper</item>
 <item name=&quot;android:backgroundDimEnabled&quot;>false</item>
 </style>
 <style name=&quot;bottomSheetStyleWrapper&quot; parent=&quot;Widget.Design.BottomSheet.Modal&quot;>
 <item name=&quot;android:background&quot;>@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里，也可以接口抛出去。