Android底部对话框神器BottomSheetDialo

发表于

前言

在以前想让底部弹出一个对话框，一般的做法是继承Dialog，然后设置布局、设置位置、设置高宽，如果还想增加一个从下到上的动画，还需要新建一个动画文件，但是到后来，我们有了官方提供的BottomSheetDialogFragment、BottomSheetDialog、bottomSheetBehavior这几个类，几行代码就可以实现上述效果。

如下所示，就可以简单创建一个底部弹出的Dialog。

1
2
3
java复制代码var bottomSheetDialog = BottomSheetDialog(this)
bottomSheetDialog.setContentView(R.layout.dialog)
bottomSheetDialog.show()

录屏_选择区域_20210925170605.gif

还可以使用BottomSheetDialogFragment，BottomSheetDialogFragment继承自DialogFragment ，在需要的时候我们可以重写onCreateDialog方法，返回自定义的Dialog，他默认也是返回BottomSheetDialog，

1
2
3
4
5
6
7
8
9
java复制代码public class BottomSheetDialogFragment extends AppCompatDialogFragment {
  private boolean waitingForDismissAllowingStateLoss;
  @NonNull
  @Override
  public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
    return new BottomSheetDialog(getContext(), getTheme());
  }
  .....
}

拖拽

如果视图中有很多东西要展示，默认可以只展示一部分，另一部分可以向上拖拽显示，这个具体是怎么计算的，可以继续往下看，在这里，只需要新建一个dialog布局，高度设置成match_parent即可。

1
2
3
4
5
6
7
8
9
java复制代码class MemberBottomSheetDialog : BottomSheetDialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.dialog, container, false)
}

MemberBottomSheetDialog().show(supportFragmentManager,"TAG")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
xml复制代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#ffffff"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>
</RelativeLayout>

录屏_选择区域_20210925171341.gif

但是你会发现，只有当根布局是RelativeLayout的时候，内容才会显示出来。

修改高度

由于BottomSheetDialogFragment使用的是BottomSheetDialog，他默认的高度计算方式是parentHeight - parentWidth * 9 / 16，但是他对外提供了一个方法给我们，用来设置开始时候的状态，如下所示：

1
2
3
4
5
java复制代码override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    var bottomSheetDialog = BottomSheetDialog(context!!);
    bottomSheetDialog.behavior.peekHeight=100;
    return bottomSheetDialog
}

默认展开

还有个问题是，默认是不展开的，如果想展开，也就是全屏，可以设置state为BottomSheetBehavior.STATE_EXPANDED。

1
2
3
4
5
6
java复制代码override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    
    if (dialog is BottomSheetDialog) {
        val behaviour = (dialog as BottomSheetDialog).behavior behaviour.state = BottomSheetBehavior.STATE_EXPANDED }
}

禁止拖拽

官方对setDraggable的解释是：设置是否可以通过拖动折叠/展开，禁用拖动时，应用程序需要实现自定义方式来展开/折叠对话框。

1
2
3
4
5
6
7
java复制代码override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog

    bottomSheetDialog.behavior.isDraggable=false

    return bottomSheetDialog
}

背景不变暗

默认情况下，弹出对话框时，会便暗，这其实加个样式就可以了。

1
2
3
xml复制代码<style name="myDialog" parent="Theme.MaterialComponents.BottomSheetDialog">
    <item name="android:backgroundDimEnabled">false</item>
</style>
1
2
3
java复制代码override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    return BottomSheetDialog(context!!, R.style.myDialog)
}

监听滚动

有时候还需要在向上拖拽时候做一些联动，就需要获取对话框滑动的值，可以通过behavior.addBottomSheetCallback来实现。

slideOffset的值是0-1之间，默认状态下是0，滑动到顶部的时候值是1，消失的时候值是-1,

1
2
3
4
5
6
7
8
9
10
11
12
13
java复制代码override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
    bottomSheetDialog.behavior.addBottomSheetCallback(object :
        BottomSheetBehavior.BottomSheetCallback() {
        override fun onStateChanged(bottomSheet: View, newState: Int) {
            Log.i(TAG, "onStateChanged: ")
        }
        override fun onSlide(bottomSheet: View, slideOffset: Float) {
            Log.i(TAG, "onSlide: ${slideOffset}")
        }
    })
    return bottomSheetDialog
}

向上拖拽时候是怎么计算的？

这个问题很简单，他内部拖拽是通过ViewDragHelper方式来完成的，所以当我们不能向上拖拽的时候，通过ViewDragHelper有两种办法，一是在tryCaptureView中返回false，二是在clampViewPositionVertical中返回某个值，这个值返回一个最大的拖拽值，当我们拖拽到最顶部时候，就无法继续向上了。

上面我们说过，默认的高度是parentHeight - parentWidth * 9 / 16，但如果我们的View小于这个值，那么最终的高度是取最小的，也就是取这个View的值，这样的话，对话框中的内容已经就全部显示出来了，还要上移干什么？

但是如果我们的View高度大于这个值，他就会取parentHeight - parentWidth * 9 / 16这个值作为Dialog的高度，那么还可以上移多少空间？答案就是View的高度-parentHeight - parentWidth * 9 / 16。

比如在我的手机上，parentHeight是2159，那么如果View取1600，那么就还可以上移40px，具体实现方式是定义了fitToContentsOffset变量，这个值就是parentHeight - childHeight，也就是屏幕中空闲的空间，当向上拖拽的时候会触发clampViewPositionVertical方法，他返回的值作为新的垂直位置，所以当拖拽到顶部时候，会返回fitToContentsOffset。

BottomSheetBehavior实现底部Dialog

BottomSheetDialog中也是使用了BottomSheetBehavior来实现的，首先定义一个布局，注意根布局只能是CoordinatorLayout。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:id="@+id/bt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="打开" />
    </LinearLayout>

    <LinearLayout
        android:background="@color/cardview_dark_background"
        android:id="@+id/design_bottom_sheet1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:behavior_hideable="true"
        app:behavior_peekHeight="300dp"
        app:elevation="6dp"
        app:layout_behavior="@string/bottom_sheet_behavior"></LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
1
2
3
4
5
6
7
8
9
java复制代码  var bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.design_bottom_sheet1));
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
 findViewById<View>(R.id.bt).setOnClickListener {
     if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_HIDDEN) {
         bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED)
     } else if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_COLLAPSED) {
         bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN
     }
 }

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%