Material Design 控件知識梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment

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) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment

Material Design 控件知識梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment

一、概述

二、`BottomSheet`詳解

2.1 `LinearLayout`實現的`BottomSheet`

2.2 `RecyclerView`實現的`BottomSheet`

三、`BottomSheetDialog`詳解

四、`BottomSheetDialogFragment`

五、總結

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

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Material Design 控件知識梳理(3) - BottomSheet && BottomSheetDialog && BottomSheetDialogFragment

一、概述

二、BottomSheet詳解

2.1 LinearLayout實現的BottomSheet

2.2 RecyclerView實現的BottomSheet

三、BottomSheetDialog詳解

四、BottomSheetDialogFragment

五、總結

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

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

二、`BottomSheet`詳解

2.1 `LinearLayout`實現的`BottomSheet`

2.2 `RecyclerView`實現的`BottomSheet`

三、`BottomSheetDialog`詳解

四、`BottomSheetDialogFragment`