IOS Swift Question posted in
The official documentation can be found here.

Ios swift – How to keep UIView height consistent when UILabel text varies between 1 and 3 lines?

I have a view structure implemented in Swift using UIKit where a UIView contains a UILabel. The UILabel can have text with 1 line at minimum and up to 3 lines at maximum. I want to ensure that the UIView’s height remains consistent even when the UILabel has only 1 line of text.

Here are the details:

The UIView has 12-point constraints on all edges (top, leading, bottom, and trailing) to the UILabel.
The UILabel should grow to accommodate up to 3 lines, but the UIView should remain the same height even if the text has only 1 line.
How can I add a constraint to the UIView to ensure its height remains the same regardless of whether the UILabel has 1 line or up to 3 lines of text?

Any help or guidance would be greatly appreciated!

enter image description here

At this point, my code is something like below.

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create the parent view (container for the UILabel)
        let containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.backgroundColor = .lightGray
        view.addSubview(containerView)

        // Create the UILabel
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 3 // Max number of lines
        label.text = "This is a sample text for UILabel"
        label.font = UIFont.systemFont(ofSize: 17)

        containerView.addSubview(label)

        // Add constraints for the containerView (assuming it has 12 points padding to the edges)
        NSLayoutConstraint.activate([
            containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100)
        ])

        // Add constraints for the UILabel within the containerView
        NSLayoutConstraint.activate([
            label.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 12),
            label.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -12),
            label.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 12),
            label.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -12)
        ])
    }
}
Tags:

2

Answers


  1. 0

    You can provide a label that already is filled up with 3 lines, maybe a mock text such as lorem ipsum dolor.... And then adding edge constraints for this label as a placeholder. These steps could be:

    let placeholder = UILabe()
placeholder.numberOfLines = 3
placeholder.text = "Lorem ipsum dolor..." //<- a long text here
placeholder.alpha = 0 //<- hide the placeholder

container.addSubView(placeholder)
NSLayoutConstraint.activate([
    //Placeholder's constraints to fill the edge of container with inset = 12
])

//Real content here
let contentLabel = UILabel()
container.addSubView(contentLabel)
NSLayoutConstraint.activate([
    contentLabel.leadingAnchor.constraint(equalTo: placeholder.leadingAnchor),
    contentLabel.trailingAnchor.constraint(equalTo: placeholder.trailingAnchor),
    contentLabel.bottomAnchor.constraint(equalTo: placeholder.bottomAnchor),
    contentLabel.topAnchor.constraint(equalTo: placeholder.topAnchor)
])

    Output

    enter image description here

    Login or Signup to reply.
  2. 0

    To calculate the height:

    1. For fixed value you can set a UILabel with three lines and using UI debugging or on a button tap you can get the height.

    2. For dynamically calculating height use the following function with matching label properties

      func calculateLabelHeight(fontSize: CGFloat, lines: CGFloat) -> CGFloat {
 // Get single line height
 let label = UILabel()
 label.text = "Text"
 label.font = UIFont.systemFont(ofSize: fontSize)
 label.sizeToFit()

 return label.frame.height * lines
}

    After getting the height include the top and bottom constants and add constraint

    containerView.heightAnchor.constraint(equalToConstant: 85)

    After setting height you will get a view like this Centered label

    If you want to align label text at top, change the label bottom constraint to label.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor, constant: -12)

    Now the view will look like Top label

    If you want to add background color for label it will only show background along the text.

    To add the full background color with 12 spacing while keeping the text at top, need to add an extra container for label

        let labelContainer = UIView()
    labelContainer.translatesAutoresizingMaskIntoConstraints = false
    labelContainer.backgroundColor = .white
    containerView.addSubview(labelContainer)
    NSLayoutConstraint.activate([
        labelContainer.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 12),
        labelContainer.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -12),
        labelContainer.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 12),
        labelContainer.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -12)
    ])
    
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.numberOfLines = 3 // Max number of lines
    label.text = "This is a sample text for UILabel mg"
    label.font = UIFont.systemFont(ofSize: 17)
    labelContainer.addSubview(label)
    
    NSLayoutConstraint.activate([
        label.leadingAnchor.constraint(equalTo: labelContainer.leadingAnchor),
        label.trailingAnchor.constraint(equalTo: labelContainer.trailingAnchor),
        label.topAnchor.constraint(equalTo: labelContainer.topAnchor),
        label.bottomAnchor.constraint(lessThanOrEqualTo: labelContainer.bottomAnchor)
    ])

    Now background color can be added separately for labelContainer and label Top label background

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search