Swift: draw a circle around the label

Question

I am trying to draw a circle around a label at runtime in a TableViewCell cell.

I can understand how to get it around the mark, but I have some problems with focusing it around the mark.

The circle seems to be drawn to the right and closer to the middle of the mark.

Here is my code so far, I'm sure it will be easy for someone to run out of steam.

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

Wow, that was what I thought was a stupid mistake.

X and Y are calculated from the middle, and not from the upper left corner when working with BezierPath.

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 2

. , / , . , - , .

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

:

, iPad:

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 3

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

Answer 4

Try the following:

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

Change the fill variable to adjust the indentation between the label and the circle. Hurrah!