ios - 自定义 UIView 子类中的 Swift UIView subview 不圆角

Question

问候堆栈溢出。

我正在尝试使用彩色 subview 和圆角半径构建“靶心”类型的 View 。我遇到的问题是，只有我的第一个 subview 的角变圆了，内部 View 仍然是正方形。黑色 View 是我的自定义 View 的 subview 。红色 View 是它的 subview ，黄色 View 是它的 subview 。非常简单的层次结构。

结果如下:

我手动添加 View 并设置它们的约束。我的测试应用程序只有一个 View Controller 的 ThreeCircleView 死点，其中 X、Y 居中且宽度、高度恒定。我在 didLayoutSubViews 中对角进行了实际的舍入，因为 View 的大小可能会改变，因此必须调整角的大小。

我写了一个测试 View 来隔离这个，这里是

class ThreeCircleView: UIView {

    var outerCircle: UIView = UIView()
    var middleCircle: UIView = UIView()
    var innerCircle: UIView = UIView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        translatesAutoresizingMaskIntoConstraints = false
        addSubViews()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        translatesAutoresizingMaskIntoConstraints = false
        addSubViews()
    }

    func addSubViews() {
        outerCircle.backgroundColor = .black
        middleCircle.backgroundColor = .red
        innerCircle.backgroundColor = .yellow
    
        self.addSubview(outerCircle)
        outerCircle.addSubview(middleCircle)
        middleCircle.addSubview(innerCircle)
        
        let outerCenterY = outerCircle.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        let outerCenterX = outerCircle.centerXAnchor.constraint(equalTo: self.centerXAnchor)
        let outerCenterWidth = outerCircle.widthAnchor.constraint(equalTo: self.widthAnchor, constant: -50.0 )
        let outerCenterHeight = outerCircle.heightAnchor.constraint(equalTo: self.heightAnchor, constant: -50.0 )
        outerCircle.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([outerCenterY,outerCenterX,outerCenterWidth,outerCenterHeight])
        
        self.setNeedsLayout()
        let middleCenterY = middleCircle.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        let middleCenterX = middleCircle.centerXAnchor.constraint(equalTo: self.centerXAnchor)
        let middleCenterWidth = middleCircle.widthAnchor.constraint(equalTo: self.widthAnchor, constant: -100.0 )
        let middleCenterHeight = middleCircle.heightAnchor.constraint(equalTo: self.heightAnchor, constant: -100.0 )
        middleCircle.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([middleCenterY,middleCenterX,middleCenterWidth,middleCenterHeight])

        let innerCenterY = innerCircle.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        let innerCenterX = innerCircle.centerXAnchor.constraint(equalTo: self.centerXAnchor)
        let innerCenterWidth = innerCircle.widthAnchor.constraint(equalTo: self.widthAnchor, constant: -150.0 )
        let innerCenterHeight = innerCircle.heightAnchor.constraint(equalTo: self.heightAnchor, constant: -150.0 )
        innerCircle.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([innerCenterY,innerCenterX,innerCenterWidth,innerCenterHeight])

    }

    func makeCircle(v:UIView) {
        v.layer.cornerRadius = v.frame.size.width * 0.50
        v.clipsToBounds = true
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        makeCircle(v: outerCircle)
        makeCircle(v: middleCircle)
        makeCircle(v: innerCircle)
    }
    
}

Answer 1

使其看起来符合预期的一种简单方法是在 makeCircle(v:UIView) 方法中添加 layoutIfNeeded() 调用。这将确保您在应用视觉更改之前正确更新所有 View 的框架:

func makeCircle(v:UIView) {
        v.layoutIfNeeded()
        v.layer.cornerRadius = v.frame.size.width * 0.50
        v.clipsToBounds = true
    }