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);
//通过在xml中配置的string/bottom_sheet_behavior,拿到BottomSheetBehavior 实例
final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
//是否跳过STATE_COLLAPSED状态
behavior.setSkipCollapsed(true);
//是否开启STATE_HIDDEN状态
behavior.setHideable(false);
//设置STATE_COLLAPSED状态的高度
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