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/