Swift UIView Subviews not rounding corners in Custom UIView Subclass

Viewed 729

Greetings stack overflow.

I am trying to build a "bullseye" type view, using coloured subviews and the corner radius. The problem I have is, only my first subview's corners are getting rounded and the inner views are still squares. The black view is a subview of my custom view. The red view is it's subview, and they yellow view the subview of that. Pretty simple hierarchy.

The result looks like this:

Bullseye with squares instead of circles

I add the views and set their constraints manually. My test app just has the ThreeCircleView dead center of a view controller with the X,Y centered and the width, height constant. I do the actual rounding of the corners in didLayoutSubViews because the size of the view might change, so the corners would have to be resized.

I wrote a test view to isolate this, here it is

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)
    }
    
}
1 Answers

An easy way to make it look as expected is to add layoutIfNeeded() call inside your makeCircle(v:UIView) method. This will make you sure that all views' frames are updated correctly before applying visual changes:

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