记录瀑布流布局遇到的一个坑

简介: 记录瀑布流布局遇到的一个坑

开门见山,最近在做一个购物车+推荐商品功能。结合 RecyclerView StaggeredGridLayoutManager,完成瀑布流样式布局。完成之后,发现切换TAB,回到购物车页面后,页面会有些许的偏移。如下图。本来"洽洽香瓜子的价格 ¥9.90"紧贴TAB栏。再切换完TAB重新回来后,"洽洽香瓜子的价格 ¥9.90"字样竟然不见了。


image.gif



发现此问题后,首先回滚到之前使用GridLayoutManager布局的代码。运行发现,GridLayoutManager并无此问题。看来问题的罪魁祸首是StaggeredGridLayoutManager。


问题分析如下:

购物车页面发生了偏移,那么必定调用了StaggeredGridLayoutManager的fill方法。

image.png


fill方法会调用到layoutDecoratedWithMargins方法,给RV上的View布局


640.png


layoutDecorateWithMargins中otherStart,start,otherEnd,end参数分别表示布局的left,top,right,bottom。既然发生了偏移,说明start,end参数发生了改变。start赋值处如下

StaggeredGridLayoutManager#fill方法中


640.png


StaggeredGridLayoutManager#getMaxEnd方法中

640.jpg

StaggeredGridLayoutManager#Span#getEndLine方法中


640.png

会判断mCachedEnd 是否被置为无效。如果被置为无效那么会重新计算View的top位置。好像找到问题所在了。那么mCachedEnd在哪里被赋值成INVALID_LINE呢。找寻一番发现


StaggeredGridLayoutManager#Span#invalidateCache方法中

640.png


找寻invalidateCache方法被谁调用了

640.png

StaggeredGridLayoutManager#Span#clear方法中

640.png


找寻clear方法被谁调用了

640.png

StaggeredGridLayoutManager#onDetachedFromWindow方法如下


640.png


由此可见,切换TAB的时候触发了View的onDetachedFromWindow方法,从而清空了StaggeredGridLayoutManager中所有布局的基准线,EndLine。重新返回购物车界面,会将当前RecyclerView中的可见的第一项View从0开始重新布局,导致了偏移。由于GridLayoutManager没有发现偏移。我们可以对比一下他们的onDetachedFromWindow方法实现。

640.png640.png


那么解决方案来了。


解决方案一:重写StaggeredGridLayoutManager的onDetached。nothing to do

640.png


解决方案二:使用StaggeredGridLayoutManager的SavedState。由代码可见,SavedState会保存瀑布流布局的参数。那么我们可以在onDetachedFromWindow被调用之前调用onSaveInstanceState方法,在onAttachedToWindow中调用

640.png

解决方案二如下

640.png


最后效果如下


image.png

相关文章
|
8月前
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
|
8月前
|
算法
排序置顶、非置顶算法,实现置顶后的结果和非置顶的内容排序保持原始序列
排序置顶、非置顶算法,实现置顶后的结果和非置顶的内容排序保持原始序列
|
4月前
|
前端开发 容器
前端基础(十五)_多栏布局(两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局)
本文介绍了前端开发中的多种自适应布局技术,包括两列自适应布局、圣杯布局(三列布局)、双飞翼布局(三列布局)和等高布局。文章通过代码示例展示了如何使用HTML和CSS实现这些布局,以及如何通过flex布局简化实现过程。
164 2
|
7月前
|
Go vr&ar 容器
技术心得记录:漂亮的触发行变色代码
技术心得记录:漂亮的触发行变色代码
|
7月前
|
前端开发 JavaScript
如何实现瀑布流排列方式
如何实现瀑布流排列方式
45 0
|
8月前
|
JavaScript
【sgExcelGrid】自定义组件:简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作
【sgExcelGrid】自定义组件:简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作
【sgExcelGrid】自定义组件:简单模拟Excel表格拖拽、选中单元格、横行、纵列、拖拽圈选等操作
|
Web App开发 前端开发 JavaScript
css黏性定位-实现商城的分类滚动的标题吸附
css黏性定位-实现商城的分类滚动的标题吸附
130 0
|
JavaScript 前端开发 索引
原生js实现Tab切换(排他)功能
原生js实现Tab切换(排他)功能 在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图: 在这里插入图片描述 HTML代码: <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <ul> <li></li> <
|
前端开发 Android开发
仿微信通讯录滑动定位ListView功能(一)
仿微信通讯录滑动定位ListView功能(一)
149 0
仿微信通讯录滑动定位ListView功能(一)
|
安全 Android开发
仿微信通讯录滑动定位ListView功能(二)
仿微信通讯录滑动定位ListView功能(二)
139 0
仿微信通讯录滑动定位ListView功能(二)