Programmatically created UIView's frame is 0

Question

Cannot access uiview's frame after setting it's layout. Frame, and center is given as 0,0 points.

I should also mention that there are no storyboard's in this project. All views and everything are created programmatically.

I have created a UIView resultView programmatically and added it as a subview in scrollView, which is also added as a subview of view, then set it's constraints, anchors in a method called setupLayout() I call setupLayout() in viewDidLoad() and after that method, I call another method called configureShapeLayer(). Inside configureShapeLayer() I try to access my view's center as:

let center = resultView.center // should give resultView's center but gives 0

Then by using this center value I try to add two bezierPaths to have a status bar kind of view. But since resultView's center is not updated at that point, it appears as misplaced. Please see the pic below:

I also tried calling setupLayout() in loadView() then calling configureShapeLayer() in viewDidLoad() but nothing changed.

So I need a way to make sure all views are set in my view, all constraints, and layouts are applied before calling configureShapeLayer(). But how can I do this?

I also tried calling configureShapeLayer() in both viewWillLayoutSubviews() and viewDidLayoutSubviews() methods but it made it worse, and didnt work either.

Whole View Controller File is given below: First views are declared, then they are added into the view in prepareUI(), at the end of prepareUI(), another method setupLayout() is called. After it completes setting layout, as can be seen from viewDidLoad, finally configureShapeLayer() method is called.

import UIKit

class TryViewController: UIViewController {

let score: CGFloat = 70

lazy var percentage: CGFloat = {
    return score / 100
}()

// MARK: View Declarations
private let scrollView: UIScrollView = {
    let scrollView = UIScrollView()
    scrollView.backgroundColor = .white
    return scrollView
}()

private let iconImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.contentMode = .scaleAspectFit
    return imageView
}()

let scoreLayer = CAShapeLayer()
let trackLayer = CAShapeLayer()

let percentageLabel: UILabel = {
    let label = UILabel()
    label.text = ""
    label.textAlignment = .center
    label.font = TextStyle.systemFont(ofSize: 50.0)
    return label
}()

// This one is the one should have status bar at center.
private let resultView: UIView = {
    let view = UIView()
    view.backgroundColor = .purple
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()
    prepareUI()
    configureShapeLayer()
}

private func prepareUI() {

    resultView.addSubviews(views: percentageLabel)

    scrollView.addSubviews(views: iconImageView,
                           resultView)

    view.addSubviews(views: scrollView)
    setupLayout()
}

private func setupLayout() {
    scrollView.fillSuperview()
    iconImageView.anchor(top: scrollView.topAnchor,
                         padding: .init(topPadding: 26.0))
    iconImageView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 0.31).isActive = true
    iconImageView.heightAnchor.constraint(equalTo: iconImageView.widthAnchor, multiplier: 0.67).isActive = true
    iconImageView.anchorCenterXToSuperview()

    //percentageLabel.frame = CGRect(x: 0, y: 0, width: 105, height: 60)
    //percentageLabel.center = resultView.center

    percentageLabel.anchorCenterXToSuperview()
    percentageLabel.anchorCenterYToSuperview()

    let resultViewTopConstraintRatio: CGFloat = 0.104
    resultView.anchor(top: iconImageView.bottomAnchor,
                      padding: .init(topPadding: (view.frame.height * resultViewTopConstraintRatio)))

    resultView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 0.533).isActive = true
    resultView.heightAnchor.constraint(equalTo: resultView.widthAnchor, multiplier: 1.0).isActive = true
    resultView.anchorCenterXToSuperview()

    configureShapeLayer()
}

private func configureShapeLayer() {
    let endAngle = ((2 * percentage) * CGFloat.pi) - CGFloat.pi / 2

    let center = resultView.center // should give resultView's center but gives 0

    // Track Layer Part
    let trackPath = UIBezierPath(arcCenter: center, radius: 50, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

    trackLayer.path = trackPath.cgPath
    trackLayer.strokeColor = UIColor.lightGray.cgColor // to make different
    trackLayer.lineWidth = 10
    trackLayer.fillColor = UIColor.clear.cgColor
    trackLayer.lineCap = .round

    resultView.layer.addSublayer(trackLayer)

    // Score Fill Part
    let scorePath = UIBezierPath(arcCenter: center, radius: 50, startAngle: -CGFloat.pi / 2, endAngle: endAngle, clockwise: true)

    scoreLayer.path = scorePath.cgPath
    scoreLayer.strokeColor = UIColor.red.cgColor
    scoreLayer.lineWidth = 10
    scoreLayer.fillColor = UIColor.clear.cgColor
    scoreLayer.lineCap = .round
    scoreLayer.strokeEnd = 0

    resultView.layer.addSublayer(scoreLayer)

}
}

Answer 1

You will be much better off creating a custom view. That will allow you to "automatically" update your bezier paths when the view size changes.

It also allows you to keep your drawing code away from your controller code.

Here is a simple example. It adds a button above the "resultView" - each time it's tapped it will increment the percentage by 5 (percentage starts at 5 for demonstration):

//
//  PCTViewController.swift
//
//  Created by Don Mag on 12/6/18.
//

import UIKit

class MyResultView: UIView {

    let scoreLayer = CAShapeLayer()
    let trackLayer = CAShapeLayer()

    var percentage = CGFloat(0.0) {
        didSet {
            self.percentageLabel.text = "\(Int(percentage * 100))%"
            self.setNeedsLayout()
        }
    }

    let percentageLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = ""
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 40.0)
        return label
    }()

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

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

    func commonInit() -> Void {

        layer.addSublayer(trackLayer)
        layer.addSublayer(scoreLayer)

        addSubview(percentageLabel)

        NSLayoutConstraint.activate([
            percentageLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            percentageLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
            ])

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let endAngle = ((2 * percentage) * CGFloat.pi) - CGFloat.pi / 2

        trackLayer.frame = self.bounds
        scoreLayer.frame = self.bounds

        let centerPoint = CGPoint(x: self.bounds.width / 2.0, y: self.bounds.height / 2.0)

        // Track Layer Part
        let trackPath = UIBezierPath(arcCenter: centerPoint, radius: 50, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

        trackLayer.path = trackPath.cgPath
        trackLayer.strokeColor = UIColor.lightGray.cgColor // to make different
        trackLayer.lineWidth = 10
        trackLayer.fillColor = UIColor.clear.cgColor
        // pre-Swift 4.2
        trackLayer.lineCap = kCALineCapRound
//      trackLayer.lineCap = .round

        // Score Fill Part
        let scorePath = UIBezierPath(arcCenter: centerPoint, radius: 50, startAngle: -CGFloat.pi / 2, endAngle: endAngle, clockwise: true)

        scoreLayer.path = scorePath.cgPath
        scoreLayer.strokeColor = UIColor.red.cgColor
        scoreLayer.lineWidth = 10
        scoreLayer.fillColor = UIColor.clear.cgColor
        // pre-Swift 4.2
        scoreLayer.lineCap = kCALineCapRound
//      scoreLayer.lineCap = .round

    }

}

class PCTViewController: UIViewController {

    let resultView: MyResultView = {
        let v = MyResultView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .purple
        return v
    }()

    let btn: UIButton = {
        let b = UIButton()
        b.translatesAutoresizingMaskIntoConstraints = false
        b.setTitle("Add 5 percent", for: .normal)
        b.backgroundColor = .blue
        return b
    }()

    var pct = 5

    @objc func incrementPercent(_ sender: Any) {
        pct += 5
        resultView.percentage = CGFloat(pct) / 100.0
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(btn)
        view.addSubview(resultView)

        NSLayoutConstraint.activate([

            btn.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20.0),
            btn.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            resultView.widthAnchor.constraint(equalToConstant: 300.0),
            resultView.heightAnchor.constraint(equalTo: resultView.widthAnchor),

            resultView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            resultView.centerYAnchor.constraint(equalTo: view.centerYAnchor),

            ])

        btn.addTarget(self, action: #selector(incrementPercent), for: .touchUpInside)

        resultView.percentage = CGFloat(pct) / 100.0

    }

}

Result: