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

最新推荐文章于 2023-05-27 07:04:51 发布
最新推荐文章于 2023-05-27 07:04:51 发布
阅读量456 收藏 1
点赞数
文章标签： js html ios javascript 安卓
原文链接：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzIxNzU1Nzk3OQ==\x26amp;action=getalbum\x26amp;album_id=1336958854403538949\x26amp;scene=173\x26amp;from
版权

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

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

问题分析如下：

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

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

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

StaggeredGridLayoutManager#fill方法中

StaggeredGridLayoutManager#getMaxEnd方法中

StaggeredGridLayoutManager#Span#getEndLine方法中

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

StaggeredGridLayoutManager#Span#invalidateCache方法中

找寻invalidateCache方法被谁调用了

StaggeredGridLayoutManager#Span#clear方法中

找寻clear方法被谁调用了

StaggeredGridLayoutManager#onDetachedFromWindow方法如下

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

那么解决方案来了。

解决方案一:

重写StaggeredGridLayoutManager的onDetached。nothing to do

解决方案二:

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

解决方案二如下

最后效果如下

使用RecyclerView实现双向的瀑布流

Android瀑布流优化，解决Recyclerview展示大批量图片时Item自动切换、闪烁、空白等问题


如果你有写博客的好习惯
欢迎投稿
weixin_38754349
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
chatgpt赋能python：Python小数点进位教程：学会进阶计算
atest166的博客
06-08 452
本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。
【设计模式】之【模板方法】详解
echo.T的博客
09-08 207
【设计模式】之【模板方法】详解
Python小数处理
weixin_41597669的博客
03-18 2081
python 版本 3.7.1 python对于数字操作有不一样的解释 python 取整数 使用 // 如 3//2 == 1 或者使用强制转换int(3/2) == 1 python 取余数 使用 % 很多语言都适用 如C，java等 如 5%2 == 1 python小数进位 大于等于5 则进1 使用内置函数 round 如 round(15/10) ==...
hashcode的作用_equals()、hashCode()和==
weixin_39768762的博客
11-24 108
==【进行等值比较】 java中的数据类型分为： 1. 基本数据类型（原始数据类型） （byte,short,char,int,long,float,double,boolean) 这些数据的值直接存储在Java栈中，他们之间的比较应使用双等号（==）。 2. 引用类型(类、接口、数组) 使用（==）对此类数据进行比较时比较的是实际的数据在内存中的存放地址。因此，只有当两个变量引用的是...
将python中的小数直接进位的函数_舍入-在Python中舍入到小数点后第二位
weixin_39974932的博客
12-19 997
舍入-在Python中舍入到小数点后第二位如何在python中将数字四舍五入到小数点后第二位？ 例如：0.022499999999999999应该四舍五入到0.120.1111111111111000Should round up to 0.12如果在小数点后第三位有任何值，我希望它总是四舍五入，使我在小数点后留下2个值。user1202589 asked 2020-07-20T00:23:15Z...
微信小程序源码 瀑布流布局(学习版)
06-18
微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...
vue实现简单瀑布流布局
11-21
在这个场景中，我们将探讨如何使用 Vue 构建一个简单的瀑布流布局，并结合 `vue-lazyload` 实现图片的懒加载。 首先，瀑布流布局的核心是通过计算每个元素的高度，使其在容器内整齐排列。这里的关键点包括： 1. **...
瀑布流布局代码一例
09-04
首先，HTML结构包括一个`.wrapper`类作为主要容器，确保内容居中显示，并包含一个`id="con1_1"`的容器，用于放置瀑布流中的各个图片元素。每个图片元素被包裹在`.product_list`类的`<div>`中，包含一个`<a>`链接和一...
三种方式实现瀑布流布局
10-20
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
Java源码解析：hashCode与相同对象的关系
Java仗剑走天涯
07-23 3687
1.普通类对象1. hashCode相同，不一定是同一个对象 2. 同一个对象的，hashCode值一定相同
将python中的小数直接进位的函数_python3中的函数怎么实现小数向上取整？
weixin_34316162的博客
02-05 1905
编程很大一定程度上就是像个计算机上的数学语言，在基础学习编程的时候，我们需要从数学逻辑上进行操作，之前给大家讲解的都是基础内容，还有很多稍微进阶一点的，不知道大家有没有遇到过，不管有没有遇到过，小编都要给大家讲解下面这个经常能碰到的问题，一起来学习下吧~在需要进行数字整数、小数部分分离的时候我使用的是math模块提供的floor方法来间接完成的，具体实现如下：defnumSplit2(num):...
python保留n位小数，逢尾进一
weixin_42916710的博客
05-09 3313
#保留n位小数且逢尾进一 def transform_data(data,n): data_str = str(data).split('.') if data_str: if data_str[1] == "0"*n: final_data = int(data) elif len(data_str[1]) >= n...
python中小数点后取2位（四舍五入）以及取2位（四舍五不入）的方法总结
secular_的博客
10-12 6000
在很多场景的计算中，最终得到的数值例如123.45678，要截取2位小数得到123.45，而不是默认的四舍五入方法得到123.46，如何实现呢？ 文章目录 一.小数点后取2位（四舍五入）的方法 方法一：round（）函数 方法二：'%.2f' %f 方法 方法三：Decimal（）函数 二.小数点后取2位（四舍五不入）的方法 方法一： 一.小数点后取2位（四舍五入）的方法 方法一：roun...
python对小数的特殊处理(个人需求-小数点后有一位保留，否则十分位进1)&0.5进位
weixin_42636075的博客
02-10 707
python对小数的特殊处理(个人需求-小数点后有一位保留，否则十分位进1)
python小数点进位_python 四舍五入进位不准
weixin_39932300的博客
12-19 157
def getDecimal(data_value, demical_num=2, divided_num=100000000, isdivided=True, none_zero='0.00'):'''除以10000000，并处理小数点data_value:需要进行判断是否是-0.00的数据:param data_value: 需要处理的小数:param demical_num: 保留的小数位:...
chatgpt赋能python：Python小数进位：从保留小数点后几位到基数进位
最新发布
虚幻私塾
05-27 498
在数学和计算机科学中，进位是指在定量系统中将一部分数字转换为最接近的整数的过程。在实际的计算过程中，小数进位常用于舍入、四舍五入和向上舍入等操作，以便获得更精确和更准确的计算结果。本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。
python小数点进位_如何用Python舍入到2位小数？
weixin_39586395的博客
12-19 119
我在这段代码的输出中得到了很多小数(华氏到摄氏转换器)。我的代码当前如下所示：def main():printC(formeln(typeHere()))def typeHere():global Fahrenheittry:Fahrenheit = int(raw_input("Hi! Enter Fahrenheit value, and get it in Celsius!\n"))exce...
小数进制转化 @ Python
烽火戏猪猴
09-06 1085
# -*- coding: utf8 -*- import ctypes def h2f(s): cp = ctypes.pointer(ctypes.c_longlong(s)) fp = ctypes.cast(cp, ctypes.POINTER(ctypes.c_double)) return fp.contents.value def f2h(s): fp
android 仿商城瀑布流,RecyclerView实现瀑布流的各种坑
weixin_33074843的博客
06-03 753
RecyclerView 实现瀑布流，关键是用StaggeredGridLayoutManager这个类。原以为很简单，用了之后才发现有很多的问题。item乱跳滑动时有空白出现如果item高度不固定得时候，item内容不变的时候，可能出现同一个item高度可能会出现不同的值1. item乱跳问题StaggeredGridLayoutManager设置空隙处理方式为 不处理。setGapStrate...
举一个瀑布流布局的例子
05-26
瀑布流布局常用于展示图片、商品等的网页设计中，以下是一个简单的瀑布流布局的例子： HTML代码： ``` <div class="wrapper"> <div class="item"> <img src="image1.jpg" alt="Image 1"> </div> <div class="item"> <img src="image2.jpg" alt="Image 2"> </div> <div class="item"> <img src="image3.jpg" alt="Image 3"> </div> <div class="item"> <img src="image4.jpg" alt="Image 4"> </div> <div class="item"> <img src="image5.jpg" alt="Image 5"> </div> <div class="item"> <img src="image6.jpg" alt="Image 6"> </div> </div> ``` CSS代码： ``` .wrapper { column-count: 3; column-gap: 20px; } .item { display: inline-block; margin-bottom: 20px; width: 100%; } .item img { width: 100%; } ``` 在上面的代码中，首先定义了一个包含多个 `item` 的容器 `wrapper`，然后使用 `column-count` 属性将容器分成三列，并使用 `column-gap` 属性设置列与列之间的间距。每个 `item` 元素使用 `display: inline-block` 实现水平排列，并设置 `margin-bottom` 属性为 20px，使得每个元素下方有一定的间距。最后，每个 `item` 元素中包含一张图片，使用 `width: 100%` 让图片宽度铺满整个元素。这样，就能够实现一个简单的瀑布流布局。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值