How to draw a circle using CAShapeLayer to be centered in a custom UIView in swift programmatically

Question

I am trying to draw a circular progress bar using CAShapeLayer inside a custom UIView which has been auto constraint, I don't want to draw my circle in the center of my super view but rather in the center of my custom view because I have other views on top my code below draws a circle but it is not positioned in the specified view

// Custom View
let gaugeViewHolder = UIView()
scrollView.addSubview(gaugeViewHolder)
        gaugeViewHolder.translatesAutoresizingMaskIntoConstraints = false
        gaugeViewHolder.backgroundColor = UIColor.black
        gaugeViewHolder.leadingAnchor.constraint(equalTo: motherView.leadingAnchor).isActive = true
        gaugeViewHolder.topAnchor.constraint(equalTo: defaultAccImage.bottomAnchor, constant: 70).isActive = true
        gaugeViewHolder.trailingAnchor.constraint(equalTo: motherView.trailingAnchor).isActive = true
        gaugeViewHolder.heightAnchor.constraint(equalToConstant: 200).isActive = true

//Now my circle
let shapeLayer = CAShapeLayer()
        let centerForGauge = gaugeViewHolder.center

        let circularPath = UIBezierPath(arcCenter: centerForGauge
            , radius: 80, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)

        shapeLayer.path = circularPath.cgPath
        shapeLayer.strokeColor = UIColor.white.withAlphaComponent(0.20).cgColor
        shapeLayer.lineWidth = 10
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = kCALineCapRound
        gaugeViewHolder.layer.addSublayer(shapeLayer)

@DuncanC please how do i do that because i believe the shapeLayer.path = circularPath does that? — chevi99, Oct 13 '18 at 18:42
No, the layer's path and it's frame are totally independent of each other. The frame is the picture frame where the shape lives. The path is the geometric shape that's drawn in that box. — Duncan C, Oct 13 '18 at 18:44
I posted an answer with working code that shows how to set up your shape layer. The key is that you need to set `layer.frame = owningView.bounds`, and then when you set the center of your path it needs to be in the shape layer's (or view's) coordinate system. A view's `center` property is in it's superview's coordinate system, which is **not** what you want. — Duncan C, Oct 13 '18 at 19:15

score 1 · Accepted Answer · answered Oct 13 '18 at 19:20

let gaugeViewHolder = UIView()
 override func viewDidLoad() {
    super.viewDidLoad()
scrollView.addSubview(gaugeViewHolder)
    gaugeViewHolder.translatesAutoresizingMaskIntoConstraints = false
    gaugeViewHolder.backgroundColor = UIColor.black
    gaugeViewHolder.leadingAnchor.constraint(equalTo: motherView.leadingAnchor).isActive = true
    gaugeViewHolder.topAnchor.constraint(equalTo: defaultAccImage.bottomAnchor, constant: 70).isActive = true
    gaugeViewHolder.trailingAnchor.constraint(equalTo: motherView.trailingAnchor).isActive = true
    gaugeViewHolder.heightAnchor.constraint(equalToConstant: 200).isActive = true
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    let shapeLayer = CAShapeLayer()
    let centerForGauge = gaugeViewHolder.center
    print("gauge width:: \(centerForGauge)")
    let circularPath = UIBezierPath(arcCenter: CGPoint(x: gaugeViewHolder.frame.size.width/2, y: gaugeViewHolder.frame.size.height/2)
        , radius: 100, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)

    shapeLayer.path = circularPath.cgPath
    shapeLayer.strokeColor = UIColor.white.withAlphaComponent(0.50).cgColor
    shapeLayer.lineWidth = 10
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineCap = kCALineCapRound
    gaugeViewHolder.layer.addSublayer(shapeLayer)
}

score 0 · Answer 2 · answered Oct 13 '18 at 18:52

You may consider add the layer later after all constraints has been applied to your view if you don't set frame by yourself at design time. This works as I have tested in an example.

 var gaugeViewHolder : UIView!

     override func viewDidLoad() {
        super.viewDidLoad()
        gaugeViewHolder = UIView()
        scrollView.addSubview(gaugeViewHolder)
        gaugeViewHolder.translatesAutoresizingMaskIntoConstraints = false
        gaugeViewHolder.backgroundColor = UIColor.black
        gaugeViewHolder.leadingAnchor.constraint(equalTo: motherView.leadingAnchor).isActive = true
        gaugeViewHolder.topAnchor.constraint(equalTo: defaultAccImage.bottomAnchor, constant: 70).isActive = true
        gaugeViewHolder.trailingAnchor.constraint(equalTo: motherView.trailingAnchor).isActive = true
        gaugeViewHolder.heightAnchor.constraint(equalToConstant: 200).isActive = true
}


  override func viewDidAppear(_ animated: Bool) {
                super.viewDidAppear(animated)
            let shapeLayer = CAShapeLayer()
            let centerForGauge = gaugeViewHolder.center
            let circularPath = UIBezierPath(arcCenter: centerForGauge
                , radius: 80, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)

            shapeLayer.path = circularPath.cgPath
            shapeLayer.strokeColor = UIColor.white.withAlphaComponent(0.20).cgColor
            shapeLayer.lineWidth = 10
            shapeLayer.fillColor = UIColor.clear.cgColor
            shapeLayer.lineCap = CAShapeLayerLineCap.round
            gaugeViewHolder.layer.addSublayer(shapeLayer)
        }

@E Coms your solution worked but the problem is it is not centered in the middle of gaugeViewHolder but rather beneath it. — chevi99, Oct 13 '18 at 19:04
your code was helpful what i needed to do was to calculate the width of my gaugeViewHolder and divide by 2 the same applies to the height then assign them to arcCenter. Thanks very helpful. I will post the answer soon — chevi99, Oct 13 '18 at 19:16

score 0 · Answer 3 · answered Oct 13 '18 at 19:14

You never set the frame of the shape layer. It should be the owning view's bounds rect if you want the shape layer to overlay the view's rectangle.

Here is code that adds a shape layer to a view that I added in a sample app storyboard and wired up as an IBOutlet:

@IBOutlet weak var gaugeViewHolder: UIView!

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    gaugeViewHolder.backgroundColor = UIColor.lightGray

    //Now my circle
    let shapeLayer = CAShapeLayer()
    shapeLayer.borderWidth = 2.0 //Add a box on the shape layer so you can see where it gets drawn.

    shapeLayer.frame = gaugeViewHolder.bounds  //Use the view's bounds as the layer's frame

    //Convert gaugeViewHolder's center from it's superview's coordinate system to it's coordinate system
    let centerForGauge = gaugeViewHolder?.superview?.convert(gaugeViewHolder.center, to: gaugeViewHolder) ?? CGPoint.zero

    let lineWidth = CGFloat(5.0)

    //Use 1/2 the shortest side of the shapeLayer's frame for the radius, inset for the circle path's thickness.
    let radius = max(shapeLayer.frame.size.width, shapeLayer.frame.size.height)/2.0 - lineWidth / 2.0

    let circularPath = UIBezierPath(arcCenter: centerForGauge
        , radius: radius, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)

    shapeLayer.path = circularPath.cgPath
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.lineWidth = lineWidth
    shapeLayer.fillColor = UIColor.yellow.cgColor
    shapeLayer.lineCap = .round
    gaugeViewHolder.layer.addSublayer(shapeLayer)
}

I changed the colors and alpha around, and added a borderWidth to the shape layer to make everything stand out.

How to draw a circle using CAShapeLayer to be centered in a custom UIView in swift programmatically

3 Answers3