TableView Cell中Alamofire Image缩放图片模糊的解决方法

我来帮你搞定这个图片模糊的问题！你当前遇到的情况，主要是踩了两个常见的坑：一是在Auto Layout环境下，直接用imageView.frame.size可能拿到的不是最终的实际显示尺寸；二是没有考虑Retina屏幕的缩放因子，导致图片被拉伸后分辨率不足。

下面是具体的解决方案，按优先级排序：

1. 使用像素级目标尺寸（结合屏幕缩放因子） #

Retina屏幕的每个点对应多个物理像素，直接用imageView.bounds.size（比frame更可靠，因为bounds是视图自身的坐标尺寸）乘以屏幕缩放因子，得到的才是图片需要渲染的真实像素尺寸，这样图片就不会因为拉伸而模糊。

修改后的代码：

// 先获取屏幕缩放因子
let scale = UIScreen.main.scale
// 计算像素级的目标尺寸
let targetPixelSize = CGSize(
    width: messageImage.bounds.width * scale,
    height: messageImage.bounds.height * scale
)
// 使用像素尺寸创建滤镜
let filter = AspectScaledToFillSizeFilter(size: targetPixelSize)
// 可选绑定避免强制解包URL
if let imageUrl = messageImageDownloadUrl {
    messageImage.af_setImage(
        withURL: imageUrl,
        filter: filter,
        imageTransition: .crossDissolve(0.2)
    )
}

2. 确保在cell布局完成后加载图片 #

如果在cellForRowAt方法里直接加载图片，此时cell的Auto Layout布局可能还没计算完成，bounds的尺寸也不是最终的显示尺寸。这种情况下，我们可以把图片加载逻辑放到cell的布局完成回调里：

如果是自定义UITableViewCell，重写didLayoutSubviews方法：

class CustomMessageCell: UITableViewCell {
    @IBOutlet weak var messageImage: UIImageView!
    var messageImageDownloadUrl: URL?
    
    override func didLayoutSubviews() {
        super.didLayoutSubviews()
        // 避免重复加载图片
        guard messageImage.image == nil, let url = messageImageDownloadUrl else { return }
        
        let scale = UIScreen.main.scale
        let targetPixelSize = CGSize(
            width: messageImage.bounds.width * scale,
            height: messageImage.bounds.height * scale
        )
        let filter = AspectScaledToFillSizeFilter(size: targetPixelSize)
        
        messageImage.af_setImage(
            withURL: url,
            filter: filter,
            imageTransition: .crossDissolve(0.2)
        )
    }
}

这样就能保证我们使用的是cell布局完成后的真实尺寸来缩放图片。

3. 备选：使用带scale参数的滤镜初始化方法（如果AlamofireImage版本支持） #

较新版本的AlamofireImage提供了直接指定scale的滤镜初始化方法，不用手动计算像素尺寸，更简洁：

if let imageUrl = messageImageDownloadUrl {
    let filter = AspectScaledToFillSizeFilter(
        size: messageImage.bounds.size,
        scale: UIScreen.main.scale
    )
    messageImage.af_setImage(
        withURL: imageUrl,
        filter: filter,
        imageTransition: .crossDissolve(0.2)
    )
}

额外提醒 #

尽量避免用!强制解包messageImageDownloadUrl，用可选绑定（if let）可以避免因URL为nil导致的崩溃，代码更健壮。

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