Android 原生BottomSheet 介绍及坑

Posted 2023-04-23

参考技术A android Support Library 23.2 推出之后，增加了几个功能，例如支持Vector Drawables 和Animated Vector Drawables；增加AppCompat DayNight 主题；Design 库中增加Bottom Sheets，RecyclerView 支持 auto-measurement，之前的wrap_content ,match_parent 都将可以发挥作用等等

公司的App 之前使用过第三方的[BottomSheet] （ https://github.com/soarcn/BottomSheet ），现在Android 有自己的BottomSheet 那还不赶紧换成原生的。然而好事多磨，Android 原生BottomSheet 资料太少，深研下去发现BottomSheet 就是个大坑！

BottomSheet 使用需要CoordinatorLayout作为父布局，BottomSheet 的布局作为CoordinatorLayout 的子布局，并且BottomSheetBehavior（比如加上app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”）

实际使用过程中主要依靠BottomSheetBehavior来控制BottomSheet的展示及回调。
BottomSheetBehavior 具有五种状态：

设置状态：
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
回调：

强调：

BottomSheetBehavior将能帮你实现 常驻bottom sheet（ persistent bottom sheet） 的场景, 但这个版本还提供了BottomSheetDialog 和 BottomSheetDialogFragment 来实现 modal bottom sheets 的场景。只需要将AppCompatDialog 或者AppCompatDialogFragment分别替换成上述的两个控件，你就拥有了 bottom sheet 风格的对话框

然而我们实际我们需要BottomSheetDialog 是展开的，而BottomSheetDialog只展示一部分
原因：BottomSheetDialog默认是STATE_COLLAPSED，所有BottomSheetDialog 依靠peekHight来设置高度，系统BottomSheetDialog 默认高度为256dp（查源码得知）,那按理来说我们的BottomSheetDialog 高度该是256dp，但是我们实际发现BottomSheetDialog高度也不等于256dp。我们研究下BottomSheetBehavior的中控制BottomSheetDialog高度源码:

通过源码我们可以得知BottomSheetBehavior通过改变child的偏移量而控制BottomSheetDialog的高度，默认状态为STATE_COLLAPSED,child向下移动mMaxOffset高度，从而控制child显示高度为mPeekHeight,这就需要child与parent 顶部对齐，child的getTop 为0；
然而我们再去查看Android的BottomSheetDialog 内中布局R.layout.design_bottom_sheet_dialog,发现我们自定义的的BottomSheetDialog 的contentView 是放置在FrameLayout 中的，然而FrameLayout出于某些原因为垂直居中的，而不是顶部对齐，从而导致BottomSheetDialog在256dp的基础上向下偏移,只展示一部分。
所以我们可以通过下面方法解决BottomSheetDialog 的显示问题

解决方法如下：

当我们设置bottomSheetDialog每次点击后不new,而是直接show的话，然而当我们会bottomSheetDialog 展开后，我们将BottomSheetDialog划下隐藏后， 再点击展示BottomSheetDialog后，会发现页面只是变暗，BottomsheetDialog未展开，这是由于之前我们划下收缩隐藏BottomSheetDialog后，bottomSheetDialogBehavior的状态为隐藏，再次show之后，系统未恢复bottomSheetDialogBehavior的状态，还是隐藏，所以再次点击后页面只是变暗。

Android 带圆角和背景的BottomSheet

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!--实现BottomSheetDialog圆角效果-->
    <style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
<!--        <item name="android:backgroundDimEnabled">false</item>-->
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:background">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">true</item>

    </style>

    <style name="bottomSheetStyleWrapper" parent="