iOS: Draw circle as percentage in UIView

Question

I have one UIView in circular shape, I need to show that UIView border colour in percentage value like if percentage value is 50%, it should fill half border colour of UIView. I have used UIBeizer path addArcWithCenter however I didn't get perfect solution. Please help me in this

It is already answered. Please [check here](http://stackoverflow.com/questions/26578023/animate-drawing-of-a-circle) — Parth Adroja, Aug 15 '16 at 11:34
Are you looking for Swift or Objective-C? Perhaps you can share what you tried? — Rob, Aug 15 '16 at 12:11

score 15 · Accepted Answer · answered Aug 15 '16 at 11:37

You can achieve it with following code, simply adjust strokeStart and strokeEnd:

    // round view
    let roundView = UIView(frame: CGRectMake(100, 100, 250, 250))
    roundView.backgroundColor = UIColor.whiteColor()
    roundView.layer.cornerRadius = roundView.frame.size.width / 2

    // bezier path
    let circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2),
                                  radius: roundView.frame.size.width / 2,
                                  startAngle: CGFloat(-0.5 * M_PI),
                                  endAngle: CGFloat(1.5 * M_PI),
                                  clockwise: true)
    // circle shape
    let circleShape = CAShapeLayer()
    circleShape.path = circlePath.CGPath
    circleShape.strokeColor = UIColor.redColor().CGColor
    circleShape.fillColor = UIColor.clearColor().CGColor
    circleShape.lineWidth = 1.5
    // set start and end values
    circleShape.strokeStart = 0.0
    circleShape.strokeEnd = 0.8

    // add sublayer
    roundView.layer.addSublayer(circleShape)
    // add subview
    self.view.addSubview(roundView)

I think you should remove `circleShape.strokeStart = 0.0 circleShape.strokeEnd = 0.8` to make it draws correctly percent. — Luat Vu Dinh, Sep 08 '20 at 03:22

ibyte · Answer 2 · 2021-02-20T11:24:58.210

I've written my custom function for doing this in Swift 5. I'm sure I'll save someone a lot of time. Have fun with it.

    func buildRoundView(roundView: UIView, total : Int, current : Int){
    roundView.layer.cornerRadius = roundView.frame.size.width / 2
    roundView.backgroundColor = .clear
    let width :CGFloat = 10.0
    let reducer :CGFloat = 0.010
    let circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2),
                                  radius: roundView.frame.size.width / 2,
                                  startAngle: CGFloat(-0.5 * Double.pi),
                                  endAngle: CGFloat(1.5 * Double.pi),
                                  clockwise: true)
    let multiplier = CGFloat((100.000 / Double(total)) * 0.0100)
    
    for i in 1...total {
        
        let circleShape = CAShapeLayer()
        circleShape.path = circlePath.cgPath
        if i <= current {
            circleShape.strokeColor = UIColor.systemRed.cgColor
        }
        else{
            circleShape.strokeColor = UIColor.lightGray.cgColor
        }
        
        circleShape.fillColor = UIColor.clear.cgColor
        circleShape.lineWidth = width
        circleShape.strokeStart = CGFloat(CGFloat(i - 1) * multiplier) + reducer
        circleShape.strokeEnd = CGFloat(CGFloat(i) * multiplier) - reducer
        roundView.layer.addSublayer(circleShape)
    }
}

score 0 · Answer 3 · answered Nov 25 '21 at 10:48

According @gvuksic's answer:

Swift 5:

// round view
    let roundView = UIView(
        frame: CGRect(
            x: circleContainerView.bounds.origin.x,
            y: circleContainerView.bounds.origin.y,
            width: circleContainerView.bounds.size.width - 4,
            height: circleContainerView.bounds.size.height - 4
        )
    )
    roundView.backgroundColor = .white
    roundView.layer.cornerRadius = roundView.frame.size.width / 2
    
    // bezier path
    let circlePath = UIBezierPath(arcCenter: CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2),
                                  radius: roundView.frame.size.width / 2,
                                  startAngle: CGFloat(-0.5 * .pi),
                                  endAngle: CGFloat(1.5 * .pi),
                                  clockwise: true)
    // circle shape
    let circleShape = CAShapeLayer()
    circleShape.path = circlePath.cgPath
    circleShape.strokeColor = UIColor.customColor?.cgColor
    circleShape.fillColor = UIColor.clear.cgColor
    circleShape.lineWidth = 4
    // set start and end values
    circleShape.strokeStart = 0.0
    circleShape.strokeEnd = 0.8
    
    // add sublayer
    roundView.layer.addSublayer(circleShape)
    // add subview
    circleContainerView.addSubview(roundView)

And the result:

iOS: Draw circle as percentage in UIView

3 Answers3