CODEWITHSUNDEEP
iosswiftuiviewcontrolleruikit
Oliver Redeyoff
Oliver Redeyoff

Reputation: 197

Draw a partial circle in UIViewController in swift

I would like to draw a partial circle and I have the following function to do so in my UIViewController and I call it in viewDidLoad :

import UIKit

class ActivityViewController: UIViewController {

    let progress = CGRect(origin: CGPoint(x:  200, y: 200), size: CGSize(width: 100, height: 100))

    override func viewDidLoad() {
        super.viewDidLoad()
        drawSlice(rect: progress, startPercent: 0, endPercent: 50, color: UIColor.blue)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func drawSlice(rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let endAngle = endPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let path = UIBezierPath()
        path.move(to: center)
        path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.close()
        color.setFill()
        path.fill()
    }


 }

But when I execute this code, the circle doesn't appear, what am I doing wrong?

Upvotes: 1

Views: 1092

Answers (2)

Catalina T.
Catalina T.

Reputation: 3494

You would need to draw as part of a UIView that you place in your UIViewController. One way to do this is to subclass UIView and add the drawing code there:

class MyProgress: UIView {
    // MARK: - Draw

    override func draw(_ rect: CGRect) {

        guard UIGraphicsGetCurrentContext() != nil else {
            return
        }

        let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        let startAngle = startPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let endAngle = endPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
        let path = UIBezierPath()
        path.move(to: center)
        path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
        path.close()
        color.setFill()
        path.fill()

        context.addPath(path.cgPath)
        context.setFillColor(color.cgColor)
        context.fillPath()
}

Then you can add this view to your ViewController and place it, using constraints where you would like it to appear.

Edit

To see the view, you need to add it to your ViewController.

This would be something like this:

import UIKit

class ActivityViewController: UIViewController {

    let progress = CGRect(origin: CGPoint(x:  200, y: 200), size: CGSize(width: 100, height: 100))

    override func viewDidLoad() {
        super.viewDidLoad()
        // instantiate the view
        let progressView = MyProgressView(frame: progress)

        // add it to the view hierarchy
        view.addSubview(progressView)
    }
}

Depending where you want this progress view to show up, you might have to change the frame or add it to some other place in the view hierarchy.

Upvotes: 1

superpuccio
superpuccio

Reputation: 12972

You must specify where you want to draw the path you just created. For instance, you can use a CAShapeLayer and do something like:

    let myLayer = CAShapeLayer()
    myLayer.path = path.cgPath

    //set some property on the layer
    myLayer.strokeColor = UIColor.blue.cgColor
    myLayer.fillColor = UIColor.white.cgColor
    myLayer.lineWidth = 1.0
    myLayer.position = CGPoint(x: 10, y: 10)

    // add the layer to your view's layer !!important!!
    self.layer.addSublayer(myLayer)

And then you should see your layer!

Upvotes: 3

Related Questions