Swift: Draw a Circle around a Label

Question

I'm trying to draw a circle around a label at runtime in a TableViewCell's cell.

I can figure out how to get it roughly around the label, but I'm having some trouble centring it exactly around the label.

The circle seems to be drawing just to the right and towards the middle of the label.

Here's my code so far, I'm sure this will be easy for someone to bang out.

func drawCircle() {
    let x = countLabel.layer.position.x - (countLabel.frame.width)
    let y = countLabel.layer.position.y - (countLabel.frame.height / 2)
    let circlePath = UIBezierPath(roundedRect: CGRectMake(x, y, countLabel.frame.height, countLabel.frame.height), cornerRadius: countLabel.frame.height / 2).CGPath

    let circleShape = CAShapeLayer()
    circleShape.path = circlePath
    circleShape.lineWidth = 3
    circleShape.strokeColor = UIColor.whiteColor().CGColor
    circleShape.fillColor = UIColor.clearColor().CGColor

    self.layer.addSublayer(circleShape)
}

Answer 1

You can instead just use corner radius on your label's layer. You make the label square and then set its layer's corner radius to half the width/height of the label which will make it perfectly round. The you set the border width to something greater than zero and the border color to the stroke color you want to use.

let size:CGFloat = 35.0 // 35.0 chosen arbitrarily

countLabel.bounds = CGRectMake(0.0, 0.0, size, size) 
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.backgroundColor = UIColor.clearColor().CGColor
countLabel.layer.borderColor = UIColor.greenColor().CGColor

It will look something like this:

Although the full code for that goes like this in a single view controller iPad template project:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let size:CGFloat = 35.0 // 35.0 chosen arbitrarily

        let countLabel = UILabel()
        countLabel.text = "5"
        countLabel.textColor = .greenColor()
        countLabel.textAlignment = .Center
        countLabel.font = UIFont.systemFontOfSize(14.0)
        countLabel.bounds = CGRectMake(0.0, 0.0, size, size)
        countLabel.layer.cornerRadius = size / 2
        countLabel.layer.borderWidth = 3.0
        countLabel.layer.backgroundColor = UIColor.clearColor().CGColor
        countLabel.layer.borderColor = UIColor.greenColor().CGColor

        countLabel.center = CGPointMake(200.0, 200.0)

        self.view.addSubview(countLabel)
    }

}

Answer 2

countLabel.layer.cornerRadius = 0.5 * countLabel.bounds.size.width 

Answer 3

Ugh, it was what I thought, silly mistake.

X and Y are calculated from the middle instead of from the top left when dealing with BezierPath's.

So the code for x and y should be as follows:

let x = countLabel.layer.position.x - (countLabel.frame.height / 2)
let y = countLabel.layer.position.y - (countLabel.frame.height / 2)

Answer 4

Try this:

func drawCircle() {
    var padding : CGFloat = 8

    let x = countLabel.layer.position.x - (countLabel.frame.width / 2)
    let y = countLabel.layer.position.y  - (countLabel.frame.width / 2)
    let circlePath = UIBezierPath(roundedRect: CGRectMake(x - padding, y - padding, countLabel.frame.width + (2 * padding), countLabel.frame.width + (2 * padding)), cornerRadius: (countLabel.frame.width + (2 * padding)) / 2).CGPath

    let circleShape = CAShapeLayer()
    circleShape.path = circlePath
    circleShape.lineWidth = 3
    circleShape.strokeColor = UIColor.greenColor().CGColor
    circleShape.fillColor = UIColor.clearColor().CGColor

    self.view.layer.addSublayer(circleShape)
}

Modify padding variable to adjust the padding between the label and the circle. Cheers!