android_基础_ BottomSheetBehavior使用(底部导航抽屉的实现)

原文:https://blog.csdn.net/qjay_dev/article/details/51289267
本文使用的 com.android.support:design 版本为 23.3.0

效果图

---

相关类

---

BottomSheetBehavior

---

此类类似一个工具类，并不能在布局中使用，下面我们看看怎么实现我们效果图中的功能

layout

    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">
    
        <include layout="@layout/include_bottom_sheet_layout" />
    
    </FrameLayout>

我们可以看到id = bottom_sheet 的FrameLayout设置了一些app命名空间的属性，其中app:layout_behavior="@string/bottom_sheet_behavior"才是重点，设置这个才能与今天所讲的类联系在一起，所以此View的parent view 必须是android.support.design.widget.CoordinatorLayout

include：include_bottom_sheet_layout

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="android.support.design-23.3.0"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="AppBarLayout"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="BottomSheetBehavior"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="BottomSheetDialog"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="BottomSheetDialogFragment"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="CircularBorderDrawable"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="CircularBorderDrawableLollipop"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="CollapsingTextHelper"
            android:textSize="20sp" />
    </LinearLayout>

完整布局

    <?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
    
            <android.support.v7.widget.AppCompatButton
                android:id="@+id/btnBehavior"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BottomSheetBehavior"
                android:textAllCaps="false" />
    
            <android.support.v7.widget.AppCompatButton
                android:id="@+id/btnDialog"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BottomSheetDialog"
                android:textAllCaps="false" />
        </LinearLayout>
    
    
        <FrameLayout
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:behavior_hideable="true"
            app:behavior_peekHeight="0dp"
            app:layout_behavior="@string/bottom_sheet_behavior">
    
            <include layout="@layout/include_bottom_sheet_layout" />
    
        </FrameLayout>
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email"
            app:borderWidth="0dp"
            app:elevation="5dp"
            app:layout_anchor="@id/bottom_sheet"
            app:layout_anchorGravity="right|top"
            app:pressedTranslationZ="10dp" />
    </android.support.design.widget.CoordinatorLayout>

Java Code

    View bottomSheet =  findViewById(R.id.bottom_sheet);
    BottomSheetBehavior<View> behavior = BottomSheetBehavior.from(bottomSheet);

R.id.bottom_sheet是我们想要展示的View，这个时候BottomSheetBehavior就派上用场了，使用简单，直接调用一个静态方法 from() 方法搞定

    int state = behavior.getState();
    if (state == BottomSheetBehavior.STATE_EXPANDED) {
        behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
    }else{
        behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
    }

当用户触发某一动作事件后，可采用这部分代码对View的显示与隐藏。

好了，基本用法就这么简单，下面我们来看看BottomSheetBehavior类中有一些什么方法值得我们关注

BottomSheetBehavior

选中部分就是我们要了解学习的类与方法

BottomSheetCallback

    /**
     * bottom sheets监控事件的回调
     */
    public abstract static class BottomSheetCallback {
        /**
         * 当bottom sheets状态被改变回调
         * @param bottomSheet The bottom sheet view.
         * @param newState    改变后新的状态
         */
        public abstract void onStateChanged(@NonNull View bottomSheet, @State int newState);
        /**
         * 当bottom sheets拖拽时回调
         * @param bottomSheet The bottom sheet view.
         * @param slideOffset 滑动量;从0到1时向上移动
         */
        public abstract void onSlide(@NonNull View bottomSheet, float slideOffset);
    }

1 -> 底片在拖动
2 -> 底片在下沉
3 -> 底片展开
4 -> 底片折叠
5 -> 底片隐藏
6 -> 底片半展开

常用的打开底片操作和判断

    //根据底片的当前打开或关闭或半打开情况来打开底片
    fun toggle() {
        when {
         
            behavior.state == STATE_HIDDEN -> open()
            //若底片是隐藏状态, 点击打开按钮直接调用open方法打开
            behavior.state == STATE_HIDDEN
                || behavior.state == STATE_HALF_EXPANDED
                || behavior.state == STATE_EXPANDED
                || behavior.state == STATE_COLLAPSED -> close()
            //若底片是隐藏状态但是连续按了两下打开按钮，第一下为打开，但是此时底片仍然为隐藏状态未来得及打开又按了一下打开按钮，此时则直接关闭
            //所以当底片为隐藏状态或半打开或已经打开，或正在打开的折叠状态，点击打开底片的按钮则此时会关闭底片
        }
    }

    //将底片状态设置为展开状态来打开底片
    fun open() {
        behavior.state = STATE_HALF_EXPANDED
    }
    //将底片状态设置为隐藏状态来关闭底片
    fun close() {
        behavior.state = STATE_HIDDEN
    }

BottomSheetDialog

---

用法全解

此类其实就是对BottomSheetBehavior的封装，将我们的BottomSheetView改装成一个Dialog显示形式

用法

    BottomSheetDialog bsDialog = new BottomSheetDialog(this);
    bsDialog.setContentView(R.layout.include_bottom_sheet_layout);
    bsDialog.show();

解析

    private View wrapInBottomSheet(int layoutResId, View view, ViewGroup.LayoutParams params) {
        final CoordinatorLayout coordinator = (CoordinatorLayout) View.inflate(getContext(),
                R.layout.design_bottom_sheet_dialog, null);
        if (layoutResId != 0 && view == null) {
            view = getLayoutInflater().inflate(layoutResId, coordinator, false);
        }
        FrameLayout bottomSheet = (FrameLayout) coordinator.findViewById(R.id.design_bottom_sheet);
        BottomSheetBehavior.from(bottomSheet).setBottomSheetCallback(mBottomSheetCallback);
        if (params == null) {
            bottomSheet.addView(view);
        } else {
            bottomSheet.addView(view, params);
        }
        // We treat the CoordinatorLayout as outside the dialog though it is technically inside
        if (shouldWindowCloseOnTouchOutside()) {
            coordinator.findViewById(R.id.touch_outside).setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            if (isShowing()) {
                                cancel();
                            }
                        }
                    });
        }
        return coordinator;
    }

此方法就是核心代码，主要作用就是将我们通过BottomSheetDialog.setContentView()方法设置的View通过BottomSheetBehavior.from(View)方法初始化一个BottomSheetBehavior对象

---

BottomSheetDialogFragment

BottomSheetDialogFragment常用用法

override fun onEmailLongPressed(email: Email): Boolean {
        MenuBottomSheetDialogFragment
          .newInstance(R.menu.email_bottom_sheet_menu)
          .show(parentFragmentManager, null)

        return true
    }

此类其实就是对BottomSheetDialog的封装，内部实现很简单，我们看下实现代码：

    public class BottomSheetDialogFragment extends AppCompatDialogFragment {
    
        @Override
        public Dialog onCreateDialog(Bundle savedInstanceState) {
            return new BottomSheetDialog(getActivity(), getTheme());
        }
    
    }

以上是此类的全部代码，很简单，继承DialogFragment，重写onCreateDialog方法，返回一个BottomSheetDialog实例

---