BottomSheet的使用

Bottom Sheet是在support library 23.2之后提供的一个新控件，一个底部表，就是我们经常在地图、音乐等app看到的效果。需要用6.0以上的SDK进行编译才可以使用此控件，当然6.0一下的手机也可以使用。

先上效果图

这篇文章我给大家说说BottomSheetBehavior的使用及注意的地方

添加依赖

compile 'com.android.support:design:25.3.1'

我使用的是25.3.1，但是只要是23.2.0+的版本就可以了，当然要与你使用的appcompat的版本一致，不然bulid.gradle文件会报错

布局文件

<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:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/bn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:paddingBottom="100dp"
                android:paddingTop="100dp"
                android:text="bottomSheet"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:paddingBottom="100dp"
                android:paddingTop="100dp"
                android:text="bottomSheet"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorAccent"
                android:gravity="center"
                android:paddingBottom="100dp"
                android:paddingTop="100dp"
                android:text="bottomSheet"
                android:textColor="@android:color/white" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout 是Meterial Design中的一个新控件，通过behavior用来协调其他组件, 实现联动，因此父布局必须是CoordinatorLayout 。

NestedScrollView也是Meterial Design中的新控件，这个控件其实和普通的ScrollView并没有多大的区别，出现的目的是跟Meterial Design中的其他控件兼容。应该说在Meterial Design中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView。

注意到布局中，NestedScrollView中的app:layout_behavior=”@string/bottom_sheet_behavior”属性，点进去可以看到，这个属性实际上是设置系统默认实现的BottomSheet的behavior。原则上来说，只要是可以滚动的View，在加上了这个属性后，都可以作为BottomSheet来使用，但是事实上，如果换成了ScrollView，在滑动过程中，会出现一些蜜汁bug，因此，最好是使用NestedScrollView或者RecyclerView。

Java代码

        NestedScrollView bottomSheet = (NestedScrollView) findViewById(R.id.bottomSheet);
        //通过在xml中配置的string/bottom_sheet_behavior，拿到BottomSheetBehavior 实例
        final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
        //是否跳过STATE_COLLAPSED状态
        behavior.setSkipCollapsed(true);
        //是否开启STATE_HIDDEN状态
        behavior.setHideable(false);
        //设置STATE_COLLAPSED状态的高度
        behavior.setPeekHeight(100);
        //设置状态改变时的回调
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            }
        });

        findViewById(R.id.bn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (behavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
                    behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                } else {
                    behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                }
            }
        });

BottomSheet的5种状态：
1.STATE_COLLAPSED：默认的折叠状态，BottomSheet只在底部显示一部分布局。显示高度可以通过app:behavior_peekHeight或者通过behavior.setPeekHeight来设置设置。(默认是0)
2.STATE_DRAGGING：过渡状态，此时用户正在向上或者向下拖动BottomSheet
3.STATE_SETTLING：视图从脱离手指自由滑动到最终停下的这一小段时间
4.STATE_EXPANDED：BottomSheet处于完全展开的状态：当BottomSheet的高度低于CoordinatorLayout容器时，整个BottomSheet都可见；或者CoordinatorLayout容器已经被BottomSheet填满。
5.STATE_HIDDEN：默认无此状态，可通过app:behavior_hideable或setHideable(false) 启用此状态，启用后用户将能通过向下滑动完全隐藏BottomSheet

需要注意的地方

setSkipCollapsed方法是在STATE_EXPANDED状态下，用户用手往下滑，收缩BottomSheet，如果设置这个方法为true，而且设置setHideable为true的情况下，BottomSheet才会直接跳过STATE_COLLAPSED，直接跳过STATE_COLLAPSED状态，变为完全隐藏(不然，你想啊，它又有没有STATE_HIDDEN状态，要是跳过了STATE_COLLAPSED状态，它还能变成什么状态)。因此，setSkipCollapsed和setHideable方法是会相互影响的，使用的时候，需要特别注意。