Material Design 控件知识梳理(3) - Bott

2017-04-12 本文已影响2444人泽毛

Material Design 控件知识梳理(1) - Android Design Support Library 是什么
 Material Design 控件知识梳理(2) - AppBarLayout & CollapsingToolbarLayout
Material Design 控件知识梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment
Material Design 控件知识梳理(4) - FloatingActionButton
Material Design 控件知识梳理(5) - DrawerLayout && NavigationView
Material Design 控件知识梳理(6) - Snackbar
Material Design 控件知识梳理(7) - BottomNavigationBar
Material Design 控件知识梳理(8) - TabLayout
Material Design 控件知识梳理(9) - TextInputLayout

一、概述

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

这三个布局各有特点：

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

二、`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的变化趋势为：

三、`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把它包装了起来，这才实现了拖动展开和隐藏的行为。

四、`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当中：

五、总结

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

BottomSheet需要我们自己去声明CoordinatorLayout布局，并把底部菜单作为它的子View。
BottomSheetDialog和BottomSheetDialogFragment，只需要我们提供一个底部菜单的布局，在它们内部的实现当中，它再把我们传入的布局放入到CoordinatorLayout当中，之后再把这一整个包装好的布局作为Dialog的布局。

Material Design 控件知识梳理(3) - Bott

一、概述

二、`BottomSheet`详解

2.1 `LinearLayout`实现的`BottomSheet`

2.2 `RecyclerView`实现的`BottomSheet`

三、`BottomSheetDialog`详解

四、`BottomSheetDialogFragment`

五、总结

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

猜你喜欢

热点阅读

Material Design 控件知识梳理(3) - Bott

一、概述

二、BottomSheet详解

2.1 LinearLayout实现的BottomSheet

2.2 RecyclerView实现的BottomSheet

三、BottomSheetDialog详解

四、BottomSheetDialogFragment

五、总结

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

猜你喜欢

热点阅读

二、`BottomSheet`详解

2.1 `LinearLayout`实现的`BottomSheet`

2.2 `RecyclerView`实现的`BottomSheet`

三、`BottomSheetDialog`详解

四、`BottomSheetDialogFragment`