原文Android: Bottom sheet——Emrullah Lüleci。

Bottom Sheet是一個可拖動的控件，從底部往上滑動展現(xiàn)更多內(nèi)容?？梢詮?Google Material Design獲取更多關(guān)于Bottom Sheet的詳細(xì)信息。

添加依賴

添加最新的support庫依賴

dependencies {
    //replace X.X.X with the latest version
    compile 'com.android.support:appcompat-v7:X.X.X'
    compile 'com.android.support:design:X.X.X'
}

讓Activity繼承AppCompatActivity

public class ButtonActivity extends AppCompatActivity {
...
}

譯者注：如果遇到了錯誤

No resource identifier found for attribute 'behavior_hideable'

把依賴設(shè)置為23.0.1或以上：

compile 'com.android.support:design:23.0.1'

創(chuàng)建布局

Bottom Sheet的內(nèi)容

簡單至上，這是Bottom Sheet包含的布局，文件名叫bottom_sheet.xml。

<?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="340dp"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    app:behavior_hideable="true"
    app:behavior_peekHeight="80dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="@string/bottom_sheet_peek"
        android:textColor="@android:color/white" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/bottom_sheet_content"
        android:textColor="@android:color/white" />

</LinearLayout>

behavior_peekHeight：定義可見部分的高度。
behavior_hideable：定義是否能通過下滑手勢收起Bottom Sheet。

父布局

將CoordinatorLayout作為根布局，Bottom Sheet作為子控件，下面app_bar 和activity_bottom_sheet_content都是無關(guān)緊要的控件，可以移除。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidsample.BottomSheetActivity">

    <!-- include app bar -->
    <include layout="@layout/app_bar" />

    <!-- include main content -->
    <include layout="@layout/activity_bottom_sheet_content" />

    <!-- include bottom sheet -->
    <include layout="@layout/bottom_sheet" />

</android.support.design.widget.CoordinatorLayout>

這時候的效果是這樣的

效果圖

動態(tài)控制

在代碼中動態(tài)控制Bottom Sheet

// get the bottom sheet view
LinearLayout llBottomSheet = (LinearLayout) findViewById(R.id.bottom_sheet);

// init the bottom sheet behavior
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(llBottomSheet);

// change the state of the bottom sheet
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

// set the peek height
bottomSheetBehavior.setPeekHeight(340);

// set hideable or not
bottomSheetBehavior.setHideable(false);

// set callback for changes
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {

    }
});

如此簡單。