一个吸顶Item的简单实现方法分享

2024-09-27 09:29:47

一般的对于上图样式的Sticker我们使用CoordinatorLayout & AppBarLayout就可以说实现。

但是对于下面这种呢？

我的实现思路

首先整个页面的UI结构是通过RecyclerView实现的。

对于上面这个Sticker的实现是在布局的最上方添加了一个和RecyclerView中要吸顶的Item一模一样的布局。然后监听RecyclerView的滚动:

mPostDetailRv.addOnScrollListener(object : RecyclerView.OnScrollListener() {
 override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
  if (pageStatus == null || pageStatus.stickerPos == -1) return

  val preHolder = recyclerView.findViewHolderForAdapterPosition(pageStatus!!.stickerPos - 1)
  val targetHolder = recyclerView.findViewHolderForAdapterPosition(pageStatus!!.stickerPos)

  var offset = if (targetHolder != null) { //滚出去了
   -targetHolder.itemView.top
  }else{
   0
  }

  if (preHolder != null) {
   offset = -1
  }

  if (offset < 0) {
   mPostDetailCommentHeaderSticker.visibility = View.GONE
  } else {
   mPostDetailCommentHeaderSticker.visibility = View.VISIBLE
  }
 }
}

上面pageStatus.stickerPos是Sticker在RecyclerView中的数据的位置。上面的逻辑写的其实比较复杂，不过确实实现了需求(-_-), 我解释一下:

即我判断Sticker是否出现依赖于itemView.top和Sticker的前一个itemview:

如果当前的Sticker的 itemview显示在RecyclerView中，则根据它itemView.top来判断它是否滚动到了顶部
如果它的前一个itemview已经不在RecyclerView中了(被回收了),那说明它肯定滚出去了，这时直接显示

上面的逻辑很奇怪，不过确实实现了吸顶的需求。

不过在后面的需求迭代中Sticker ItemView的前一个ItemView会不断变化，于是上面这段代码就出现了bug。。。。那怎么解决呢？

更简单通用的方法

最后灵机一动，对于StickerItemView的显示我完全可以不依赖于前面这个ItemView:

mPostDetailRv.addOnScrollListener(object : RecyclerView.OnScrollListener() {
 override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
  val currentDataPos = recyclerView.getChildAdapterPosition(recyclerView.getChildAt(0))

  if (pageStatus != null && currentDataPos < pageStatus.stickerPos) {
   mPostDetailCommentHeaderSticker.visibility = View.GONE
  } else {
   mPostDetailCommentHeaderSticker.visibility = View.VISIBLE
  }
 }
})

上面这段代码很轻松的修复了bug。并且它的逻辑很简单，也很通用:

判断当前RecyclerView显示的第一个条目的位置是否大于StickerItem的位置，如果大于就展示吸顶Sticker

效果:

上面这种实现仅适用UI结构是RecyclerView的情况

PASS : 如果你就是这么做的，请无视我(-_-)

更多小分享 : AdvancedAndroid

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

android中RecyclerView悬浮吸顶效果

MultiType-Adapter打造悬浮吸顶效果注:当前版本只适合配合RecyclerView快速打造一款展示UI 悬浮吸顶效果,如通讯录效果,由于实现机制的原因,暂时不支持触摸事件. MultiType-Adapter介绍地址:MultiType-Adapter 是一款轻量级支持多数据类型的 RecyclerView 适配器; 使用简单,完全解耦; 悬浮吸顶效果 ```groovy // root build.gradle repositories { jcenter() maven
Android 实现当下最流行的吸顶效果

开始逐渐领略到ItemDecoration的美~ 今天让我使用 ItemDecoration 来完成可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView: 第一步:布局里写一个RecyclerView 第二步:实例化 recyclerView = (RecyclerView) findViewById(R.id.recyclerView); 第三步:获取所需的数据 (这里我们
一个吸顶Item的简单实现方法分享

一般的对于上图样式的Sticker我们使用CoordinatorLayout & AppBarLayout就可以说实现. 但是对于下面这种呢? 我的实现思路首先整个页面的UI结构是通过RecyclerView实现的. 对于上面这个Sticker的实现是在布局的最上方添加了一个和RecyclerView中要吸顶的Item一模一样的布局.然后监听RecyclerView的滚动: mPostDetailRv.addOnScrollListener(object : RecyclerView.OnSc
Java-文件File简单实用方法(分享)

1.1java.io.File File用于表示文件系统中的一个文件或目录通过File可以: 1:访问该文件或目录的属性信息(名字,大小,修改时间等) file.getName();获取文件名 file.length();获取文件长度 file.lastModified();获取文件最后一次修改时间 file.canWrite();是否可写 file.canRead();是否可读 file.isHidden();是否隐藏 2:操作文件或目录(创建,删除) 使用File创建一个新文件 File
实现一个 Vue 吸顶锚点组件方法

前言近期产品小哥哥给我提了一个新需求,在一个页面的滚动区中添加一组锚点定位按钮,点击按钮将对应的元素显示在页面的可视区中.当按钮组超出页面可视区的时候将其固定在滚动区域的头部,当滚动区滚动时,高亮距离滚动区顶部最近的元素所匹配的锚点按钮. 拆分功能点现在我们已经明确需求了,接下来我们总结一下这个需求有哪些功能点: 按钮组要有吸顶效果点击按钮要有锚点定位功能滚动内容区需要找到对应的按钮并高亮吸顶组件要做一个吸顶效果最简单的方式是将 css 的 position 属性设置为 sticky
微信小程序实现吸顶效果的方法实例

目录 1. 实现方式 2. 存在的问题 3. 考虑是否有更好的实现方式总结背景是做一个日期title随着用户滑动,当滑到当前日期list数据时,有一个吸顶效果,并且该效果与原来样式不一样 1. 实现方式 scroll-view为小程序原生组件 handleScroll为滑动时触发的事件 scroll-y表示在垂直方向上允许滑动 class为fixed的元素在这做固定定位在scroll-view容器的顶部用于显示当前滑动到的日期利用动态绑定class的方法去控制visibility的显示与否
Android RecyclerView实现吸顶动态效果流程分析

目录一.ItemDecoration 二.实现RecyclerView吸顶效果 1.实现一个简单的RecyclerView 2.通过ItemDecoration画分割线 3.画出每个分组的组名 4.实现吸顶效果完整demo 一.ItemDecoration ItemDecoration 允许应用给具体的 View 添加具体的图画或者 layout 的偏移,对于绘制 View之间的分割线,视觉分组边界等等是非常有用的. 当我们调用 addItemDecoration() 方法添加 decora
Android Jetpack Compose实现列表吸顶效果

目录 stickyHeader 实体类加载假数据吸顶标题二级条目完整代码效果图安卓传统的 Recyclerview 打造悬浮头部StickyHeader的吸顶效果,十分麻烦,而在Compose中就简单多了 stickyHeader Compose设计的时候考虑得很周到,他们提供了stickyHeader 作用就是添加一个粘性标题项,即使在它后面滚动时也会保持固定.标头将保持固定,直到下一个标头取而代之. 参数key - 表示唯一的密钥键. 它不允许对列表出现使用相同的键.密钥的类型应
js实现移动端吸顶效果

今天来简单的写一个吸顶,供大家参考,具体内容如下先罗列一下吸顶需要使用到的属性 ** scrollTop 获取当前滚动的距离(也就是盒子距离顶部的距离) offsetTop 盒子距离顶部的高度 offsetHeight 盒子自身的高度 scrollY 滚动的距离 ** 想要写出一个吸顶一定要先明白这几个属性哦(当然了,他也很简单,相信您看完会有一定的收获) 根据图片中的思路来写: <!DOCTYPE html> <html lang="en"> <he
微信小程序实现列表滚动头部吸顶的示例代码

本文介绍了小程序头部吸顶的实现代码示例,分享给大家,也给自己留个笔记 demo 地址: https://github.com/iotjin/Jh_weapp 效果图: 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position
Android自定义RecyclerView Item头部悬浮吸顶

本文实例为大家分享了Android自定义RecyclerView Item头部悬浮吸顶的具体代码,供大家参考,具体内容如下概述 1.自定义了一个FrameLayout,引入条目的头部布局加入到自定义FrameLayout中. 2.将RecyclerView加入FrameLayout 3.条目头部View的Alpha动画以及设置透明和不透明这个时机大多是通过打log来确定的,硬推理还是有些难. 4.当屏幕显示区域的第二条Item距离控件顶端的距离小于条目头部View高度时,就开始移动条目头部Vi
微信小程序实现简单的吸顶效果

本文实例为大家分享了微信小程序实现简单吸顶效果的具体代码,供大家参考,具体内容如下需求:进入页面后首先看到banner布局,然后是tab切换栏以及页面内容,当页面滚动到一定距离后,tab切换栏始终固定在顶部 wxml部分代码如下:  <view style="padding-bottom:30rpx;position:fixed;top:0;width:100%;background:#2ea7e0;">

一个吸顶Item的简单实现方法分享

相关推荐

随机推荐