UITableViewCell中UIImageView使用SDWebImage加载网络图片超出边界问题

问题根因排查与修复方案 #

你当前的配置存在逻辑冲突：clipsToBounds 与 layer.masksToBounds 功能完全等效，先设为false再设为true属于无效操作，且系统内置/自定义UITableViewCell的UIImageView如果没有固定宽高约束，会根据图片的固有内容尺寸自动撑开，这是图片超出边界的核心原因。

1. 修正基础配置

统一调整UIImageView的显示属性，移除冲突配置：

cell.imageView?.contentMode = .scaleAspectFill // 按需调整为.scaleAspectFit也可
cell.imageView?.clipsToBounds = true

2. 固定UIImageView尺寸

如果是使用Xib/Storyboard布局，直接给UIImageView添加40×40的固定宽高约束；如果是代码布局，在cell初始化时添加如下约束：

cell.imageView?.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    cell.imageView!.widthAnchor.constraint(equalToConstant: 40),
    cell.imageView!.heightAnchor.constraint(equalToConstant: 40)
])

3. 优化SDWebImage加载逻辑

你当前手动resize图片的逻辑可以替换为SDWebImage内置的转换器，既可以缓存变换后的图片提升性能，也能避免回调内修改图片后未触发布局的问题：

let resizingTransformer = SDImageResizingTransformer(size: CGSize(width: 40, height: 40), scaleMode: .aspectFill)
cell.imageView?.sd_setImage(
    with: URL(string: "\(Constants.string.WEB)/assets/\(dict.image)"),
    placeholderImage: UIImage(named: Constants.string.IMAGE_PLACEHOLDER_60),
    context: [.imageTransformer: resizingTransformer]
)

如果要保留原有回调写法，在给imageView赋值完成后添加布局刷新代码即可：

cell.imageView?.sd_setImage(with: URL(string: "\(Constants.string.WEB)/assets/\(dict.image)")) { (image, error, cache, urls) in
    let targetImage: UIImage
    if let error = error {
        targetImage = UIImage(named: Constants.string.IMAGE_PLACEHOLDER_60)!.resizeImageWith(newSize: CGSize(width: 40, height: 40))
    } else {
        targetImage = image!.resizeImageWith(newSize: CGSize(width: 40, height: 40))
    }
    cell.imageView?.image = targetImage
    // 新增布局刷新
    cell.setNeedsLayout()
}

参考图

问题效果图：

cell布局参考图：

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