[译]三分钟玩转Android Bottom Sheet

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

Bottom Sheet是一个可拖动的控件，从底部往上滑动展现更多内容。可以从 Google Material Design获取更多关于Bottom Sheet的详细信息。

添加依赖

添加最新的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'

把依赖设置为23.0.1或以上：

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

创建布局

Bottom Sheet的内容

简单至上，这是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都是无关紧要的控件，可以移除。

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

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

    }
});

如此简单。