Swift: Position and Resize custom circular progress view UIBezierPath

Question

I am trying to make custom progress view. I've read this tutorial: https://medium.com/@imsree/custom-circular-progress-bar-in-ios-using-swift-4-b1a9f7c55da and watched this video: https://youtu.be/Qh1Sxict3io

Both tutorials are very helpful and make the creation of the progress view very easy and straight forward. However my Problem is that for different devices the size and the position are not dynamic.

I've tried to add the progress view as a subview to a UIView (with dynamic constraints), as adding constraints programmatically directly to progress view results in a crash. The UIView is resizing as expected, but it's subview (the progress view) doesn't.

I am not sure how to change the x,y and radius of this: let circularPath = UIBezierPath(arcCenter: CGPoint (x: frame.midX, y: frame.size.height/2 ), radius: (frame.size.width-1.5)/2, startAngle: -.pi/2, endAngle: 3 * .pi/2, clockwise: true) as it is in different .swift file. So far only changing these 3 values resulted in some movement of the path.

Any help will be much appreciated !

Thanks beforehand!

Answer 1

Since your layer is based on path, you need to update it when view resizes.

I used the exact same code from the tutorial you mentioned, and added the following to CircularProgressView:

var bezierPath: UIBezierPath {
    UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 20) / 2, startAngle: -.pi / 2, endAngle: 3 * .pi / 2, clockwise: true)
}

override func layoutSubviews() {
    super.layoutSubviews()
    let circularPath = bezierPath
    circleLayer.path = circularPath.cgPath
    progressLayer.path = circularPath.cgPath
}