Bottom Sheet是在support library 23.2之后提供的一个新控件,一个底部表,就是我们经常在地图、音乐等app看到的效果。需要用6.0以上的SDK进行编译才可以使用此控件,当然6.0一下的手机也可以使用。
先上效果图
这篇文章我给大家说说BottomSheetBehavior的使用及注意的地方
添加依赖
compile
'com.android.support:design:25.3.1'
我使用的是25.3.1,但是只要是23.2.0+的版本就可以了,当然要与你使用的appcompat的版本一致,不然bulid.gradle文件会报错
布局文件
<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">
<Button
android:id=
"@+id/bn"
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content" />
<android
.support.v4
.widget.NestedScrollView
android:id=
"@+id/bottomSheet"
android:layout_width=
"match_parent"
android:layout_height=
"400dp"
app:layout_behavior=
"@string/bottom_sheet_behavior">
<LinearLayout
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:orientation=
"vertical">
<TextView
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:background=
"@color/colorAccent"
android:gravity=
"center"
android:paddingBottom=
"100dp"
android:paddingTop=
"100dp"
android:text=
"bottomSheet"
android:textColor=
"@android:color/white" />
<TextView
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:background=
"@color/colorPrimary"
android:gravity=
"center"
android:paddingBottom=
"100dp"
android:paddingTop=
"100dp"
android:text=
"bottomSheet"
android:textColor=
"@android:color/white" />
<TextView
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:background=
"@color/colorAccent"
android:gravity=
"center"
android:paddingBottom=
"100dp"
android:paddingTop=
"100dp"
android:text=
"bottomSheet"
android:textColor=
"@android:color/white" />
</LinearLayout>
</android
.support.v4
.widget.NestedScrollView>
</android
.support.design.widget.CoordinatorLayout>
CoordinatorLayout 是Meterial Design中的一个新控件,通过behavior用来协调其他组件, 实现联动,因此父布局必须是CoordinatorLayout 。
NestedScrollView也是Meterial Design中的新控件,这个控件其实和普通的ScrollView并没有多大的区别,出现的目的是跟Meterial Design中的其他控件兼容。应该说在Meterial Design中,RecyclerView代替了ListView,而NestedScrollView代替了ScrollView。
注意到布局中,NestedScrollView中的app:layout_behavior=”@string/bottom_sheet_behavior”属性,点进去可以看到,这个属性实际上是设置系统默认实现的BottomSheet的behavior。原则上来说,只要是可以滚动的View,在加上了这个属性后,都可以作为BottomSheet来使用,但是事实上,如果换成了ScrollView,在滑动过程中,会出现一些蜜汁bug,因此,最好是使用NestedScrollView或者RecyclerView。
Java代码
NestedScrollView bottomSheet = (NestedScrollView) findViewById(R.id.bottomSheet);
final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
behavior.setSkipCollapsed(
true);
behavior.setHideable(
false);
behavior.setPeekHeight(
100);
behavior.setBottomSheetCallback(
new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet,
int newState) {
}
@Override
public void onSlide(@NonNull View bottomSheet,
float slideOffset) {
}
});
findViewById(R.id.bn).setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
if (behavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
else {
behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
}
});
BottomSheet的5种状态: 1.STATE_COLLAPSED:默认的折叠状态,BottomSheet只在底部显示一部分布局。显示高度可以通过app:behavior_peekHeight或者通过behavior.setPeekHeight来设置设置。(默认是0) 2.STATE_DRAGGING:过渡状态,此时用户正在向上或者向下拖动BottomSheet 3.STATE_SETTLING:视图从脱离手指自由滑动到最终停下的这一小段时间 4.STATE_EXPANDED:BottomSheet处于完全展开的状态:当BottomSheet的高度低于CoordinatorLayout容器时,整个BottomSheet都可见;或者CoordinatorLayout容器已经被BottomSheet填满。 5.STATE_HIDDEN:默认无此状态,可通过app:behavior_hideable或setHideable(false) 启用此状态,启用后用户将能通过向下滑动完全隐藏BottomSheet
需要注意的地方
setSkipCollapsed方法是在STATE_EXPANDED状态下,用户用手往下滑,收缩BottomSheet,如果设置这个方法为true,而且设置setHideable为true的情况下,BottomSheet才会直接跳过STATE_COLLAPSED,直接跳过STATE_COLLAPSED状态,变为完全隐藏(不然,你想啊,它又有没有STATE_HIDDEN状态,要是跳过了STATE_COLLAPSED状态,它还能变成什么状态)。因此,setSkipCollapsed和setHideable方法是会相互影响的,使用的时候,需要特别注意。