Swift：在標簽周圍畫一個圓圈

Question

我試圖在運行時在TableViewCell的單元格中圍繞標簽繪制一個圓圈。

我可以弄清楚如何在標簽周圍大致得到它，但是我很難將它集中在標簽周圍。

圓圈似乎正在向標簽的右側和中間繪制。

到目前為止，這是我的代碼，我相信這對於某人來說很容易。

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

您只需在標簽的圖層上使用圓角半徑即可。 您將標簽制作為方形，然后將其圖層的圓角半徑設置為標簽寬度/高度的一半，這將使其完美呈圓形。 您將邊框寬度設置為大於零的值，並將邊框顏色設置為要使用的筆觸顏色。

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 2

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

Answer 3

呃，這是我的想法，愚蠢的錯誤。

在處理BezierPath時，X和Y是從中間而不是從左上角計算的。

所以x和y的代碼應該如下：

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

Answer 4

嘗試這個：

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

修改填充變量以調整標簽和圓圈之間的填充。 干杯!