Probleme mit dem Eckenradius

Question

Ich habe den folgenden Code

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
    

Leider funktioniert der Eckenradius in der Bildansicht nicht. Was passiert ist, dass die oberen oberen Ränder des Bildes rechteckig aussehen, während die unteren kreisförmig aussehen. Es funktioniert für die Unterseite, aber nicht für die Oberseite. Was mache ich falsch?

Update Ich habe versucht:

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

Bevor ich sehe

Jetzt sehe ich

Hinweis Bilder werden per URL geladen.

Answer 1

Versuchen Sie, eine containerView in Ihre collectionViewCell einzufügen, fügen Sie die imageView hinzu (ich habe mein Bild festgelegt, Sie legen Ihr URL-Bild fest) und legen Sie mit dem automatischen Layout folgende Einschränkungen fest:

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

Stellen Sie nun imageView und Label ein:

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

Danach legen Sie die Einschränkungen mit dem automatischen Layout fest

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
}

Das ist das Ergebnis:

Answer 2

Versuchen Sie dies. Einige Ansichten können die Ebene ausschneiden und sich außerhalb des festgelegten Rahmens erstrecken. Wenn CornerRadius nicht funktioniert, würde ich normalerweise diese Erweiterung verwenden:

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

mit der Nutzung ist

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

Lassen Sie mich wissen, ob dies Ihr Problem behebt.