Swift4中如何将JSON解析的图片URL数组传入CollectionView自定义Cell

嘿，我来帮你搞定这个问题！既然你已经成功解析JSON拿到了图片URL数组，接下来只需要在CollectionView的数据源方法里把对应位置的URL传递给单元格的ImageView，再处理图片加载就可以了。下面是具体的实现步骤和优化方案：

1. 先搞定CollectionView的基础数据源配置 #

首先假设你已经有了存储URL的数组，比如叫 imageURLs: [String]（如果能提前转成[URL]类型会更省心）。然后在你的ViewController里实现CollectionView的两个核心数据源方法：

// 返回单元格总数，直接用URL数组的长度就行
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return imageURLs.count
}

// 配置每个单元格的内容
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // 先获取自定义单元格（这里假设你的单元格类是CustomCollectionViewCell，里面有个叫imageView的UIImageView）
    // 注意替换成你自己的重用标识符和单元格类名
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCellIdentifier", for: indexPath) as! CustomCollectionViewCell
    
    // 拿到当前位置的图片URL
    let urlString = imageURLs[indexPath.item]
    guard let imageURL = URL(string: urlString) else {
        // 如果URL格式不对，给个占位图兜底
        cell.imageView.image = UIImage(named: "placeholder_image")
        return cell
    }
    
    // --- 原生图片加载方式（不推荐用于生产环境，仅作演示）---
    DispatchQueue.global(qos: .background).async {
        // 后台线程加载图片数据
        if let imageData = try? Data(contentsOf: imageURL), let loadedImage = UIImage(data: imageData) {
            // 必须回到主线程更新UI！
            DispatchQueue.main.async {
                cell.imageView.image = loadedImage
            }
        } else {
            // 加载失败也回到主线程设置占位图
            DispatchQueue.main.async {
                cell.imageView.image = UIImage(named: "placeholder_image")
            }
        }
    }
    
    return cell
}

2. 用第三方库优化图片加载（强烈推荐） #

上面的原生写法有很多坑：比如没有缓存、滑动时会重复发起请求、加载慢的时候会卡顿。实际开发中大家都会用成熟的图片加载库，比如Kingfisher，用法超简单：

先通过Swift Package Manager或者CocoaPods引入Kingfisher，然后修改cellForItemAt里的代码：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCellIdentifier", for: indexPath) as! CustomCollectionViewCell
    
    let urlString = imageURLs[indexPath.item]
    guard let imageURL = URL(string: urlString) else {
        cell.imageView.image = UIImage(named: "placeholder_image")
        return cell
    }
    
    // Kingfisher会自动处理缓存、异步加载、占位图、失败重试，还能在滑动时取消无效请求
    cell.imageView.kf.setImage(with: imageURL, placeholder: UIImage(named: "placeholder_image"))
    
    return cell
}

几个关键注意点 #

• 确保你的自定义单元格已经正确设置了imageView的约束，并且在Storyboard/XIB里给单元格设置了和代码里一致的重用标识符。
• 如果你的URL数组是[URL]类型，就不用再转成URL了，直接用imageURLs[indexPath.item]即可。
• 原生的Data(contentsOf:)会阻塞线程，所以一定要放在后台队列执行，绝对不能在主线程调用，否则CollectionView滑动会巨卡。
• 第三方库不仅能省掉很多重复代码，还能解决很多性能问题，比如图片缓存、请求优先级、内存管理等，强烈建议在实际项目中使用。

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