BottomSheetBehavior实现高德地图首页效果之原理篇

Meterial Design常见控件的使用(四),android开发实战项目 @Override public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target) { super.onStopNestedScroll(coordinatorLayout, child, target); } /** onStartNestedScroll返回true才会触发这个方法,接受滚动处理后回调,可以在这个 方法里做一些准备工作,如一些状态的重置等。 @param 阅读详情

1. 引言

BottomSheetBehavior能实现怎样的效果,一图胜千言。

如果仅仅是实现上下拖动和隐藏的功能。抛开BottomSheetBehavior自己实现也不难,在没有CoordinatorLayout的年代,这种效果往往是纯手工打造。既然如此为何Google要专门设计BottomSheetBehavior呢?为了搞清楚这个问题,我查阅源码探究了一番,确实发现了一些隐秘的角落。我将从以下几个方面讲解BottomSheetBehavior的设计思路

  1. 讲解BottomSheetBehavior的几种状态
  2. 讲解BottomSheetBehavior的事件分发
  3. 讲解BottomSheetBehavior如何处理嵌套滑动
  4. 实现高德地图首页效果,欢迎关注字节小站微信公众号号

2. BottomSheetBehavior的几种状态

BottomSheetBehavior一共有6种状态

  1. STATE_EXPANDED 全部展开状态
  2. STATE_COLLAPSED 收起状态
  3. STATE_DRAGGING 拖动状态
  4. STATE_SETTLING
  5. STATE_HIDDEN 隐藏状态
  6. STATE_HALF_EXPANDED 半展开状态

系统通过哪种方式实现每种状态不同的偏移量呢?

  1. layout阶段通过ViewCompat.offsetTopAndBottom(child, offset)实现偏移量
  2. 用户触摸交互阶段通过ViewDragHelper.dragTo(left,top,dx,dy)实现偏移量

2.1 Layout阶段

BottomSheetBehavior#onLayoutChild

Layout阶段最后会通过findScrollingChild方法,寻找开启了嵌套滑动的后代View。其实这就是Google单独研发出BottomSheetBehavior的主要考量。满足支持嵌套滑动的BottomSheet效果。

2.2 用户触摸交互阶段


2.3 状态对应的偏移量

状态偏移量
STATE_COLLAPSEDcollapsedOffset
STATE_EXPANDEDgetExpandedOffset()
STATE_HALF_EXPANDEDhalfExpandedOffset
STATE_HIDDENparentHeight

1. 计算 collapsedOffset

变量名默认值
PEEK_HEIGHT_AUTO常量值-1
peekHeightMin默认值64dp,用户不可修改
peekHeightAuto默认值true,用户可设置
peekHeight默认值0,如果设置为PEEK_HEIGHT_AUTO peekHeightAuto为true否则为false,如果设置小于-1则为0
fitToContents默认值true,用户可设置
fitToContentOffsetMath.max(0, parentHeight - child.getHeight())

peekHeight默认值为0。设置逻辑如下

  1. height为-1,则peekHeightAuto设置为true。
  2. 否则peekHeightAuto为false,而且peekHeight最小值为0。

计算collapsedOffset值有四种情况

CasepeekHeightAutofitToContents
case1truetrue
case2truefalse
case3falsetrue
case4falsefalse

返回值

Case返回值
Case1Math.max(parentHeight - Math.max(peekHeightMin, parentHeight - parentWidth * 9 / 16), fitToContentsOffset)
Case2parentHeight-Math.max(peekHeightMin, parentHeight - parentWidth * 9 / 16)
Case3Math.max(parentHeight - peekHeight, fitToContentsOffset)
Case4parentHeight - peekHeight

2. 计算 halfExpandedOffset

3. 计算 expandedOffset

4.如何固定BottomSheetBehavior的高度?

了解这些值的计算有什么好处。假设我想让BottomSheetBehavior,固定高度,不能向上滑也不能向下滑。那我们则需要将collapsedOffset和expandedOffset设置为一样的值才行。

代码如下

为了良好的阅读体验没有使用代码块呈现代码,如果你想获取代码请访问github代码库

3. 讲解BottomSheetBehavior的事件分发

学习Android事件分发是有方法的。我总结为"三板斧"分析法

  1. 源码分析
  2. 场景化
  3. 树形图分析

3.1 三板斧之源码分析

从onInterceptTouchEvent的代码中,可以看到viewDragHelper.shouldInterceptTouchEvent(event),说明拦截方法会让ViewDragHelper方法处理。

ViewDragHelper的初始化,会传入ViewDragHelper.Callback dragCallback对象,该对象的boolean tryCaptureView(View child, int pointerId)方法决定viewDragHelper.shouldInterceptTouchEvent的返回值。

onInterceptTouchEvent的拦截逻辑如下

onTouchEvent主要交由ViewDragHelper#processTouchEvent处理,如果是Move事件最终会调用dragTo方法进行移动

3.2 三板斧之场景化和树形图分析

假设有场景如下,用户可以在HeadLayout、NestedScrollingChild,TopMostLayout区域内上下滑动。这三个case,事件的处理路径如何呢?

转化成树形图如下

设置BottomSheetBehavior为LinearLayout的Behavior

3.2.1. 在HeadLayout区域内上下滑动

  1. Down事件处理,初始状态,在ViewDragHelper的shouldInterceptTouchEvent方法中不会调用tryCaptureViewForDrag方法,该方法返回false。在BottomSheetBehavior onInterceptTouchEvent中完整事件路径如下,红线表示事件的分发路径

结合树形图分析。由于BottomSheetBehavior不拦截事件。Down事件分发流程如下

最终会调用到BottomSheetBehavior的onTouchEvent方法,会调用到ViewDragHelper的processTouchEvent方法

最终会将ViewDragHelper的dragState设置为STATE_DRAGGING

  1. MOVE事件在BottomSheetBehavior onInterceptTouchEvent分发流程如下

接下来直接调用 BottomSheetBehavior 的onTouchEvent方法。同样调用到ViewDragHelper的processTouchEvent方法

3.2.2. 在NestedScrollingView区域内上下滑动

1.Down事件分发到BottomSheetBehavior的onInterceptTouchEvent分发流程如下

由于不拦截。Down事件分发给NestedScrollingChild,NestedScrollingChild会启动嵌套滑动,与BottomSheetBehavior配合完成嵌套滑动

2.Move事件分发流程比较复杂,当在NSC中Move的距离没达到阈值时,MOVE会继续分发到BottomSheetBehavior的onInterceptTouchEvent中,当在NSC中MOVE距离达到阈值时,会调用parent.requestDisallowInterceptTouchEvent(true)从此直达NSC,就是纯粹的嵌套滑动了。

接下来事件交由NSC分发,当MOVE距离大于阈值时,事件直接交由NSC处理。

3.2.2. 在TopMostLayout区域内上下滑动,该区域与NSC区域没有交集

Down事件同上

MOVE事件,当距离>ViewDragHelper阈值时

由于MOVE事件拦截了,会交由BottomSheetBehavior onTouchEvent处理,如下图

4. 结束

至此已基本讲解完BottomSheetBehavior的事件分发机制。具体细节未能尽善尽美。纸上得来终觉浅,希望读者可以结合文章去探索源码。
下次我将用BottomSheetBehavior来实现高德地图首页效果。欢迎持续关注

我开源了一个方便RecyclerView吸顶的Android库,欢迎您访问https://github.com/lizijin/StickyHeaderForRecyclerView,如果您使用本库,请提出您的宝贵意见。

它目前支持以下功能:

  • 支持复杂吸顶View功能
  • 支持多类型吸顶功能
  • 支持开启和关闭吸顶功能
  • 支持设置吸顶偏移量
  • 支持兼容ItemDecoration和ItemAnimator
  • 支持RecyclerView数据变化和滚动到指定位置
  • 其它更多功能

如果你有任何问题,欢迎通过以下方式联系我
欢迎扫码关注公众号

Android Material Design 之 BottomSheetBehavior 前面已经介绍了如何在地图上自定义Marker 和 Poi搜索 说实话录个视频真麻烦,还得转gif , 转就转吧图片还有大小限制 , 你说气人不 ! 看过前两篇地图相关的博客,应该可以看出来, 屏幕底部有个展示数据的列表 ,可以跟随手指拖拽、滑动, 这样的效果在高德地图app中见过, 饿了么点餐的时候好像也有 , 其实这是Google Material Design的BottomS... 阅读详情

相关推荐

Android仿高德地图首页底部拉起弹窗BottomSheetBehavior

<iframe height=498 width=510 src='https://player.youku.com/embed/XNTA2MTc0OTU2MA==' frameborder=0 'allowfullscreen'></iframe>

QQ小冰 的博客 3468

Android BottomSheetBehavior(底部弹窗)

与普通的对话框不同,底部工作表对话框以一种半透明的方式在底部显示,用户可以通过向上滑动的手势将其展开或关闭。底部工作表对话框从屏幕底部弹出,提供一种非常流行的用户界面模式,用于显示与当前操作或内容相关的选项、操作或信息。它提供了一个简便的方法,在底部以对话框的形式展示内容。,你可以在你的 Android 应用中实现一个基本的底部工作表,并控制它的显示、隐藏以及与用户交互时的行为和动画效果。: 底部对话框在不同屏幕尺寸上可能会有不同的显示效果,因此确保内容在不同尺寸和密度的屏幕上均能正常显示和操作。

帅次的博客 4885

Android高德地图 实现定位 周边热点 POI搜索 BottomSheetBehavior 动态获取权限demo

首先我们先看下效果 demo中包含了两种不同风格的地图定位效果展示,一种仿IOS的苹果地图实现的界面 地图抽屉栏展示 通过手势滑动可以实现底部栏的 BottomSheetBehavior Demo地址:https://github.com/xinjilong/GaodeIosStyle2

androiddddddd的博客 4108

android_基础_ BottomSheetBehavior使用(底部导航抽屉的实现)

原文:https://blog.youkuaiyun.com/qjay_dev/article/details/51289267 本文使用的 com.android.support:design 版本为 23.3.0 效果图 相关类 BottomSheetBehavior 此类类似一个工具类,并不能在布局中使用,下面我们看看怎么实现我们效果图中的功能 layout <FrameLayout android:id="@+id/bottom_sheet" andro.

写bug的蚊子的博客 5157

Android仿高德地图打车的三段式BottomSheet

首先声明:只是简单的实现了功能,但是实际与高德的还是有点区别 高德的效果: 我的效果: Emmmm,感觉差不多吧。。。其他的还没弄呢,比如滑到最上面有阴影啊之类的。 首先说下思路,一开始,我是打算在滑动的时候,不停的监听onSlide里slideOffset这个参数,然后根据这个参数来动态设定bottomsheet的setPeekHeight,但是问题是,原生的BottomSheetBehav...

qq_33339175的博客 6104

可用!三行代码高仿高德地图三段式抽屉效果

三行代码 废话不在前面说,直接上代码! 讲 XML 根布局设置为 CoordinatorLayout <android.support.design.widget.CoordinatorLayout 将要要弹出的三段式抽屉根布局设置 layout_behavior 属性 app:layout_behavior="android.support.design.widget.BottomSheetBehavior" 将要要弹出的三段式抽屉根布局设置 behavior_fitToConten

silencefly的博客 4370

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

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

weixin_35652574的博客 2317

BottomSheet 实现高德/百度地图三段式抽屉效果

最近开发的项目有需求,就是要实现抽屉式隐藏菜单。然后就有了这文章的。哎!0到1就是一个曲折的过程啊!然后就是去漫无目的的搜索相关的效果的过程了。此处省略一万个字......

seven2729的专栏 951

仿高德地图首页效果,简单代码实现

2021/11/10日高德的首页效果是这样的 然后我的效果 关键代码 behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() { override fun onStateChanged(bottomSheet: View, newState: Int) { //3 STATE_EXPANDED 4 STATE_COLLAPSED 5 S

Big_Sweet 1873

BottomSheetBehavior底部弹出的用法

需要的依赖: compile ‘com.android.support:appcompat-v7:23.2.1’ compile ‘com.android.support:design:23.2.1’

EBS开发_离散工单创建API

--以下代码于20171213在TONY环境中实现 DECLARE     l_iface_rec    wip.wip_job_schedule_interface%ROWTYPE; --工单任务接口表     l_group_id     NUMBER;     l_returnstatus VARCHAR2(40);     l_errormsg     VARCHAR2(2000

蜗牛先生快跑的博客 2596

Android仿高德上下抽屉菜单自定义BottomSheetBehavior

BottomSheetBehavio不控制的话基本就两种状态,要么展开,要么收缩,如果你不需要这种,那么用这个就好了 布局代码 <?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.an

美好事物的开始 2657

闲人闲谈PS之一项目库存跨公司业务STO解决方案--SAP闲人的开篇

写这篇文章之前,简单说一下发这篇文章的动机。也算是在SAP这一行干了快10多年,在对一个模块了解越来越深入,越发觉自己的SAP知识浅薄。总的来说,和多数顾问一样,对于**标准功能**的应用业务场景理解还是存在或多或少的知识盲区。 因为一个偶然,看到SAP团子君的文章,分享了很多干货文章。这也是自己一直想做的时候,不管水平高低与否,分享本身就意味着提升。好了废话不多说,先在优快云上发一篇吧,困惑自己将近10年的问题的解决方案。 业务场景:在项目型企业中,通常会有这样的业务,母公司和客...

SAP闲人的博客 9269

android 仿简书主页,Android仿高德首页三段式滑动

最近发现很多app都使用了三段式滑动,比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式,谷歌其实给了我们很好的2段式滑动,就是BottomSheet,所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果。高德的效果gaode_300.gif实现的效果fgaode_300.gif我们实现的效果和高德差距不是很大,也很顺滑。具体实现其实就是集成CoordinatorLayo...

weixin_42161497的博客 1663

在国产麒麟系统上,用Postfix和Dovecot手搓一个内部邮件服务器(附Foxmail配置)

本文详细介绍了在国产麒麟系统上使用Postfix和Dovecot搭建内部邮件服务器的完整流程,包括系统准备、核心配置、安全加固及客户端适配。针对国产环境的特殊需求,提供了依赖包适配、配置差异和Foxmail客户端配置的实用解决方案,助力企业实现高效内部协作。

weixin_33722405的博客 371

大红球预警版-精选+自定义板块监控

这是一款简单易用的股票大单资金监控插件,兼容通达信软件,可嵌入分时图或定制版面。它以红绿圆球直观显示主力买卖情况(红球为买,绿球为卖),支持300万以上大单语音播报。插件提供实时资金流向分析、多股同时监控、自定义预警条件等功能,无需L2账号。用户可自由切换图形/列表模式,监控特定板块,并配合幻影软件实现自动交易。虽然上涨股通常红球占优,但需结合其他指标综合判断。该插件完全免费,包含详细视频教程,适合新手使用。

guleba的博客 1795

android仿高德地图透明黑字,Android 仿高德地图可拉伸的BottomSheet的示例代码

前言最近项目中需要用到高德地图搜索结果后的结果展示的可拉伸控件。gaode.gif而我看到这个效果图,觉得这个就是一个slidingpanel,但是翻阅了一些发现用google自带的bottomsheet实现更方便什么是BottomSheet?Bottom Sheet是Design Support Library23.2 版本引入的一个类似于对话框的控件,可以暂且叫做底部弹出框吧。 Bottom ...

weixin_42427882的博客 360

RWEQ土壤风蚀模型的估算与变化归因分析

本次以介绍RWEQ模型的基本原理及数据需求,再结合案例讲解RWEQ模型中区域地理空间数据库构建的方法和各个参量提取的原理与方法,最后结合典型案例进行综合讲解风蚀模数估算、制图及归因分析。空间分析与制图:提取分析、局部分析、邻域分析、区域分析、插值分析、平滑处理、像元提取、采样与重采样。以某实际应用为案例,掌握RWEQ模型进行当地土壤风蚀量空间分布分析整体流程。地图服务器、在线地图、范围指示器、格网、表格、基础地图服务使用规则介绍。掌握土壤风蚀模型的原理、优势点及因子组成。

2301_77413856的博客 1194

BottomSheet 的使用介绍(BottomSheetBeahvior,BottomSheetDialog,BottomSheetDialogFragment)

BottomSheet是一种从屏幕底部向上滑出一个对话框的效果,可以用来显示内容或者提供与用户相关的操作,在开发过程中十分常见,Bottom Sheet 具体实现主要包含:BottomSheetBeahvior 、BottomSheetDialog、BottomSheetDialogFragment,这三个组件均可以实现半屏弹出效果,区别点在于接入和使用方式上的差异三个组件的概述。

m0_73986294的博客 4463

kaggle——信用卡欺诈检测项目实战

笔记第一步:了解题目,确定任务第二步:场景分析第三步:数据预处理看是否有缺失值查看样本类别分布数据不均衡解决办法数据值标准化/归一化第四步:特征工程1)查看特征分布情况,把不同类别下特征分布相差不大的特征删除掉2)特征缩放第五步:模型训练处理不平衡样本交叉验证求取最好的模型参数第六步:模型评估使用下采样数据训练与测试使用下采样数据训练与测试(不同的阈值对结果的影响)使用下采样数据训练,原始数据进行测试原始数据进行K折交叉验证使用原始数据进行训练和测试查看ROC曲线逻辑回归阈值选择过采样总结 第一步:了解题目

weixin_45942265的博客 1万+

Halcon手眼标定实战:九点标定法从入门到精通(附完整代码)

本文详细介绍了Halcon环境下九点标定法的完整实现流程,从基础概念到实战技巧,帮助开发者快速掌握手眼标定技术。通过精确采集图像坐标与机械坐标,计算仿射变换矩阵,实现相机与机械臂坐标系的精确映射,适用于工业自动化中的平面定位场景。

v4w5x6的博客 411

BottomSheet的使用

使用shape约束圆角。

m0_74000465的博客 1556

AB测试面试题

AB实验流程以一个实际的业务场景去描述AB实验流程,限定场景来减少和面试官的信息差,确保沟通高效可以以自己简历上某个相关项目的场景来举例,或者以面试的岗位对应的业务来举例子。不能光自己说,要让面试官参与进来,引导面试官往自己熟悉的内容提问,从被动转为主动。回答要有逻辑性,简洁、准确的表达。还是延用之前提到的项目案例,假设之前抖音拍摄页面中右下角相册功能的icon 由相册图标改为 用户相册的最新一张照片这个案例写在了我的简历中。

qq_45727498的博客 857

BottomSheetBehavior 的两个用处

1. BottomSheetBehavior 简介 An interaction behavior plugin for a child view of CoordinatorLayout to make it work as a bottom sheet. 链接:https://developer.android.google.cn/reference/android/support/desi...

Sindyue的博客 5135

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

Material Design组件 - 使用BottomSheet展现扩展内容(一)

BottomSheetBehavior最早是在Android的Design支持库中出现的,这个库中提供了许多Material Design 组件,BottomSheetBehavior即是对Material Design中Sheets: bottom即底部扩展菜单的一种实现,是对Material Design的支持,正如Material Design里面的Sheets: bottom中写的那样,其可以在屏幕的底部为整个画面提供一个补充视图增强用户体验性BottomSheet的实现首次出现是在com.andr

卡卡尔的专栏 4847

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

(转载)BottomSheetBehavior实现底部弹窗

BottomSheetBehavior是Android Support Library23.2中引入的,它可以轻松实现底部动作条功能。

Android_xiong_st的博客 467
上一篇: 使用AppBarLayout实现二次吸顶功能
下一篇: ViewCompat.offsetTopAndBottom翻车现场
字节小站
博客等级 码龄10年 53粉丝 55原创
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值