自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页(一)

简介: 自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页

使用CoordinatorLayout打造各种炫酷的效果

自定义Behavior —— 仿知乎,FloatActionButton隐藏与展示

NestedScrolling 机制深入解析

一步步带你读懂 CoordinatorLayout 源码

自定义 Behavior -仿新浪微博发现页的实现

ViewPager,ScrollView 嵌套ViewPager滑动冲突解决

自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页


前言


记得两年前的时候,曾写过自定义 behavior 的文章 自定义 Behavior -仿新浪微博发现页的实现,到现在差不多有一万多的阅读量吧。


bfb256bf3ebe8ed2128d8c85f73e96ed_format,png.png


今天,对该 behavior 进行升级,相对于两年前的 behavior,增加了以下功能


  • 级联滑动过程中增加监听回调,方便外部根据滑动距离,进行相应的动画,展现炫酷的 UI,通过 setPagerStateListener 设置回调监听
  • 在滑动到顶部的时候,可以设置是否能够滑动将 Head 滑动下来,方法为 setCouldScroollOpen
  • 手指在 header 部分惯性滑动的时候,增加 fling 回调,可根据需要,是否滑动 content 部分的 list ,方法为 setOnHeaderFlingListener
  • HeaderBehavior ,ContentBehavior 代码优化,与业务逻辑剥离开,方便复用。

使用说明


效果图


我们先来看一下新浪微博发现页的效果:


网络异常,图片无法展示
|


接下来我们在来看一下我们两年前仿照新浪微博实现的效果


267898a636754fc35d3304283ef91c7f_format,png.png


仿 QQ 浏览器


56f6a9f599c8cb00e1ed9e8af683b936_format,png.png


仿美团商家详情页面的:


65642fdbb8fcf96bcebd6a9c056fd1bf_format,png.png


分析说明:

83494bb1d7205f3ef16bf5f0804602ba_format,png.png


有两种状态,open 和 close 状态。


  • open 状态指 Tab+ViewPager 还没有滑动到顶部的时候,header 还 没有被完全移除屏幕的时候
  • close 状态指 Tab+ViewPager 滑动到顶部的时候,Header 被移除屏幕的时候


从效果图,我们可以看到 在 open 状态下,我们向上滑动 ViewPager 里面的 RecyclerView 的 时候,RecyclerView 并不会向上移动(RecyclerView 的滑动事件交给 外部的容器处理,被被全部消费掉了),而是整个布局(指 Header + Tab +ViewPager)会向上偏移。当 Tab 滑动到顶部的时候,我们向上滑动 ViewPager 里面的 RecyclerView 的时候,RecyclerView 可以正常向上滑动,即此时外部容器没有拦截滑动事件。

同时我们可以看到在 open 状态的时候,我们是不支持下拉刷新的,这个比较容易实现,监听页面的状态,如果是 open 状态,我们设置 SwipeRefreshLayout setEnabled 为 false,这样不会 拦截事件,在页面 close 的时候,设置 SwipeRefreshLayout setEnabled 为 TRUE,这样就可以支持下拉刷新了。


基于上面的分析,我们这里可以把整个效果划分为三个部分


第一部分 Header 部分:在 Header 部分还没有滑动到顶部的时候(即 open 的时候),跟随手指滑动

第二部分 Content 部分:我们向上滑动的时候,当Header 处于 open 状态,这时候 Header 向上滑动, content 部分的 recyclerView 不会滑动,当 header 处于 close 状态,content 部分向上滑动, RecyclerView 向上滑动。当我们向下滑动的时候,header 并不会随着滑动,只会滑动 content 部分的 recyclerView

第三部分 search 部分:当我们向上滑动的时候,Search 部分会随着滑动,最终停留在固定的位置.


我们把这三部分的关系定义为 Content 依赖于 Header。Header 移动的时候,Content 跟着 移动。所以,我们在处理滑动事件的时候,只需要处理好 Header 部分的 Behavior 就oK了,Content 部分的 Behavior 不需要处理滑动事件,只需依赖于 Header ,跟着做相应的移动即可。Search 部分的 behavior 也不需要处理滑动事件,只需依赖与 Header,跟着做相应的移动。


至于具体怎么实现的,可以看自定义 Behavior -仿新浪微博发现页的实现,核心思想差不多,这里不再重复。


相关文章
|
11月前
|
Web App开发 存储 缓存
(新)Chrome浏览器自定义背景插件
(新)Chrome浏览器自定义背景插件
167 0
|
5月前
|
测试技术
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
|
5月前
|
Windows
【报错】在浏览器输入localhost为什么启动的是Microsoft的IIS windows首页?
【报错】在浏览器输入localhost为什么启动的是Microsoft的IIS windows首页?
|
5月前
|
JavaScript
vue自定义浏览器滚动条样式
vue自定义浏览器滚动条样式
41 0
|
XML Android开发 数据格式
自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页(二)
自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页
|
5月前
|
Web App开发 测试技术
软件测试/测试开发|edge浏览器首页及新标签页设置
软件测试/测试开发|edge浏览器首页及新标签页设置
93 0
|
存储 JSON BI
如何让 ABAP 服务器能够响应通过浏览器发起的自定义 HTTP 请求的试读版
如何让 ABAP 服务器能够响应通过浏览器发起的自定义 HTTP 请求的试读版
|
Web App开发 UED C++
在chrome浏览器中调用IE浏览器并访问(openIE.reg自定义协议)
在chrome浏览器中调用IE浏览器并访问(openIE.reg自定义协议)
|
16天前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
1天前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
32 0

热门文章

最新文章