Creating UILabel programmatically with constraints?

Question

What I want to do is create a new UILabel programmatically every time a certain action occurs in my code. I know the x, y, and height that I want to give the label, but I don't want to give it a set width. I want to constrain the sides so that the UILabel width is equal to the width of the screen, and so that the label width will change if the orientation is flipped.

I have considered using:

CGRect(x:, y:, width:, height:)

However, I would have to give it a set width if I use this, so I don't think it will work.

I also tried using:

CGPoint(x:, y:)

Then setting leading, trailing and height anchors, however, this doesn't seem to work either as even though it does compile, I get an error when I try creating a new UILabel.

I'm kind of new to programming in Swift so I'm not sure if there is an obvious fix to this.

check https://stackoverflow.com/a/40299281/6783598 – Ben Rockey May 30 '19 at 10:56 — Ben Rockey, May 30 '19 at 10:56

score 3 · Answer 1 · answered May 30 '19 at 11:00

You can use following code to create UILabel programmatically.

private let label: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.numberOfLines = 0
    label.text = "Hello World"
    return label
}()

Then inside your viewDidLoad()

addSubview(label)
NSLayoutConstraint.activate([
    topAnchor.constraint(equalTo: label.topAnchor),
    bottomAnchor.constraint(equalTo: label.bottomAnchor),
    leadingAnchor.constraint(equalTo: label.leadingAnchor),
    trailingAnchor.constraint(equalTo: label.trailingAnchor)
])

Why does the second part need to be in viewDidLoad? Could I have the second part (the constraints) in the same function I create the label (assuming I create the label within a function)? — Ken, May 30 '19 at 13:14

score 3 · Accepted Answer · answered May 30 '19 at 11:23

3

Like you said, we already have x, y and height available for the label, i.e.

let x: CGFloat = 0
let y: CGFloat = 0
let height: CGFloat = 50

Let's create a label using the above details. Also set the width of the label as UIScreen.main.bounds.width as per your requirement.

let label = UILabel(frame: CGRect(x: x, y: y, width: UIScreen.main.bounds.width, height: height))
label.text = "This is a sample text"

Don't forget to set label's translatesAutoresizingMaskIntoConstraints as false and add it to whatever subview you want.

label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

Add the relevant constraints of label with its superview - top, bottom, leading, height. You can definitely add bottom constraint if required. That totally depends upon your UI.

I'm adding the label to the top of the viewController's view.

NSLayoutConstraint.activate([
    label.heightAnchor.constraint(equalToConstant: height),
    view.topAnchor.constraint(equalTo: label.topAnchor),
    view.leadingAnchor.constraint(equalTo: label.leadingAnchor),
    view.trailingAnchor.constraint(equalTo: label.trailingAnchor)
    ])

answered May 30 '19 at 11:23

PGDev

23,751
6
34
88

Do I need to add a height constraint even if I've already set the height in CGRect()? Also, is it better to set view constraint equal to label, or label equal to view? – Ken May 30 '19 at 12:12
If you have height, you surely can. – PGDev May 30 '19 at 12:23
For some reason the line "label.translatesAutoresizingMaskIntoConstraints = false" is giving me problems (changing the y position to 0). When I comment it out, the label is in correct position, but when using it, label is at very top of view. – Ken May 30 '19 at 13:01
What constraints have you used? `label.translatesAutoresizingMaskIntoConstraints` must be `false` if you're using `autolayout` else it might produce unexpected results. – PGDev May 30 '19 at 13:03
I added the constraints you suggested but for leading and trailing anchors switched so that (eg) label.leadingAnchor.constraint(equalTo: view.leadingAnchor). I also have many other constraints in auto layout but for different things (eg buttons etc) which aren't related to labels at all – Ken May 30 '19 at 13:10
@Ken By the way, I think you do not need to specify height for label. Because, UILabel has already intrinsic content size which will be the size of the text it contains using whatever font you have configured it to use. – atalayasa May 30 '19 at 13:51

Creating UILabel programmatically with constraints?

2 Answers2