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

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

开门见山,最近在做一个购物车+推荐商品功能。结合 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

相关文章
|
5月前
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
|
前端开发 JavaScript 容器
使用CSS 怎么改网格布局上下行的顺序
Flex 布局是一种简单而灵活的布局方式,通过设置父容器的 display: flex 属性,可以方便地控制子元素的排列方式、对齐和间距等。它适用于一维排列的情况,比如横向或纵向的列表、导航栏等。 Grid 布局则是一种更为复杂的布局方式,可以将网页划分为等大小的网格,并通过设置网格的属性来定义子元素的位置。它适用于二维排列的情况,比如网格状的图像展示、多列的表格等。
|
9天前
|
前端开发 容器
前端基础(十五)_多栏布局(两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局)
本文介绍了前端开发中的多种自适应布局技术,包括两列自适应布局、圣杯布局(三列布局)、双飞翼布局(三列布局)和等高布局。文章通过代码示例展示了如何使用HTML和CSS实现这些布局,以及如何通过flex布局简化实现过程。
33 2
|
3月前
|
前端开发 容器
css 【详解】—— 图片底部留有间隙(含解决方案)
css 【详解】—— 图片底部留有间隙(含解决方案)
97 0
|
5月前
表格高度根据内容自适应的瀑布流
表格高度根据内容自适应的瀑布流
43 1
|
4月前
|
前端开发 JavaScript
如何实现瀑布流排列方式
如何实现瀑布流排列方式
24 0
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
224 2
|
Web App开发 前端开发 JavaScript
css黏性定位-实现商城的分类滚动的标题吸附
css黏性定位-实现商城的分类滚动的标题吸附
109 0
|
前端开发
css实现两列布局区块独立,独立滚屏
css实现两列布局区块独立,独立滚屏
103 0
|
前端开发 JavaScript
div在网页四周留个等宽“包边”的办法
div在网页四周留个等宽“包边”的办法
89 0
div在网页四周留个等宽“包边”的办法