BeingLearner BeingLearner - 1 year ago 91
Swift Question

How to fill a circle color by percentage value?

In my application I have a requirement in such a way that I need to fill circle with red color with percentage values like 50%, 80% which I am getting from API like below image.

enter image description here

Currently I am using the below code to achieve this.

let roundView = UIView(frame:CGRect(x: 100, y: 100, width: 250, height: 250))
roundView.backgroundColor = UIColor.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(M_PI_2),
endAngle: CGFloat (M_PI * 2.0),
clockwise: true)
circlePath.move(to: roundView.center)
// circle shape
let circleShape = CAShapeLayer()
circleShape.path = circlePath.cgPath
circleShape.strokeColor = UIColor.black.cgColor
circleShape.fillColor = UIColor.green.cgColor
circleShape.lineWidth = 1.5
// add sublayer
roundView.layer.addSublayer(circleShape)
// add subview
self.view.addSubview(roundView)*


it is showing like below

enter image description here

Can you please suggest me how to do this. Currently I am facing problem converting percentage to degrees.

Answer Source

Your problem is that you are not drawing the full path - an arc alone will not do it. You need to start the path at the centre, and draw the straight edges as well as the arc. Here it is in Playground - I have tried to keep as much as possible to your style, but have introduced the parameter proportion which is your percentage.

import UIKit
let roundView = UIView(frame:CGRect(x: 100, y: 100, width: 250, height: 250))
roundView.backgroundColor = UIColor.white
roundView.layer.cornerRadius = roundView.frame.size.width / 2

let startAngle = -CGFloat.pi / 2 // vary this to move the start of the arc
let proportion = CGFloat(80)
let centre = CGPoint (x: roundView.frame.size.width / 2, y: roundView.frame.size.height / 2)
let radius = roundView.frame.size.width / 2
let arc = CGFloat.pi * 2 * proportion / 100 // i.e. the proportion of a full circle

// Start a mutable path
let cPath = UIBezierPath()
// Move to the centre
cPath.move(to: centre)
// Draw a line to the circumference
cPath.addLine(to: CGPoint(x: centre.x + radius * cos(startAngle), y: centre.y + radius * sin(startAngle)))
// NOW draw the arc
cPath.addArc(withCenter: centre, radius: radius, startAngle: startAngle, endAngle: arc + startAngle, clockwise: true)
// Line back to the centre, where we started (or the stroke doesn't work, though the fill does)
cPath.addLine(to: CGPoint(x: centre.x, y: centre.y))
// n.b. as @MartinR points out `cPath.close()` does the same!

// circle shape
let circleShape = CAShapeLayer()
circleShape.path = cPath.cgPath
circleShape.strokeColor = UIColor.black.cgColor
circleShape.fillColor = UIColor.green.cgColor
circleShape.lineWidth = 1.5
// add sublayer
roundView.layer.addSublayer(circleShape)
roundView

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download