CODEWITHSUNDEEP
iosiphoneswiftuiviewlabel
Kashif Jilani
Kashif Jilani

Reputation: 1257

iOS: Draw circle as percentage in UIView

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

Upvotes: 4

Views: 3832

Answers (3)

oskarko
oskarko

Reputation: 4178

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:

enter image description here

Upvotes: 0

ibyte
ibyte

Reputation: 471

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.

enter image description here

    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)
    }
}

Upvotes: 1

gvuksic
gvuksic

Reputation: 3013

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)

Upvotes: 15

Related Questions