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->{}