iOS 上的 Pinterest Gridview 实现

Posted 2023-02-27

【中文标题】iOS 上的 Pinterest Gridview 实现

【英文标题】：Pinterest Gridview implementation on iOS

【发布时间】：2012-02-13 11:57:35

【问题描述】：

我想实现一个像 Pinterest 中的网格视图

我考虑过实现为 3 个表视图。但我无法很好地将它们滚动在一起。当我实现 scrollViewDidScroll 并为 scrollView 以外的表格视图设置 contentOffset 时，滚动变得缓慢且无法使用。

我做的另一个实现是加载一组图像并调用scrollViewDidScroll 中的viewDraw 函数。 ViewDraw 函数只绘制必要的图像，并从内存中删除已绘制但不可见的其余图像。 这也使 ScrollView 滚动缓慢。另一个问题是在绘制图像之前有白色（背景色）补丁。

实现此网格视图的最佳方式应该是什么？

【问题讨论】：

只使用一个表格视图，并在表格视图中制作多个列。根据需要将图像添加到每一列。使用这些教程***.com/questions/2855857/…，***.com/questions/3252682/…

但这行不通吗？由于图像没有像往常一样对齐。有些图片比其他图片长。

只需使用 UIView 的 scaleToFit 属性（在您的情况下为 UIImageView）

【参考方案1】：

解决方案 1（我不知道这是否有效，我不太喜欢它）

如何并排放置 3 个垂直表格视图，但将任何触摸事件从任何表格视图转发到其他表格视图。我了解您在尝试同步表格视图时遇到了性能问题，但也许在事件级别上工作会更好。也许吧。

解决方案 2

使用 UIScrollView（当然是为了滚动）。出于性能和内存原因，您还需要实现按需加载机制，这样您就不会一次加载所有图像。

为此，我将创建一个类 CustomImageStrip 来处理垂直图像列表。该类与滚动视图一起使用，并使用contentOffset 来决定何时从条带加载/卸载图像。

通过拥有 3 个独立的图像条类，图像可以是任意大小且无需对齐。但是，由于它们都属于同一个 UIScrollView，因此滚动将同时进行。

【讨论】：

第二种解决方案似乎更像是 pinterest，因为他们按高度排列图像（“nextToShow”图像进入在放置时高度较小的列）。但它需要更多地关注细节，并且需要为这些自定义视图创建出队机制（出于内存消耗目的）。

确实，你需要实现出队机制，但它并不像听起来那么复杂。与解决方案 1 相比，我认为它更简单:)

我曾经使用两个表格（一个主要的，用于整个屏幕，第二个，索引样式，但带有图像）做过类似于第一个解决方案的事情。我遇到的性能问题是因为主表（单元格高度大于屏幕。我最终通过拆分单元格），而不是因为两个表并同步它们......顺便说一句，你能给出队机制的一些例子？