Custom circular progress view in awakeFromNib

Question

I have created circle progress view using UIBezierPath and CAShapeLayer with following code.

let center = self.center

let trackLayer = CAShapeLayer()

let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

trackLayer.path = circularPath.cgPath

trackLayer.strokeColor = UIColor.lightGray.cgColor
trackLayer.lineWidth = 10
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineCap = kCALineCapRound
self.layer.addSublayer(trackLayer)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 10
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineCap = kCALineCapRound
shapeLayer.strokeEnd = 0
self.layer.addSublayer(shapeLayer)
self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))

If I put that code in my viewDidLoad it works fine. However, when I add UIView from storyboard and set its class to custom class then copy all codes to that custom UIView class and call it in awakeFromNib function it is not working what could be the reason? And how can I use above code with custom UIView class?

Orange view should be my custom view I have added leading, trailing, bottom and fixed height constraint it but it looks like above. Does not circle view need to place center of orange view?

score 0 · Accepted Answer · answered May 16 '18 at 08:03

0

Actually it works but it has wrong position. The position in this case is out of your view so you can't see it. It makes you think that your code doesn't work.

If you want to have circle in the center of your view. Put the code in awakeFromNib and calculate center your self, don't use self.center

override func awakeFromNib() {
  let center = CGPoint.init(x: frame.width / 2, y: frame.height / 2)

  let trackLayer = CAShapeLayer()
  let shapeLayer = CAShapeLayer()

  let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)

  trackLayer.path = circularPath.cgPath

  trackLayer.strokeColor = UIColor.lightGray.cgColor
  trackLayer.lineWidth = 10
  trackLayer.fillColor = UIColor.clear.cgColor
  trackLayer.lineCap = kCALineCapRound
  self.layer.addSublayer(trackLayer)
  shapeLayer.path = circularPath.cgPath
  shapeLayer.strokeColor = UIColor.red.cgColor
  shapeLayer.lineWidth = 10
  shapeLayer.fillColor = UIColor.clear.cgColor
  shapeLayer.lineCap = kCALineCapRound
  shapeLayer.strokeEnd = 0
  self.layer.addSublayer(shapeLayer)
}

Result

enter image description here

answered May 16 '18 at 08:03

trungduc

11,926
4
31
55

frame has no member width – Shehata Gamal May 16 '18 at 08:30
Thanks buddy it works like a charm now shall I need to call super.awakeFromNib at the top of the code or at the bottom and also do I need to sure its called once? – atalayasa May 16 '18 at 08:31
@Sh_Khan In Objective-C, it doesn't have but in Swift, it has. https://stackoverflow.com/questions/27243451/difference-between-frame-size-width-and-frame-width – trungduc May 16 '18 at 08:31
@AtalayAsa You should call `super.awakeFromNib()` at the top of method and don't need to sure its called once because `awakeFromNib` is only called one time. – trungduc May 16 '18 at 08:32
1

@Sh_Khan Feel free to down vote my answer. But I have a suggestion for you. Only give the answer if you know it's right and **BE FAIR!!!** – trungduc May 16 '18 at 08:34

Custom circular progress view in awakeFromNib

1 Answers1