Android: Bottom sheet

Bottom sheet是一个从屏幕底部滑出以显示更多内容的控件。你可以在Google Material Design指南找到更详细的信息。

添加资源

添加最新的appcompat 和 design 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 {
...
}

创建布局

为了方便我们使用include布局的方式。下面这个布局是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。

Container 视图

把 CoordinatorLayout添加为root 视图。然后把bottom sheet视图作为直接子View包含在CoordinatorLayout中。 app_bar和activity_bottom_sheet_content布局是其它的View，跟bottom sheet无关。你可以替换或者删除它们。

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

此时bottom sheet对话框应该是这样的：

动态控制

bottom sheet对话框的Behavior和属性也可以通过Java代码动态控制。

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

That’s it.

英文原文：https://medium.com/@emrullahluleci/android-bottom-sheet-30284293f066#.ql77m2jun