如何创建不同宽度和高度的平铺照片库？

Posted 2023-03-12

【中文标题】如何创建不同宽度和高度的平铺照片库？

【英文标题】：How could I create a tiled photo gallery of different widths and heights?

【发布时间】：2012-04-05 07:32:57

【问题描述】：

我一直在为 iPad 应用程序创建一个照片库，其中的图像具有不同的宽度和高度。我不想裁剪它们以适应网格视图，而是创建一个“马赛克”效果，如 Pinterest 和 Jetsetter 应用程序中所见（参见参考图片链接）

知道我可以从哪里开始创建这样的效果吗？

【问题讨论】：

我还没有这样做，但我的第一印象是 pinterest 更容易，因为图像是按列排列的，并且在每一列中，图像都安装在前一个图像的下方。但是，如果这一切都是根据图像大小动态完成的，那么对于 Jetsetter 来说就很棘手了。

谈到 Pinterest 案例，您是否设想它执行诸如循环图像、放置图像、重新计算左到右空间、查找具有该宽度或更小的宽度的下一个图像......等等?

是的......有点。基本上，我认为可以通过将图像调整为固定宽度（每列的宽度）来绘制循环的图像。所以你不需要计算左边/右边的空间，只需要顶部和底部。 JetSetter 不能这样！

Pinterest Gridview implementation on ios 的可能副本

【参考方案1】：

对于像 Pinterest 这样的可变高度，最简单的方法是为每一列使用 UITableView，因为它已经提供了使用 UITableViewRowAnimations 插入/删除图像的机制。如果知道图像的高度会更容易，因为UITableView 在加载单元格之前会要求它。但如果不是，您可以将每个单元按顺序（头部或尾部）插入到 shortest UITableView。加载图像，必要时调整大小。磁盘缓存高度，因此您不必为每个单元格加载图像。我已经成功实现了这种方式。

附录：使用 3 个（或更多）UITableViews 的部分技巧是手动同步滚动。否则它们会自行滚动：

#pragma mark - UIScrollView stuff
- (void)scrollViewDidScroll:(UIScrollView *)inScrollView 
    // Sync the scrolling of all table views
    CGPoint offset = inScrollView.contentOffset;

    for (NSInteger i = 0; i < self.tableViews.count; i++) 
        PLAlbumTableView *tableView = [self.tableViews objectAtIndex:i];
        if (tableView != inScrollView)
            tableView.contentOffset = offset;

    


- (void)scrollViewWillBeginDecelerating:(UIScrollView *)inScrollView 
    // Sync the scrolling of all table views
    for (NSInteger i = 0; i < self.tableViews.count; i++) 
        PLAlbumTableView *tableView = [self.tableViews objectAtIndex:i];
        if (tableView != inScrollView)
            [tableView setContentOffset:tableView.contentOffset animated:NO];