2015-09-22 79 views
3

我想在運行時在TableViewCell的單元格中圍繞標籤繪製一個圓。Swift:圍繞標籤繪製一個圓

我可以弄清楚如何將它粗略地放在標籤的周圍,但我在將標籤集中在標籤周圍時遇到了一些麻煩。

圓圈似乎正在繪製到右側和朝向標籤的中間。

這是我的代碼到目前爲止,我敢肯定,這將很容易有人轟炸。

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

回答

1

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

X和Y是在處理貝塞爾路徑時從中間而不是從左上角計算出來的。

因此,對於x和y的代碼應該如下:

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

嘗試這種情況:

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

修改填充可變調整標籤和圓之間的填充。 乾杯!

12

您可以改爲在標籤的圖層上使用圓角半徑。您將標籤設爲正方形,然後將其圖層的角半徑設置爲標籤寬度/高度的一半,這將使其完美圓化。您將邊框寬度設置爲大於零的值,並將邊框顏色設置爲要使用的筆觸顏色。

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 

它會是這個樣子:

enter image description here

雖然是完整的代碼是這樣的單一視圖控制器的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) 
    } 

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