UICollectionView方形Cell适配矩形图片问题求助（支持OC/Swift方案）

我明白你遇到的问题了——当把矩形图片设为模板模式后，配合Aspect Fill的contentMode，图片会被裁切，这确实挺头疼的。下面我给你分析原因，再提供几种可行的解决方案，包含Objective-C和Swift两种实现方式。

问题根源 #

Aspect Fill的作用是保持图片比例并填满整个imageView，超出部分自然会被裁切，这是它的默认行为。而UIImageRenderingModeAlwaysTemplate只是将图片转为模板模式（基于Alpha通道着色），并不会改变图片的原始尺寸比例，所以方形cell里放矩形模板图，裁切是必然的。我们需要从调整显示逻辑或者预处理图片两个方向入手解决。

方案一：调整Content Mode并补全背景（简单快速） #

如果可以接受图片完整显示（不裁切），同时让imageView的空白区域用背景填充来适配方形cell，可以把contentMode改成UIViewContentModeAspectFit，再给imageView设置背景色，或者给cell加背景。

Objective-C 代码：

// 在cell配置方法中
cell.productImage.contentMode = UIViewContentModeAspectFit;
// 设置模板模式
cell.productImage.image = [cell.productImage.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
// 给imageView设置背景色（和模板色一致或者你需要的颜色）
cell.productImage.backgroundColor = [UIColor grayColor];
// 确保imageView的约束是铺满cell的

Swift 代码：

// 在cell配置方法中
cell.productImage.contentMode = .aspectFit
// 设置模板模式
cell.productImage.image = cell.productImage.image?.withRenderingMode(.alwaysTemplate)
// 设置背景色
cell.productImage.backgroundColor = .gray

方案二：预处理图片为方形后再转模板模式 #

如果必须让图片填满方形cell且不裁切，我们可以先把矩形图片转换成带背景填充的方形图片，再设置模板模式。这样处理后的图片本身是方形的，用Aspect Fill也不会裁切。

Objective-C 代码：

// 封装一个处理图片的方法
- (UIImage *)squareTemplateImageFromImage:(UIImage *)originalImage {
    // 计算方形的边长，取原图宽高中的较大值
    CGFloat sideLength = MAX(originalImage.size.width, originalImage.size.height);
    // 创建方形画布
    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:CGSizeMake(sideLength, sideLength)];
    
    UIImage *squareImage = [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull context) {
        // 绘制背景（模板模式下会保留背景的Alpha通道，这里用白色适配大多数场景）
        [[UIColor whiteColor] setFill];
        UIRectFill(CGRectMake(0, 0, sideLength, sideLength));
        // 居中绘制原图
        CGFloat x = (sideLength - originalImage.size.width) / 2;
        CGFloat y = (sideLength - originalImage.size.height) / 2;
        [originalImage drawInRect:CGRectMake(x, y, originalImage.size.width, originalImage.size.height)];
    }];
    
    // 转成模板模式
    return [squareImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
}

// 在cell配置时使用
cell.productImage.contentMode = UIViewContentModeAspectFill;
cell.productImage.image = [self squareTemplateImageFromImage:yourOriginalImage];
// 可选：添加圆角效果
// cell.productImage.clipsToBounds = YES;
// cell.productImage.layer.cornerRadius = 8;

Swift 代码：

// 封装处理图片的方法
func squareTemplateImage(from originalImage: UIImage) -> UIImage {
    let sideLength = max(originalImage.size.width, originalImage.size.height)
    let renderer = UIGraphicsImageRenderer(size: CGSize(width: sideLength, height: sideLength))
    
    let squareImage = renderer.image { context in
        // 绘制背景
        UIColor.white.setFill()
        context.fill(CGRect(x: 0, y: 0, width: sideLength, height: sideLength))
        // 居中绘制原图
        let x = (sideLength - originalImage.size.width) / 2
        let y = (sideLength - originalImage.size.height) / 2
        originalImage.draw(in: CGRect(x: x, y: y, width: originalImage.size.width, height: originalImage.size.height))
    }
    
    // 转模板模式
    return squareImage.withRenderingMode(.alwaysTemplate)
}

// 在cell配置时使用
cell.productImage.contentMode = .aspectFill
cell.productImage.image = squareTemplateImage(from: yourOriginalImage)
// 可选：添加圆角效果
// cell.productImage.clipsToBounds = true
// cell.productImage.layer.cornerRadius = 8

总结一下，如果你只是想快速避免裁切，方案一最省心；如果需要图片填满cell且完整显示，方案二更适配你的需求。

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