Pinterest风格UICollectionViewLayout：URL图片适配代理方法返回问题

嘿，这个问题我之前帮不少开发者理顺过思路，核心就是把异步加载网络图片和Pinterest布局依赖的图片尺寸预计算结合起来，下面给你拆解两种可行方案，按需选择：

Pinterest布局的核心是每个cell高度由图片宽高比决定，所以最好先拿到图片真实尺寸再渲染布局，避免加载后突然调整高度导致的界面跳动。

• 步骤1：封装工具方法获取图片尺寸
  不用下载整张图，通过解析图片元数据就能拿到宽高，用ImageIO框架效率很高：

func fetchImageSize(from url: URL, completion: @escaping (CGSize?) -> Void) {
    URLSession.shared.dataTask(with: url) { data, _, error in
        guard let data = data, error == nil else {
            completion(nil)
            return
        }
        guard let imageSource = CGImageSourceCreateWithData(data as CFData, nil),
              let properties = CGImageSourceCopyPropertiesAtIndex(imageSource, 0, nil) as? [CFString: Any],
              let width = properties[kCGImagePropertyPixelWidth] as? CGFloat,
              let height = properties[kCGImagePropertyPixelHeight] as? CGFloat else {
            completion(nil)
            return
        }
        DispatchQueue.main.async {
            completion(CGSize(width: width, height: height))
        }
    }.resume()
}

• 步骤2：给你的数据源模型添加上尺寸字段
  把尺寸和URL绑定在一起，方便后续调用：

struct NetworkImage {
    let url: URL
    var size: CGSize? // 存储预获取到的图片尺寸
}

• 步骤3：批量预加载尺寸，完成后刷新列表
  用DispatchGroup管理所有异步请求，等所有尺寸都拿到后再初始化布局：

let imageItems: [NetworkImage] = // 你的URL数据源
let group = DispatchGroup()

for index in imageItems.indices {
    group.enter()
    fetchImageSize(from: imageItems[index].url) { size in
        imageItems[index].size = size ?? CGSize(width: 300, height: 300) // 兜底默认尺寸
        group.leave()
    }
}

group.notify(queue: .main) {
    self.collectionView.reloadData()
}

• 步骤4：在布局代理方法中计算cell高度
  比如你的Pinterest布局代理方法里，直接用预存的尺寸计算高度：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, heightForItemAt indexPath: IndexPath) -> CGFloat {
    let item = imageItems[indexPath.item]
    let cellWidth = collectionView.bounds.width - 20 // 假设左右各留10pt间距
    let scale = cellWidth / item.size.width
    return item.size.height * scale
}

如果不想做预加载，可以先给cell一个默认高度，等图片加载完成后再刷新对应位置的布局：

• 步骤1：代理方法先返回默认高度

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, heightForItemAt indexPath: IndexPath) -> CGFloat {
    return 200 // 临时默认高度
}

• 步骤2：在cell中加载图片并通知刷新
  借助SDWebImage/Kingfisher这类成熟图片库，加载完成后拿到真实尺寸，通知控制器刷新布局：

class PinterestCell: UICollectionViewCell {
    let imageView = UIImageView()
    var indexPath: IndexPath?
    var onImageLoaded: ((IndexPath) -> Void)?

    func setup(with url: URL) {
        imageView.kf.setImage(with: url) { [weak self] result in
            guard let self = self, let indexPath = self.indexPath else { return }
            if case .success(let value) = result {
                self.onImageLoaded?(indexPath)
            }
        }
    }
}

• 步骤3：控制器接收通知并刷新布局

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PinterestCell", for: indexPath) as! PinterestCell
    cell.indexPath = indexPath
    cell.onImageLoaded = { [weak self] path in
        self?.collectionView.performBatchUpdates({
            self?.collectionView.collectionViewLayout.invalidateLayout()
        }, completion: nil)
    }
    cell.setup(with: imageItems[indexPath.item].url)
    return cell
}

• 优先用成熟的图片加载库（SDWebImage/Kingfisher），它们自带尺寸缓存，不用自己重复处理异步逻辑；
• 一定要处理尺寸获取失败的情况，给兜底高度，避免布局崩溃；
• 大量图片预加载时，要控制并发请求数，避免触发服务器限流或APP性能问题。

内容的提问来源于stack exchange，提问作者ggtechllc