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

尝试在collectionViewCell中添加一个containerView，在其中添加imageView（我设置我的图片，设置您的网址图片），然后使用“自动布局”设置约束，如下所示：

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

之后，使用“自动布局”设置约束

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);

让我知道这是否可以解决您的问题。

拐角半径问题

2 个答案: