Android BottomSheet 的使用(仿高德地图的列表效果)

最近项目中突然要实现高德地图中列表的效果,刚开始一筹莫展,以为是自定义控件还是通过手势进行判断 ,果断蒙了,百度谷歌了一下最后发现原来谷歌早就就出来了这样的效果--android.support.design.widget 里面就有BottomSheet这样的一个底部动作条,下面我就以我自己实现的类似高德地图的列表效果来解释一下BottomSheet的使用。


仿高德地图的列表效果


仿高德地图的列表效果

一、BottomSheet的使用

BottomSheet 使用需要CoordinatorLayout作为父布局,BottomSheet 的布局作为CoordinatorLayout 的子布局,并且BottomSheetBehavior(比如加上app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”)


BottomSheet的布局和效果

这个就是BottomSheet的布局 通过布局我们也就看到了一个属性 app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”这的一个属性


BottomSheetBehavior的源码

通过上面的翻译我们也就能很清楚的明白了这个方法就是为了手势的的交互的一个方法

其中BottomSheetBehringer中有个监听状态改变的回调方法BottomSheetCallback

/**

* Callback for monitoring events about bottom sheets.

*/

public abstract static classBottomSheetCallback {

/**

* Called when the bottom sheet changes its state.

*

*@parambottomSheetThe bottom sheet view.

*@paramnewStateThe new state. This will be one of {@link#STATE_DRAGGING},

*                    {@link#STATE_SETTLING}, {@link#STATE_EXPANDED},

*                    {@link#STATE_COLLAPSED}, or {@link#STATE_HIDDEN}.

*/

public abstract void onStateChanged(@NonNullView bottomSheet,@StateintnewState);

/**

* Called when the bottom sheet is being dragged.

*

*@parambottomSheetThe bottom sheet view.

*@paramslideOffsetThe new offset of this bottom sheet within [-1,1] range. Offset

*                    increases as this bottom sheet is moving upward. From 0 to 1 the sheet

*                    is between collapsed and expanded states and from -1 to 0 it is

*                    between hidden and collapsed states.

*/

public abstract void onSlide(@NonNullView bottomSheet, floatslideOffset);

}

其中的onSlide的方法中源码中的解释是下面的新偏移表[1,-1]范围内。抵消增加下面这个表是上行。从0到1之间的表收缩的和扩大状态和从-1到0之间隐藏和收缩的的状态。  

实际上这个解释是我自己测试了感觉是有误的(也有可能在其他的情况下不是这样的  如果谁知道了麻烦说一下 留个言)  我通过打印log知道真实的情况是从0到1表示向上展示 而从1到0表示的是收缩的状态  当然我所说的展示有两种状态 一个是STATE_SETTLING+STATE_EXPANDED  收缩也是两种状态STATE_HIDDEN+STATE_SETTLING

二、BottomSheetBehavior的五个状态

STATE_COLLAPSED: 默认的折叠状态, bottom sheets只在底部显示一部分布局。显示高度可以通过 app:behavior_peekHeight 设置(默认是0)

STATE_DRAGGING : 过渡状态,此时用户正在向上或者向下拖动bottom sheet

STATE_SETTLING: 视图从脱离手指自由滑动到最终停下的这一小段时间

STATE_EXPANDED: bottom sheet 处于完全展开的状态:当bottom sheet的高度低于CoordinatorLayout容器时,整个bottom sheet都可见;或者CoordinatorLayout容器已经被bottom sheet填满。

STATE_HIDDEN : 默认无此状态(可通过app:behavior_hideable 启用此状态),启用后用户将能通过向下滑动完全隐藏 bottom sheet

设置状态:

bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

并且说一下:

BottomSheet 点击展示的默认是折叠状态,不是完全展开状况,所有如果需要完全展开,请设置展开状况

peekHight--看名字就知道这方法的意思:我们设置初次显示展示的高度是要设置这个参数的


我们可以通过设置peekHight的值我们能够显示让列表悬浮的高度(我是这样理解的) 

如果设置为0的时候就不会显示列表

三、BottomSheetDialog

BottomSheetDialog这个dialog是谷歌提供的一个已经集成了Behavior

BottomSheetDialog指从底部弹出的对话框。跟PopupWindow的效果类似。但是你可以手动的去将Dialog向下移动至消失

如果Dialog中的布局是类似于ListView的列表控件时,当ListView的item比较多时,弹出对话框时只会显示几个item,向上拖动时,才会显示全部item

BottomSheetDialog的使用还是比较简单的

BottomSheetDialog dialog=new BottomSheetDialog(BottomSheetActivity.this);

View dialogView= LayoutInflater.from(BottomSheetActivity.this).inflate(R.layout.layout_bottom,null);

dialog.setContentView(dialogView);

dialog.show();


其中的layout_bottom为我们自定义Dialog的布局

四、坑

但是 这个也是有个坑的 

当我们第一次向下滑动的时候 我们会发现再次滑动的时候到底部的时候,我们不能够再次的将列表滑动上来  我们要设置

if(behavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {

behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

}

当然了这个方法我这个便是点击“点击展示更多结果”按钮 在设置的


详细的代码地址:github.com/Lovingd/LovingdDemo/blob/master/app/src/main/java/com/muzi/lovingd/ui/GaodeBottomSheetActivity.java


好了暂时就写到这里  深入的东西 (类似于自定义的behavior)我也正在学习中  推荐这些文章:

CoordinatorLayout高级用法-自定义Behavior

CoordinatorLayout 自定义Behavior并不难,由简到难手把手带你飞

Material Design系列之自定义Behavior支持所有View

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容