BottomSheet的使用

xiaoxiao2021-02-28  199

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

需要注意的地方

setSkipCollapsed方法是在STATE_EXPANDED状态下,用户用手往下滑,收缩BottomSheet,如果设置这个方法为true,而且设置setHideable为true的情况下,BottomSheet才会直接跳过STATE_COLLAPSED,直接跳过STATE_COLLAPSED状态,变为完全隐藏(不然,你想啊,它又有没有STATE_HIDDEN状态,要是跳过了STATE_COLLAPSED状态,它还能变成什么状态)。因此,setSkipCollapsed和setHideable方法是会相互影响的,使用的时候,需要特别注意。

转载请注明原文地址: https://www.6miu.com/read-19164.html

最新回复(0)