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

一、概述

今天，我們介紹三種底部菜單的實(shí)現(xiàn)方式掖看，不同于之前的彈窗赂乐，它們支持通過手勢對底部菜單的布局進(jìn)行拖動(dòng)富腊，來顯示或者隱藏狮惜，類似于下面的效果：

這三個(gè)布局各有特點(diǎn)：

• BottomSheet
  依賴于CoordinatorLayout和BottomSheetBehavior圾旨，需要將底部菜單布局作為CoordinatorLayout的子View与涡，實(shí)現(xiàn)簡單但不夠靈活惹谐，適用于底部菜單布局穩(wěn)定的情況。
• BottomSheetDialog
  使用方式類似于Dialog驼卖，適用于需要動(dòng)態(tài)指定底部菜單布局的情況氨肌。
• BottomSheetDialogFragment
  通過繼承于BottomSheetFragment來實(shí)現(xiàn)底部菜單布局，適用于需要動(dòng)態(tài)指定布局酌畜，并根據(jù)Fragment的生命周期做較多邏輯操作的情況怎囚。

二、BottomSheet詳解

BottomSheet需要依賴于CoordinatorLayout桥胞，采用BottomSheet的時(shí)候恳守，我們的布局一般類似于下面這樣：

<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>

下面，我們用兩種方式來實(shí)現(xiàn)BottomSheet的底部菜單：

• LinearLayout
• RecyclerView

2.1 LinearLayout實(shí)現(xiàn)的BottomSheet

在進(jìn)行實(shí)例演示之前贩虾，我們先介紹BottomSheet的五種狀態(tài)：

• STATE_DRAGGING：手指在BottomSheet上下拖動(dòng)從而使得布局跟著上下移動(dòng)催烘。
• STATE_SETTLING：當(dāng)手指抬起之后，會(huì)根據(jù)當(dāng)前的偏移量整胃，決定是要將BottomSheet收起還是展開颗圣。

這兩種屬于中間態(tài)，類似于ViewPager的SCROLL_STATE_DRAGGING和SCROLL_STATE_SETTLING屁使。

• STATE_EXPANDED：展開在岂。
• STATE_COLLAPSED：收起。
• STATE_HIDDEN：隱藏蛮寂。

這三種屬于穩(wěn)定態(tài)蔽午，當(dāng)BottomSheet穩(wěn)定下來，最終都會(huì)恢復(fù)到上面三種狀態(tài)之一酬蹋，展開很容易理解及老，需要區(qū)別的是收起和隱藏：

• 隱藏：意味著整個(gè)底部布局完全不可見抽莱，默認(rèn)情況下沒有這種狀態(tài)，需要設(shè)置app:behavior_hideable="true"
• 收起：我們可以設(shè)置收起時(shí)的高度骄恶，讓它仍然部分可見食铐，并可以通過拖動(dòng)這部分布局讓它進(jìn)入到展開狀態(tài)，收起時(shí)的高度通過app:behavior_peekHeight設(shè)置僧鲁。

下面是我們底部菜單的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>

這個(gè)底部菜單的根布局中有三個(gè)關(guān)鍵的屬性：

• 必須設(shè)置：layout_behavior，只有設(shè)置了這個(gè)才能達(dá)到BottomSheet的效果寞秃，否則和放置一個(gè)普通布局沒有區(qū)別：

app:layout_behavior="@string/bottom_sheet_behavior"

• 必須設(shè)置：收起高度斟叼，否則在監(jiān)聽偏移的時(shí)候會(huì)出現(xiàn)異常：

app:behavior_peekHeight="66dp"

• 可選設(shè)置：是否支持隱藏，如果設(shè)置為false春寿，或者沒有設(shè)置朗涩，那么不允許調(diào)用setState(BottomSheetBehavior.STATE_HIDDEN)

app:behavior_hideable="true"

這樣，一個(gè)底部菜單布局的聲明就完成了绑改，接下來谢床，我們通過BottomSheetBehavior來管理這個(gè)菜單：

    private View mBottomLayout;
    private BottomSheetBehavior mBottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_sheet);
        //1.通過id獲得底部菜單布局的實(shí)例
        mBottomLayout = findViewById(R.id.bottom_sheet);
        //2.把這個(gè)底部菜單和一個(gè)BottomSheetBehavior關(guān)聯(lián)起來
        mBottomSheetBehavior = BottomSheetBehavior.from(mBottomLayout);
    }

通過這個(gè)Behavior，我們可以實(shí)現(xiàn)底部菜單的展開厘线、隱藏和收起：

    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);
    }

        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);
            }
        });

第一個(gè)回調(diào)函數(shù)用來監(jiān)聽BottomSheet狀態(tài)的改變，也就是我們上面所說到的五種狀態(tài)皆的，而onSlide回調(diào)當(dāng)中的slideOffset則用來監(jiān)聽底部菜單的偏移量：

• 當(dāng)處于展開狀態(tài)時(shí)，偏移量為1
• 當(dāng)處于收起狀態(tài)時(shí)蹋盆，偏移量為0
• 當(dāng)處于隱藏狀態(tài)時(shí)费薄，偏移量為-1

2.2 RecyclerView實(shí)現(xiàn)的BottomSheet

如果我們列表內(nèi)的Items較多，那么可以考慮使用RecyclerView來實(shí)現(xiàn)底部菜單栖雾，實(shí)現(xiàn)方式和前面類似楞抡，這里，我們最好固定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"/>

當(dāng)使用這種方式析藕，如果初始時(shí)候處于收起狀態(tài)召廷，那么當(dāng)手指上滑時(shí)，會(huì)優(yōu)先讓底部菜單慢慢進(jìn)入展開狀態(tài)账胧，當(dāng)完全進(jìn)入展開狀態(tài)之后竞慢，開始讓列表向底部滾動(dòng)。而當(dāng)手指下滑時(shí)治泥，優(yōu)先讓列表向頂部滾動(dòng)筹煮，當(dāng)滾動(dòng)到頂部之后，讓菜單從展開狀態(tài)慢慢進(jìn)入到收起狀態(tài)居夹。

三本冲、BottomSheetDialog詳解

BottomSheet的使用非常簡單，但是也有它的局限性劫扒，它要求我們要實(shí)現(xiàn)預(yù)定根布局為CoordinatorLayout檬洞，同時(shí)它也沒有平時(shí)我們使用彈框時(shí)的陰影效果，下面沟饥，我們介紹另一種實(shí)現(xiàn)方式：BottomSheetDialog添怔，它的使用方式和我們平時(shí)使用Dialog時(shí)很類似，但是它增加了通過手勢展開和收起對話框的操作闷板。

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澎灸，當(dāng)我們通過setContentView方法傳入自定義布局的時(shí)候，它會(huì)將這個(gè)布局使用CoordinatorLayout包裹起來遮晚，所以當(dāng)使用BottomSheetDialog的時(shí)候性昭，底部菜單和根布局并不屬于同一個(gè)window：

四萧求、BottomSheetDialogFragment

BottomSheetDialogFragment繼承于DialogFragment其兴，并重寫了onCreateDialog返回我們上一節(jié)所說的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一樣，都是在一個(gè)新的Window當(dāng)中：

五守问、總結(jié)

通過上面的學(xué)習(xí)匀归，我們發(fā)現(xiàn)，其實(shí)這三種方法最核心的就是使用了CoordinatorLayout + bottom_sheet_behavior：

• BottomSheet需要我們自己去聲明CoordinatorLayout布局耗帕，并把底部菜單作為它的子View穆端。
• BottomSheetDialog和BottomSheetDialogFragment，只需要我們提供一個(gè)底部菜單的布局仿便，在它們內(nèi)部的實(shí)現(xiàn)當(dāng)中体啰，它再把我們傳入的布局放入到CoordinatorLayout當(dāng)中，之后再把這一整個(gè)包裝好的布局作為Dialog的布局嗽仪。

更多文章荒勇，歡迎訪問我的 Android 知識(shí)梳理系列：

• Android 知識(shí)梳理目錄：http://www.reibang.com/p/fd82d18994ce
• 個(gè)人主頁：http://lizejun.cn
• 個(gè)人知識(shí)總結(jié)目錄：http://lizejun.cn/categories/