Material Design 控件知识梳理(3) BottomSheet && BottomSheetDialog && Bottom

1、概述

今天，咱们介绍三种底部菜单的实现方式，不一样于以前的弹窗，它们支持经过手势对底部菜单的布局进行拖动，来显示或者隐藏，相似于下面的效果：

这三个布局各有特色：

• BottomSheet 依赖于CoordinatorLayout和BottomSheetBehavior，须要将底部菜单布局做为CoordinatorLayout的子View，实现简单但不够灵活，适用于底部菜单布局稳定的状况。
• BottomSheetDialog 使用方式相似于Dialog，适用于须要动态指定底部菜单布局的状况。
• BottomSheetDialogFragment 经过继承于BottomSheetFragment来实现底部菜单布局，适用于须要动态指定布局，并根据Fragment的生命周期作较多逻辑操做的状况。

2、BottomSheet详解

BottomSheet须要依赖于CoordinatorLayout，采用BottomSheet的时候，咱们的布局通常相似于下面这样：

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.demo.lizejun.repotransition.BottomSheetActivity">
    <!-- 其它布局 -->
    <!-- 底部菜单布局 -->
    <include layout="@layout/layout_bottom_sheet_linear"/>
</android.support.design.widget.CoordinatorLayout>

复制代码

下面，咱们用两种方式来实现BottomSheet的底部菜单：

• LinearLayout
• RecyclerView

2.1 LinearLayout实现的BottomSheet

在进行实例演示以前，咱们先介绍BottomSheet的五种状态：

• STATE_DRAGGING：手指在BottomSheet上下拖动从而使得布局跟着上下移动。
• STATE_SETTLING：当手指抬起以后，会根据当前的偏移量，决定是要将BottomSheet收起仍是展开。

这两种属于中间态，相似于ViewPager的SCROLL_STATE_DRAGGING和SCROLL_STATE_SETTLING。

• STATE_EXPANDED：展开。
• STATE_COLLAPSED：收起。
• STATE_HIDDEN：隐藏。

这三种属于稳定态，当BottomSheet稳定下来，最终都会恢复到上面三种状态之一，展开很容易理解，须要区别的是收起和隐藏：

• 隐藏：意味着整个底部布局彻底不可见，默认状况下没有这种状态，须要设置app:behavior_hideable="true"
• 收起：咱们能够设置收起时的高度，让它仍然部分可见，并能够经过拖动这部分布局让它进入到展开状态，收起时的高度经过app:behavior_peekHeight设置。

下面是咱们底部菜单的LinearLayout，也就是上面include的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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="66dp"
    app:layout_behavior="@string/bottom_sheet_behavior">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="66dp"
        android:background="@android:color/holo_green_dark" />
    <TextView
        android:background="@android:color/holo_orange_dark"
        android:layout_width="match_parent"
        android:layout_height="66dp" />
    <TextView
        android:background="@android:color/holo_green_dark"
        android:layout_width="match_parent"
        android:layout_height="66dp" />
    <TextView
        android:background="@android:color/holo_orange_dark"
        android:layout_width="match_parent"
        android:layout_height="66dp" />
    <TextView
        android:background="@android:color/holo_green_dark"
        android:layout_width="match_parent"
        android:layout_height="66dp" />
    <TextView
        android:background="@android:color/holo_orange_dark"
        android:layout_width="match_parent"
        android:layout_height="66dp" />
</LinearLayout>
复制代码

这个底部菜单的根布局中有三个关键的属性：

• 必须设置：layout_behavior，只有设置了这个才能达到BottomSheet的效果，不然和放置一个普通布局没有区别：

app:layout_behavior="@string/bottom_sheet_behavior"
复制代码

• 必须设置：收起高度，不然在监听偏移的时候会出现异常：

app:behavior_peekHeight="66dp"
复制代码

• 可选设置：是否支持隐藏，若是设置为false，或者没有设置，那么不容许调用setState(BottomSheetBehavior.STATE_HIDDEN)

app:behavior_hideable="true"
复制代码

这样，一个底部菜单布局的声明就完成了，接下来，咱们经过BottomSheetBehavior来管理这个菜单：

private View mBottomLayout;
    private BottomSheetBehavior mBottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet);
        //1.经过id得到底部菜单布局的实例
        mBottomLayout = findViewById(R.id.bottom_sheet);
        //2.把这个底部菜单和一个BottomSheetBehavior关联起来
        mBottomSheetBehavior = BottomSheetBehavior.from(mBottomLayout);
    }
复制代码

经过这个Behavior，咱们能够实现底部菜单的展开、隐藏和收起：

public void expandBottomSheet(View view) {
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
    }

    public void hideBottomSheet(View view) {
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
    }

    public void collapseBottomSheet(View view) {
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
    }
复制代码

除此以外，咱们还能够经过 BottomSheetBehavior监听底部菜单的滑动变化：

mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {

            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                Log.d("BottomSheet", "newState=" + newState);
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                Log.d("BottomSheet", "onSlide=" + slideOffset);
            }
        });
复制代码

第一个回调函数用来监听BottomSheet状态的改变，也就是咱们上面所说到的五种状态，而onSlide回调当中的slideOffset则用来监听底部菜单的偏移量：

• 当处于展开状态时，偏移量为1
• 当处于收起状态时，偏移量为0
• 当处于隐藏状态时，偏移量为-1

2.2 RecyclerView实现的BottomSheet

若是咱们列表内的Items较多，那么能够考虑使用RecyclerView来实现底部菜单，实现方式和前面相似，这里，咱们最好固定RecyclerView的高度：

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:background="@android:color/darker_gray"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical"
    app:behavior_hideable="true"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="@string/bottom_sheet_behavior"/>
复制代码

当使用这种方式，若是初始时候处于收起状态，那么当手指上滑时，会优先让底部菜单慢慢进入展开状态，当彻底进入展开状态以后，开始让列表向底部滚动。而当手指下滑时，优先让列表向顶部滚动，当滚动到顶部以后，让菜单从展开状态慢慢进入到收起状态。

这整个过程， state和 slideOffset的变化趋势为：

3、BottomSheetDialog详解

BottomSheet的使用很是简单，可是也有它的局限性，它要求咱们要实现预约根布局为CoordinatorLayout，同时它也没有平时咱们使用弹框时的阴影效果，下面，咱们介绍另外一种实现方式：BottomSheetDialog，它的使用方式和咱们平时使用Dialog时很相似，可是它增长了经过手势展开和收起对话框的操做。

public class BottomSheetDialogActivity extends AppCompatActivity {

    private BottomSheetDialog mDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet_dialog);
    }

    public void showDialog(View view) {
        mDialog = new BottomSheetDialog(this);
        mDialog.setContentView(R.layout.layout_bottom_sheet_dialog);
        mDialog.show();
    }

    public void hideDialog(View view) {
        if (mDialog != null && mDialog.isShowing()) {
            mDialog.hide();
        }
    }
}
复制代码

BottomSheetDialog继承于Dialog，当咱们经过setContentView方法传入自定义布局的时候，它会将这个布局使用CoordinatorLayout包裹起来，因此当使用BottomSheetDialog的时候，底部菜单和根布局并不属于同一个window：

而咱们的 Dialog内部的布局实际上是这样的：

由上图能够看出， Dialog的根节点其实并非经过setContentView()传入的View，它其实是用CoordinatorLayout把它包装了起来，这才实现了拖动展开和隐藏的行为。

4、BottomSheetDialogFragment

BottomSheetDialogFragment继承于DialogFragment，并重写了onCreateDialog返回咱们上一节所说的BottomSheetDialog，它的使用方法和DialogFragment相同：

public class BottomSheetDialogFragment extends AppCompatDialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        return new BottomSheetDialog(getContext(), getTheme());
    }

}
复制代码

下面，咱们看一下如何使用：

• 首先，定义Fragment：

public class DemoBottomSheetDialogFragment extends BottomSheetDialogFragment {

    public static DemoBottomSheetDialogFragment newInstance() {
        return new DemoBottomSheetDialogFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.layout_bottom_sheet_dialog, container, false);
    }

}
复制代码

• 弹出和收起的方式

public class BottomSheetDialogFragmentActivity extends AppCompatActivity {

    private DemoBottomSheetDialogFragment mDemoBottomSheetDialogFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet_dialog_fragment);
    }

    public void showDialog(View view) {
        mDemoBottomSheetDialogFragment = DemoBottomSheetDialogFragment.newInstance();
        mDemoBottomSheetDialogFragment.show(getSupportFragmentManager(), "demoBottom");
    }

    public void hideDialog(View view) {
        if (mDemoBottomSheetDialogFragment != null) {
            mDemoBottomSheetDialogFragment.dismiss();
        }
    }
}
复制代码

最终它的布局和BottomSheetDialog同样，都是在一个新的Window当中：

5、总结

经过上面的学习，咱们发现，其实这三种方法最核心的就是使用了CoordinatorLayout + bottom_sheet_behavior：

• BottomSheet须要咱们本身去声明CoordinatorLayout布局，并把底部菜单做为它的子View。
• BottomSheetDialog和BottomSheetDialogFragment，只须要咱们提供一个底部菜单的布局，在它们内部的实现当中，它再把咱们传入的布局放入到CoordinatorLayout当中，以后再把这一整个包装好的布局做为Dialog的布局。

---

更多文章，欢迎访问个人 Android 知识梳理系列：

• Android 知识梳理目录：www.jianshu.com/p/fd82d1899…
• 我的主页：lizejun.cn
• 我的知识总结目录：lizejun.cn/categories/