一、概述

今天，我們介紹三種底部選單的實現方式，不同於之前的彈窗，它們支援通過手勢對底部選單的佈局進行拖動，來顯示或者隱藏，類似於下面的效果：

這三個佈局各有特點：

• 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的佈局。

---

更多文章，歡迎訪問我的 Android 知識梳理系列：

• Android 知識梳理目錄：www.jianshu.com/p/fd82d1899…
• 個人主頁：lizejun.cn
• 個人知識總結目錄：lizejun.cn/categories/