自定义 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 -仿新浪微博发现页的实现,核心思想差不多,这里不再重复。


相关文章
|
20天前
|
Windows
【报错】在浏览器输入localhost为什么启动的是Microsoft的IIS windows首页?
【报错】在浏览器输入localhost为什么启动的是Microsoft的IIS windows首页?
|
8月前
|
XML Android开发 数据格式
自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页(二)
自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页
|
4月前
|
Web App开发 测试技术
软件测试/测试开发|edge浏览器首页及新标签页设置
软件测试/测试开发|edge浏览器首页及新标签页设置
49 0
|
8月前
|
存储 JSON BI
如何让 ABAP 服务器能够响应通过浏览器发起的自定义 HTTP 请求的试读版
如何让 ABAP 服务器能够响应通过浏览器发起的自定义 HTTP 请求的试读版
43 0
|
10月前
|
Web App开发 UED C++
在chrome浏览器中调用IE浏览器并访问(openIE.reg自定义协议)
在chrome浏览器中调用IE浏览器并访问(openIE.reg自定义协议)
|
Web App开发 存储 前端开发
现在Chrome浏览器打开"掘金首页"竟开启了六个进程?
前言中已经提到的进程,对我来说有一点陌生。其实我对进程和线程的理解一直模模糊糊的,所以索性去认真学习了一下,发现大佬有文章在此。
314 0
|
Web App开发 JavaScript 前端开发
playwright自定义浏览器设备、时区、经纬度、userAgent、注入脚本
playwright自定义浏览器设备、时区、经纬度、userAgent、注入脚本
993 0
|
前端开发
css:自定义浏览器中滚动条scroll的样式
css:自定义浏览器中滚动条scroll的样式
152 0
css:自定义浏览器中滚动条scroll的样式
|
Web App开发
自定义浏览器网页背景是什么体验?
怎么将Chrome浏览器的网页背景设置成自己喜欢的图片背景?一起写个插件来实现一键切换浏览器背景吧。
197 0
自定义浏览器网页背景是什么体验?
|
Web App开发
Chrome 浏览器自定义光标!这款插件不能错过!
Chrome 浏览器自定义光标!这款插件不能错过!

热门文章

最新文章