Problemas com raio de canto

Question

eu tenho o seguinte código

class CourseItemCollectionViewCell: UICollectionViewCell {
    var imageView: UIImageView!
    var label: UILabel!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.isUserInteractionEnabled = false
        contentView.addSubview(imageView)
        
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        var frame = imageView.frame
        frame.size.height = 120
        frame.size.width = 212
        frame.origin.x = 0
        frame.origin.y = 0
        imageView.frame = frame
    
        imageView.layoutIfNeeded()
        imageView.layer.masksToBounds = true
        imageView.layer.cornerRadius = 8
    

Infelizmente, o raio do canto não está funcionando na visualização da imagem. O que acontece é que as bordas superiores superiores da imagem parecem retangulares, enquanto a inferior parece circular. Funciona na parte inferior, mas não na parte superior. O que estou fazendo de errado?

Atualização que tentei:

let imageView: UIImageView = {
    let imageView = UIImageView(frame: .zero)
    imageView.contentMode = .scaleAspectFill
    return imageView
}()
override init(frame: CGRect) {
      super.init(frame: .zero)
      setupViews()
      setupLayouts()
}

private func setupViews() {
    contentView.clipsToBounds = true
    contentView.backgroundColor = .clear
    contentView.isUserInteractionEnabled = true

    imageView.layer.masksToBounds = true
    imageView.setRoundedEdge(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 8)
    
    contentView.addSubview(imageView)
    contentView.addSubview(label)
}


extension UIImageView {
    func setRoundedEdge(corners:UIRectCorner, radius: CGFloat){
        let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        layer.mask = mask
    }
}

Antes que eu veja

Agora eu vejo

As imagens das notas são carregadas via URL.

Answer 1

Tente adicionar um containerView em sua collectionViewCell, adicione o imageView nele (eu defini minha imagem, você definiu sua imagem de url) e defina restrições com Auto Layout como este:

let containerView: UIView = {
    let v = UIView()
    v.backgroundColor = .red
    v.layer.cornerRadius = 12
    v.layer.masksToBounds = true
    v.translatesAutoresizingMaskIntoConstraints = false
    
    return v
}()

agora defina imageView e Label:

let dummyImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.image = UIImage(named: "yourImage")
    imageView.contentMode = .scaleAspectFill
    imageView.layer.cornerRadius = 8
    imageView.clipsToBounds = true
    imageView.translatesAutoresizingMaskIntoConstraints = false
    
    return imageView
}()

let dummyLabel: UILabel = {
    let label = UILabel()
    label.backgroundColor = .clear
    label.isUserInteractionEnabled = false
    label.text = "Lean Methodology"
    label.font = UIFont.systemFont(ofSize: 30, weight: .regular)
    label.textColor = .black
    label.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}()

depois disso, defina as restrições com o Auto Layout

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    
    backgroundColor = .white
    
    contentView.addSubview(containerView)
    containerView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
    containerView.heightAnchor.constraint(equalToConstant: 230).isActive = true
    containerView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
    containerView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
    
    containerView.addSubview(dummyImageView)
    dummyImageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
    dummyImageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    dummyImageView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
    dummyImageView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
    
    addSubview(dummyLabel)
    dummyLabel.topAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
    dummyLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
    dummyLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
    dummyLabel.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}

Este é o resultado:

Answer 2

Experimente isso, algumas visualizações podem cortar a camada e se estender para fora de seu quadro designado. Normalmente, quando cornerRadius não funciona, eu usaria esta extensão:

extension UIImageView {
    func setRoundedEdge(corners:UIRectCorner, radius: CGFloat){
        let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        layer.mask = mask
    }
}

com uso sendo

imageView.setRoundedEdge(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 8);

Deixe-me saber se isso resolve o seu problema.