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 } }
复制代码
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")
复制代码
但是在实际开发中，我们的需求可能并不能满足于此，比如上部分圆角效果、指定高度等
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>
复制代码
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setStyle(STYLE_NORMAL, R.style.BottomSheetDialog) }
复制代码
在根布局的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相关的功能完全演示完了。
如果对你有用，点个赞呗 ^ _ ^
评论