iOS scaleAspectFit模式下UIImageView顶部圆角不生效问题咨询

• .scaleAspectFit模式默认会将等比缩放后的图片垂直水平居中显示在UIImageView内，当图片宽高比和ImageView尺寸不匹配时，图片顶部和ImageView顶部会出现透明留白。直接给ImageView的layer设置顶部圆角，裁剪的是ImageView整个bounds的边角，而非实际图片内容的边角，看起来就像圆角没有生效。
• 原代码存在两处缺陷：
  • containerView未开启clipsToBounds，自身的圆角无法裁剪子视图内容
  • imageView只设置了top/leading/trailing约束，缺少bottom约束，尺寸无法和containerView匹配，进一步加剧了内容错位
• 直接给ImageView.layer设置圆角的方式，无法适配不同宽高比的图片：当图片为竖图、左右留边时，圆角会落在透明留白区域，切不到图片本身的顶角。

1. 自定义顶部对齐的UIImageView子类 #

重写系统方法实现图片顶部对齐，同时在布局更新时给图片实际显示区域添加精准的顶部圆角，适配所有宽高比的图片：

class TopAlignedAspectFitImageView: UIImageView {
    override var image: UIImage? {
        didSet {
            setNeedsLayout()
        }
    }
    
    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
        var imageFrame = super.imageRect(forContentRect: contentRect)
        // 强制图片顶部对齐，取消默认的垂直居中偏移
        imageFrame.origin.y = 0
        return imageFrame
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        guard image != nil else {
            layer.mask = nil
            return
        }
        // 获取图片实际显示的区域
        let actualImageRect = imageRect(forContentRect: bounds)
        // 生成仅顶部两角带圆角的遮罩路径
        let maskPath = UIBezierPath(
            roundedRect: actualImageRect,
            byRoundingCorners: [.topLeft, .topRight],
            cornerRadii: CGSize(width: 8, height: 8)
        )
        let maskLayer = CAShapeLayer()
        maskLayer.path = maskPath.cgPath
        layer.mask = maskLayer
    }
}

2. 修正属性配置 #

替换原有UIImageView为自定义子类，补全containerView的裁剪配置，移除无效的layer圆角设置：

let containerView: UIView = {
    let view = UIView()
    view.layer.cornerRadius = 8
    view.clipsToBounds = true
    return view
}()

let imageView: TopAlignedAspectFitImageView = {
    let imageView = TopAlignedAspectFitImageView()
    imageView.contentMode = .scaleAspectFit
    imageView.clipsToBounds = true
    return imageView
}()

3. 补全布局约束 #

让imageView完全贴合containerView，避免尺寸不匹配：

private func setupViews() {
    addSubview(containerView)
    containerView.snp.makeConstraints { make in
        make.edges.equalToSuperview()
    }
    
    containerView.addSubview(imageView)
    imageView.snp.makeConstraints { make in
        make.edges.equalToSuperview()
    }
}

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