iOS Badge like UILabel glitch

Question

please help me to make a simple badge like UILabel.

My code is:

let badgeLabel = UILabel(frame: CGRectMake(0, 0, 25, 25))
badgeLabel.backgroundColor = UIColor.clearColor()
badgeLabel.layer.backgroundColor = UIColor.redColor().CGColor
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = UIColor.whiteColor().CGColor

And in result I have a UILabel with tiny red stroke on white border:

enter image description here

so what is the required output? and how is your output wrong? — rakeshbs, Jan 27 '15 at 14:25
I don't think that thin red stroke on the outside will show up on a device, I don't see anything wrong with your code. — Logan, Jan 27 '15 at 14:31
Yes, this thin red stroke is on device (iPhone 5s and iPhone 6) — Ruslanas Kudriavcevas, Jan 27 '15 at 14:34
I believe you're having the same problem as [this question](http://stackoverflow.com/questions/24106703/why-is-there-a-rough-black-edge-when-rounding-corner-of-uibutton/24107422#24107422) and [this question](http://stackoverflow.com/questions/24106703/why-is-there-a-rough-black-edge-when-rounding-corner-of-uibutton/24107422#24107422), though I'm not sure it's exactly a duplicate. — Jesse Rusak, Jan 27 '15 at 14:38

score 1 · Answer 1 · answered Jan 28 '15 at 08:41

Try this.

let badgeLabel = UILabel(frame: CGRectMake(0, 0, 25, 25)) badgeLabel.backgroundColor = UIColor.redColor() badgeLabel.layer.backgroundColor = UIColor.clearColor().CGColor badgeLabel.layer.cornerRadius = 25/2 badgeLabel.layer.borderWidth = 3.0 badgeLabel.layer.borderColor = UIColor.whiteColor().CGColor

score 0 · Answer 2 · answered Jan 29 '15 at 12:20

Hey Check this latest code, sure it will work.

let roundRing = UILabel(frame: badgeLabel.frame)
    roundRing.backgroundColor = UIColor.clearColor()
    roundRing.layer.backgroundColor = UIColor.whiteColor().CGColor
    roundRing.layer.cornerRadius = 25/2
    roundRing.layer.borderWidth = 3.0
    roundRing.layer.borderColor = UIColor.whiteColor().CGColor
    self.view .addSubview(roundRing)

    let innerRegion = UILabel(frame: CGRectMake(3, 3, 19, 19))
    innerRegion.backgroundColor = UIColor.clearColor()
    innerRegion.layer.backgroundColor = UIColor.redColor().CGColor
    innerRegion.layer.cornerRadius = 19/2
    innerRegion.text="2"
    innerRegion.font=UIFont(name: "MarkerFelt-Thin", size: 10)!
    innerRegion.textAlignment=NSTextAlignment.Center
    roundRing.addSubview(innerRegion)

enter image description here

Thank you, its a good idea. U can replace ruoundRing UILabel with UIView, but in case when i need to expand my label and show i.e. "1236" i need to write many code : ] I was looking for a simpler way — Ruslanas Kudriavcevas, Jan 30 '15 at 13:10
you can reduce text size in that case or increase the circle size, anyway this post provide you answer , you can mark accept to this post. — NewStackUser, Jan 30 '15 at 14:30

score 0 · Answer 3 · answered Oct 13 '17 at 07:47

You are missing masksToBounds

for swift 3:

let badgeLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
badgeLabel.backgroundColor = .red
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.masksToBounds = true
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = .white

iOS Badge like UILabel glitch

3 Answers3