Android--BottomSheet實現可拉伸控件

一、簡介

Bottom Sheet是Design Support Library23.2 版本引入的一個類似於對話框的控件。 Bottom Sheet中的內容默認是隱藏起來的,只顯示很小一部分,可以通過在代碼中設置其狀態或者手勢操作將其完全展開,或者完全隱藏,或者部分隱藏。

二、使用

1、添加依賴:

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

2、佈局

<?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、代碼實現

//底部抽屜欄展示地址
        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、幾個屬性含義:

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

5、BottomSheet的五種狀態:

STATE_DRAGGING:手指在BottomSheet上下拖動從而使得佈局跟着上下移動
STATE_SETTLING:當手指擡起之後,會根據當前的偏移量,決定是要將BottomSheet收起還是展開
這兩種屬於中間態,類似於ViewPager的SCROLL_STATE_DRAGGING和SCROLL_STATE_SETTLING
--------------------------------------
STATE_EXPANDED:展開
STATE_COLLAPSED:收起
STATE_HIDDEN:隱藏

三、封裝的框架推薦

https://github.com/Flipboard/bottomsheet

https://github.com/soarcn/BottomSheet

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章