原文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) {
}
});
如此简单。