使用AppBarLayout实现二次吸顶功能

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

它目前支持以下功能:

  1. 支持单类型吸顶功能
  2. 支持多类型吸顶功能
  3. 支持开启和关闭吸顶功能
  4. 支持指定位置吸顶功能
  5. 支持设置吸顶偏移量
  6. 支持自定义RecyclerView上Item吸顶边界自定义
  7. 可以无缝配合AppBarLayout

开门见山,最近需要实现一个二次吸顶的效果,UE给出的效果图如下

分析如下:

看到吸顶的效果,首先想到使用CoordinatorLayout和AppBarLayout来实现。界面主要分为2个部分:

  1. 底部的可滑动区域,可以用ScrollView或者RecyclerView实现。
  2. 顶部的吸顶区域用AppBarLayout实现。

我们把顶部的吸顶区域拆分一下,可以分为以下4个部分:

  1. 品牌区域,当往下滑的时候,RecyclerView显示第一个Item的时候,该区域才开始往下滑。

  1. 品类图片区域,当下滑的时候,该区域会跟随往下滑动,当该区域到达顶部时会一直吸顶,直到RecyclerView第一个Item出现的时候,才往下滑动。

  1. 品类标题区域,当上滑的时候,该区域会先跟随往上滑动,当该区域到达顶部时会一直吸顶

  1. 排序和筛选区域,当下滑的时候,无论RecyclerView当前的位置在哪里,该区域会首先跟随向下滑出


在本文中,我把向上滑动区域3吸顶,向下滑动区域2吸顶做了一个定义叫二次吸顶,二次吸顶的功能会有一个矛盾点,我们想让区域3在上滑的时候吸顶,那么势必造成区域4无法作为AppBarLayout的一部分(熟悉AppBarLayout的scroll标志的同学应该能理解,如果不能理解,本文后半部分原理篇会讲解到),那么区域4只能做为RecyclerView的头部,作为头部,只有当RecyclerView下滑到顶,区域4才会向下跟随滑出,无法满足上面区域4的要求。

当分析出这样一个矛盾点的时候。我的第一反应是,使用AppBarLayout无法满足现有的要求,我必须得自己重写一个Behavior来实现该功能,而且该Behavior必须满足下面3个条件:

  1. Behavior本身需要处理滑动事件,在吸顶区域滑动时,RecyclerView需要联动
  2. Behavior需要处理RecylerView和吸顶区域之间的嵌套滑动,在RecyclerView区域滑动时,吸顶区域需要联动
  3. 上滑时区域3要吸顶,下滑时区域4要吸顶

一想到只需要满足这么三个条件便能实现效果,迫不及待地跃跃欲试,但是冷静了几秒钟会

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值