UICollectionView图片跳转详情页滑动及Outlet配置错误问题

你遇到的这个「Illegal Configuration」错误，核心原因很明确：你把CollectionView Cell里的UIImageView直接拖线连接到了DetailViewController上，但Cell是可复用的重复内容，IBOutlet不能直接绑定到控制器，必须绑定到Cell对应的自定义类中。下面一步步帮你解决问题并实现左右滑动查看功能：

1. 先修复IBOutlet连接错误 #

• 新建一个自定义CollectionViewCell类，比如命名为DetailImageCell：

  import UIKit
  
  class DetailImageCell: UICollectionViewCell {
      // 把Cell里的UIImageView拖线到这里，而不是DetailViewController
      @IBOutlet weak var img: UIImageView!
  }
  

• 回到Storyboard，选中DetailViewController里的CollectionViewCell，在「Identity Inspector」里把Class设置为DetailImageCell，然后重新把Cell内的UIImageView拖线到这个类的img属性上。
• 删掉DetailViewController里之前错误连接的@IBOutlet weak var img: UIImageView!代码。

2. 调整主ViewController的传参逻辑 #

因为要实现左右滑动，不能只传单个图片名，需要把整个图片数组和当前选中的索引传给详情页：

// 主ViewController的didSelectItemAt方法修改如下
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    guard let vc = storyboard?.instantiateViewController(withIdentifier: "DetailViewController") as? DetailViewController else { return }
    // 传递整个图片数组和当前选中的索引
    vc.imageArray = imgArr
    vc.currentSelectedIndex = indexPath.row
    navigationController?.pushViewController(vc, animated: true)
}

3. 配置DetailViewController实现滑动功能 #

首先在DetailViewController里定义接收数据的属性，然后实现CollectionView的数据源和代理：

import UIKit

class DetailViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    // 接收主VC传递的图片数组和当前索引
    var imageArray: [String] = []
    var currentSelectedIndex: Int = 0
    
    @IBOutlet weak var detailCollectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 设置CollectionView的数据源和代理
        detailCollectionView.dataSource = self
        detailCollectionView.delegate = self
        
        // 页面加载时自动滚动到选中的图片位置
        let targetIndexPath = IndexPath(row: currentSelectedIndex, section: 0)
        detailCollectionView.scrollToItem(at: targetIndexPath, at: .centeredHorizontally, animated: false)
    }
    
    // MARK: - CollectionView数据源方法
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageArray.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DetailImageCell", for: indexPath) as? DetailImageCell else {
            return UICollectionViewCell()
        }
        // 根据数组加载图片（这里假设imgArr里是本地图片名，网络图片请替换为对应的加载逻辑）
        cell.img.image = UIImage(named: imageArray[indexPath.row])
        return cell
    }
}

• 别忘了在Storyboard里给DetailViewController的CollectionViewCell设置正确的Reuse Identifier（比如和代码里的DetailImageCell对应）。
• 如果需要让CollectionView横向滑动，可以在Storyboard里选中CollectionView，在「Attributes Inspector」里把Scroll Direction设置为Horizontal。

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