Subview of Custom UIView has wrong x frame position

Question

I have a custom UIView like so:

import UIKit

class MainLogoAnimationView: UIView {

    @IBOutlet var customView: UIView!
    var turquoiseCircle: AnimationCircleView!
    var redCircle: AnimationCircleView!
    var blueCircle: AnimationCircleView!


    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup() {
        _ = Bundle.main.loadNibNamed("MainLogoAnimationView", owner: self, options: nil)?[0] as! UIView
        self.addSubview(customView)
        customView.frame = self.bounds
        setupAnimation()
    }

    let initialWidthScaleFactor: CGFloat = 0.06

    func setupAnimation() {
        let circleWidth = frame.size.width*initialWidthScaleFactor
        let yPos = frame.size.height/2 - circleWidth/2
        turquoiseCircle = AnimationCircleView(frame: CGRect(x: 0, y: yPos, width: circleWidth, height: circleWidth))
        turquoiseCircle.circleColor = UIColor(red: 137/255.0, green: 203/255.0, blue: 225/255.0, alpha: 1.0).cgColor
        turquoiseCircle.backgroundColor = UIColor.lightGray
        addSubview(turquoiseCircle)
        redCircle = AnimationCircleView(frame: CGRect(x: 100, y: yPos, width: circleWidth, height: circleWidth))
        addSubview(redCircle)
        blueCircle = AnimationCircleView(frame: CGRect(x: 200, y: yPos, width: circleWidth, height: circleWidth))
        blueCircle.circleColor = UIColor(red: 93/255.0, green: 165/255.0, blue: 213/255.0, alpha: 1.0).cgColor
        addSubview(blueCircle)
    }
}

I created a light blue colored UIView in interface builder and set the above view MainLogoAnimationView as its subclass. If I run the app I get this:

It seems that for the turquoiseCircle the frame hasn't been placed at x = 0 as I set it. Not sure what I am doing wrong here. Is it because it is placed before the MainLogoAnimationView is fully initialized so being placed incorrectly? I have tried setting the frames of the circles in layoutSubviews() and this also didn't make any difference. I seem to run into the problem a lot with views being misplaced and think I am missing something fundamental here. What am I doing wrong?

UPDATE:

import UIKit

class MainLogoAnimationView: UIView {

    @IBOutlet var customView: UIView!
    var turquoiseCircle: AnimationCircleView!
    var redCircle: AnimationCircleView!
    var blueCircle: AnimationCircleView!


    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup() {
        _ = Bundle.main.loadNibNamed("MainLogoAnimationView", owner: self, options: nil)?[0] as! UIView
        self.addSubview(customView)
        customView.frame = self.bounds
        setupAnimation()
    }

    let initialWidthScaleFactor: CGFloat = 0.2


    func setupAnimation() {
        blueCircle = AnimationCircleView()
        blueCircle.translatesAutoresizingMaskIntoConstraints = false
        blueCircle.backgroundColor = UIColor.lightGray
        blueCircle.circleColor = UIColor.blue.cgColor
        addSubview(blueCircle)

        redCircle = AnimationCircleView()
        redCircle.translatesAutoresizingMaskIntoConstraints = false
        redCircle.backgroundColor = UIColor.lightGray
        addSubview(redCircle)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        let circleWidth = bounds.size.width*initialWidthScaleFactor
        let yPos = frame.size.height/2 - circleWidth/2
        blueCircle.frame = CGRect(x: 0, y: yPos, width: circleWidth, height: circleWidth)
        redCircle.frame = CGRect(x: frame.size.width/2 - circleWidth/2, y: yPos, width: circleWidth, height: circleWidth)
    }
}

and :

import UIKit

class AnimationCircleView: UIView {

    var circleColor = UIColor(red: 226/255.0, green: 131/255.0, blue: 125/255.0, alpha: 1.0).cgColor {
        didSet {
            shapeLayer.fillColor = circleColor
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    let shapeLayer = CAShapeLayer()

    func setup() {
        let circlePath = UIBezierPath(ovalIn: self.bounds)
        shapeLayer.path = circlePath.cgPath
        shapeLayer.fillColor = circleColor
        shapeLayer.frame = self.bounds
        layer.addSublayer(shapeLayer)
    }

}

Mike Sand Mike Sand · Accepted Answer · 2017-02-02T16:01:11

It's definitely the case that the setting up in init will provide self.frame/self.bounds values for whatever the view's initialized values are and not the correct final values when laid out in the view hierarchy. Probably the best way to handle this is like you tried, to add the views in init, and use property to keep a reference to them (you already are doing this) and then set the frame in -layoutSubviews().

The reason it probably didn't work in -layoutSubviews() is for each view after creation you need to call .translatesAutoresizingMaskIntoConstraints = false. Otherwise with programmatically-created views the system will create constraints for the values when added as a subview, overriding any setting of frames. Try setting that and see how it goes.

EDIT: For resizing the CAShapeLayer, instead of adding as a sublayer (which would require manually resizing) since AnimationCirleView view is specialized the view can be backed by CAShapeLayer. See the answer at Overriding default layer type in UIView in swift

Subview of Custom UIView has wrong x frame position

1 Answers