Проблемы с угловым радиусом

Question

У меня есть следующий код

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
    

К сожалению, угловой радиус не работает при просмотре изображения. Что происходит, так это то, что верхние верхние края изображения выглядят прямоугольными, а нижние - круглыми. Это работает для низа, но не для верха. Что я делаю не так?

Обновление, которое я пробовал:

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
    }
}

Прежде чем я увижу

Теперь я вижу

Изображения заметок загружаются через URL.

Answer 1

Попробуйте добавить containerView в свою коллекциюViewCell, добавьте в него imageView (я установил свое изображение, вы задали свой URL-адрес) и установите ограничения с помощью Auto Layout следующим образом:

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

теперь установите imageView и 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
}()

после этого установите ограничения с помощью 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
}

Вот результат:

Answer 2

Попробуйте это, некоторые виды могут обрезать слой и выходить за пределы назначенного фрейма. Обычно, когда cornerRadius не работает, я бы использовал это расширение:

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
    }
}

с использованием

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

Сообщите мне, если это решит вашу проблему.