Implementation of stretchable controls with Android bottomsheet

1、 Introduction

The bottom sheet is a dialog like control introduced in version 23.2 of the design support library. The content in the bottom sheet is hidden by default and only a small part is displayed. It can be fully expanded, completely hidden or partially hidden by setting its state or gesture operation in the code.

2、 Use

1. Add dependency:

implementation 'com.android.support:design:28.0.0'

2. Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <com.amap.api.maps.MapView
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
  <RelativeLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/height52px"
    app:behavior_hideable="false"
    app:behavior_peekHeight="@dimen/height84px"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    tools:ignore="MissingPrefix"
    android:background="#ffffffff"
    >

    <include layout="@layout/bottom_sheet" />
  </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="@dimen/height216px"
  >
  <TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:gravity="center"
    android:text="bottom_sheet_peek" />
</RelativeLayout>

3. Code implementation

//底部抽屉栏展示地址
    mBehavior = BottomSheetBehavior.from(mRelativeLayout);

    mBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
      @Override
      public void onStateChanged(@NonNull View bottomSheet,@BottomSheetBehavior.State int newState) {
        String state = "null";
        switch (newState) {
          case 1:
            state = "STATE_DRAGGING";//过渡状态此时用户正在向上或者向下拖动bottom sheet
            break;
          case 2:
            state = "STATE_SETTLING"; // 视图从脱离手指自由滑动到最终停下的这一小段时间
            break;
          case 3:
            state = "STATE_EXPANDED"; //处于完全展开的状态

            break;
          case 4:
            state = "STATE_COLLAPSED"; //默认的折叠状态
            break;
          case 5:
            state = "STATE_HIDDEN"; //下滑动完全隐藏 bottom sheet
            break;
        }

      }

      @Override
      public void onSlide(@NonNull View bottomSheet,float slideOffset) {
        Log.i("BottomSheetDemo","slideOffset:" + slideOffset);
      }
    });

4. Several attribute meanings:

// behavior_hideable：定义是否能通过下滑手势收起Bottom Sheet。
   app:behavior_hideable="true"
  //  behavior_peekHeight：定义可见部分的高度。
  app:behavior_peekHeight="80dp"
  app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

5. There are five statuses of bottomsheet:

3、 Packaged framework recommendations

Flipboard/bottomsheet

soarcn/BottomSheet

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.