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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容