iOS label in a circle

Question

Hi I am trying to draw a circle by using the layer for UILabel however, my label only shows the number not the background color or border that I have created for the label. why is this ? This is my code :

let countLabel = UILabel()
countLabel.text = "5"
let size:CGFloat = 55.0
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center
countLabel.font = UIFont.systemFont(ofSize: 14.0)
countLabel.bounds = CGRect(x : 0.0,y : 0.0,width : size, height :  size)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
//countLabel.layer.masksToBounds = true
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor

countLabel.center = CGPoint(x:200.0,y: 200.0)
countLabel.translatesAutoresizingMaskIntoConstraints = false
self.topContainer.addSubview(countLabel)
countLabel.topAnchor.constraint(equalTo: profileImage.topAnchor).isActive = true
countLabel.trailingAnchor.constraint(equalTo: profileImage.trailingAnchor, constant: 10).isActive = true        

I want to get something like this.

.

however the above doesn't output the orange colors. why ?

Answer 1

created a view and made it a circle and then added the label inside. Here is the code :

let size:CGFloat = 36
        let someView = UIView()
        someView.translatesAutoresizingMaskIntoConstraints = false
        someView.layer.cornerRadius = size/2
        someView.backgroundColor = .orange
        someView.layer.borderColor = UIColor.white.cgColor
        someView.layer.borderWidth = 2

        self.topContainer.addSubview(someView)

        someView.topAnchor.constraint(equalTo: profileImage.topAnchor).isActive = true
        someView.trailingAnchor.constraint(equalTo: profileImage.trailingAnchor, constant: 10).isActive = true
        someView.heightAnchor.constraint(equalToConstant: size).isActive = true
        someView.widthAnchor.constraint(equalToConstant: size).isActive = true

        let countLabel = UILabel()
        countLabel.text = "5"
        countLabel.textColor = UIColor.white
        countLabel.textAlignment = .center
        countLabel.font = UIFont.systemFont(ofSize: 14.0)

        countLabel.translatesAutoresizingMaskIntoConstraints = false
        someView.addSubview(countLabel)

        countLabel.centerXAnchor.constraint(equalTo: someView.centerXAnchor).isActive = true
        countLabel.centerYAnchor.constraint(equalTo: someView.centerYAnchor).isActive = true

Answer 2

try this

countLabel.layer.masksToBounds = YES;
countLabel.layer.cornerRadius = 17.5;//this should half of you laber layer
countLabel.backgroundColor = [ViewController colorFromHexString:@"#f36f34"];
countLabel.text = [NSString stringWithFormat:@"%d",CartItemCount];
countLabel.font = [UIFont fontWithName:@"Lato-Black" size:15.0];
countLabel.textColor = [ViewController colorFromHexString:@"#ffffff"];

Answer 3

Remove the contraints and set countLabel.centerto your container views center. Tested in Playground:

import UIKit
import PlaygroundSupport

let container = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))

let countLabel = UILabel()
countLabel.text = "5"
let size:CGFloat = 55.0
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center
countLabel.font = UIFont.systemFont(ofSize: 14.0)
countLabel.bounds = CGRect(x : 0.0,y : 0.0,width : size, height :  size)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.masksToBounds = true
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor

countLabel.center = container.center
countLabel.translatesAutoresizingMaskIntoConstraints = false
container.addSubview(countLabel)
//countLabel.topAnchor.constraint(equalTo: countLabel.topAnchor).isActive = true
//countLabel.trailingAnchor.constraint(equalTo: countLabel.trailingAnchor, constant: 10).isActive = true

PlaygroundPage.current.liveView = container

Answer 4

with that code:

let countLabel = UILabel()
countLabel.text = "5"
let size:CGFloat = 55.0
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center
countLabel.font = UIFont.systemFont(ofSize: 14.0)
countLabel.frame = CGRect(x : 50.0,y : 50.0,width : size, height :  size)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor


self.view.addSubview(countLabel)

i got this result:

Answer 5

Try adding below code:

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

Instead of:

// remove the below code of line from your code 
countLabel.layer.cornerRadius = size / 2

Answer 6

I guess you stumbled upon an bug here.

If I add a code base on your code into a playground, it outputs "empty image" instead of showing the view.

But if I create the label with a frame, it works.

Not working:

let countLabel = UILabel()
countLabel.frame = CGRect(x : 0.0,y : 0.0,width : size, height :  size)

Not working:

let countLabel = UILabel()
countLabel.bounds = CGRect(x : 0.0,y : 0.0,width : size, height :  size)

Not working:

let countLabel = UILabel()
countLabel.sizeToFit()

Working:

let size:CGFloat = 55.0
let countLabel = UILabel(frame: CGRect(x : 0.0,y : 0.0,width : size, height :  size))

Full code from my playground:

import UIKit
let size:CGFloat = 55.0

let countLabel = UILabel(frame: CGRect(x : 0.0,y : 0.0,width : size, height :  size))
countLabel.text = "5"
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center

countLabel.font = UIFont.systemFont(ofSize: 24.0)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.masksToBounds = true
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor

countLabel.translatesAutoresizingMaskIntoConstraints = false

result: