[译]三分钟玩转Android Bottom Sheet

2017-01-13 15:16:46来源:http://www.jianshu.com/p/e9e9931c510c作者:豆沙包67人点击

原文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_baractivity_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) {
}
});

如此简单。




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台