Material Design - BottomSheetBehavior

本篇将介绍Material Design下的BottomSheetBehavior

Material Design

Material Design - BottomSheetBehavior

依赖

BottomSheetBehavior是在Design23.3推出的底部动作条，所以说，想要用上BottomSheetBehavior那么就要保证design依赖在23.3或者以上

1
implementation 'com.android.support:design:26.0.0-alpha1'

当然Androidx也是可以的

1
implementation 'androidx.appcompat:appcompat:1.2.0'

布局

BottomSheetBehavior不是一个控件(View)而是一个显示控制器

只需要在Xml中，往需要的View中添加app:layout_behavior="@string/bottom_sheet_behavior"，然后通过控制BottomSheetBehavior的状态来控制显示

1
2
3
4
5
6
7
8
9
10
11
12
<FrameLayout
        android:id="@+id/background_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_halfExpandedRatio="0.5"
        app:behavior_hideable="true"
        app:behavior_skipCollapsed="true"
        app:layout_behavior="@string/bottom_sheet_behavior">
    
    	...
    
</FrameLayout>

布局属性

  1. behavior_halfExpandedRatio:

    设置展开的高度占父类高度的比例，比例范围介于0-1。在上图中，设置为0.5就表示着BottomSheetBehavior展开后占父类高度的50%，也就是一半

  2. behavior_hideable:

    设置BottomSheetBehavior是否可以通过向下拖动来进行隐藏，也就是下图中的效果

    BottomSheetBehavior

  1. behavior_skipCollapsed

    设置BottomSheetBehavior一旦展开就跳过折叠状态，跳过过度效果。除非它是可隐藏的

使用

  1. 先给想要成为BottomSheetBehavior的View添加上app:layout_behavior

  2. 在代码中进行获取

    1
    2
    3
    private val behavior: BottomSheetBehavior<FrameLayout> by lazy(LazyThreadSafetyMode.NONE) {
            BottomSheetBehavior.from(binding.backgroundContainer)
        }

    这里是使用了BottomSheetBehavior.from()来将View关联起来的

  3. 通过控BottomSheetBehavior的状态来控制是否展开

    1
    behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED

    BottomSheetBehavior的状态码如下

    状态码 状态效果
    STATE_DRAGGING 指BottomSheet处于被手指拖着
    STATE_SETTLING 指BottomSheet处于正在折叠的过程中
    STATE_EXPANDED 指BottomSheet处于展开的状态
    STATE_COLLAPSED 指BottomSheet处于折叠的状态
    STATE_HIDDEN 指BottomSheet处于隐藏的状态
    STATE_HALF_EXPANDED 指BottomSheet是半展开的(当mFitToContents为false时使用)

  4. 之后BottomSheetBehavior就会根据现在的状态来自动的更改UI