自定义CollectionViewLayout中图片拉伸问题求助

嘿，我来帮你搞定这个头疼的图片拉伸问题！你遇到的情况大概率是单元格内图片的约束/ContentMode设置不对，或者自定义布局的item尺寸计算和图片比例不匹配导致的，咱们一步步来排查解决：

第一步：修正单元格内UIImageView的设置 #

这是最常见的问题根源，很多人会漏掉clipsToBounds的设置，或者约束没铺满单元格，导致aspectFill/aspectFit没起作用：

// 假设你的自定义单元格是这样的
class PhotoCollectionViewCell: UICollectionViewCell {
    private let imageView = UIImageView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        configureImageView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        configureImageView()
    }
    
    private func configureImageView() {
        // 关闭自动约束转换，用AutoLayout
        imageView.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(imageView)
        
        // 让imageView完全铺满单元格的contentView（一定要用contentView，不是cell本身！）
        NSLayoutConstraint.activate([
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
        
        // 设置正确的内容模式和裁剪
        imageView.contentMode = .aspectFill // 按比例填充单元格，超出部分会被裁剪
        imageView.clipsToBounds = true // 必须开启！否则超出的图片部分会显示在单元格外面，看起来像变形
        // 如果想要图片完整显示（留空白），就用.aspectFit，但同样要保证约束铺满单元格
    }
    
    func setImage(_ image: UIImage?) {
        imageView.image = image
    }
}

第二步：检查自定义布局的Item尺寸计算 #

如果你的自定义布局是按屏幕比例缩放单元格，一定要保证item的宽高比和你期望的图片显示比例一致，比如如果是正方形网格，itemHeight应该等于itemWidth；如果是16:9的图片，itemHeight = itemWidth * 9/16。

举个例子，假设你做的是2列网格布局，自定义布局里的itemSize计算应该是这样的：

class CustomFlowLayout: UICollectionViewFlowLayout {
    override func prepare() {
        super.prepare()
        guard let collectionView = collectionView else { return }
        
        let totalSpacing = sectionInset.left + sectionInset.right + minimumInteritemSpacing * 1 // 2列的话，中间1个间距
        let itemWidth = (collectionView.bounds.width - totalSpacing) / 2
        // 这里设置宽高比为1:1，你可以根据图片比例调整
        itemSize = CGSize(width: itemWidth, height: itemWidth)
    }
    
    // 如果支持屏幕旋转，还要重写这个方法刷新布局
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

第三步：优化Photos框架的图片请求 #

你用了Photos框架获取图片，直接请求原图会导致图片在单元格内被强制缩放，最好请求和单元格尺寸匹配的缩略图，既节省内存又避免拉伸：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCollectionViewCell
    let asset = imageArray[indexPath.item] // 假设你的imageArray是PHAsset数组
    
    // 获取当前单元格的尺寸
    let targetSize = collectionView.layoutAttributesForItem(at: indexPath)?.size ?? CGSize(width: 200, height: 200)
    // 请求和单元格尺寸匹配的图片，contentMode设为.aspectFill
    PHImageManager.default().requestImage(for: asset, 
                                          targetSize: targetSize, 
                                          contentMode: .aspectFill, 
                                          options: nil) { [weak cell] image, _ in
        cell?.setImage(image)
    }
    
    return cell
}

最后排查点 #

• 如果你同时实现了UICollectionViewDelegateFlowLayout的sizeForItemAt方法，要确保它返回的尺寸和自定义布局的itemSize一致，避免冲突；
• 检查collectionView的contentInset是否设置合理，不要让额外的内边距导致单元格尺寸计算错误。

按照这几步调整，应该就能解决图片拉伸变形的问题啦！

内容的提问来源于stack exchange，提问作者TheRedCamaro3.0 3.0