Swift - layout - stretch UILabel

Question

I have this layout with UILabel and UIImageView:

enter image description here

I want the UILabel to have maximal possible length, while UIIMageView minimal. Basically, I want "xxx" label to be stretched and have same width as "text_1_____xxx" label. How to achieve this?

Elements are inited as:

var textContentLabel: UILabel = {
    let lbl = UILabel()
    lbl.textAlignment = .right
    lbl.text = ""
    lbl.numberOfLines = 1
    lbl.adjustsFontSizeToFitWidth = true
    lbl.backgroundColor = UIColor.green
    lbl.translatesAutoresizingMaskIntoConstraints = false
    return lbl
}()

var textContentIcon: UIImageView = {
    let img = UIImageView()        
    img.image = nil
    img.backgroundColor = UIColor.orange
    img.contentMode = .scaleAspectFit
    img.translatesAutoresizingMaskIntoConstraints = false        
    return img
}()

My current anchors are:

NSLayoutConstraint.activate([
            textContentLabel.topAnchor.constraint(equalTo: self.contentView.topAnchor),
            textContentLabel.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0),
            textContentLabel.trailingAnchor.constraint(equalTo: textContentIcon.leadingAnchor, constant: 0),
            textContentLabel.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor),

            textContentIcon.topAnchor.constraint(equalTo: self.contentView.topAnchor),
            textContentIcon.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: 0),
            textContentIcon.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor)
        ])

EDIT:

I am looking for solution that is not based on setting constraints between labels "xxx" and "text_1______xxx"


Show source
| swift   | ios   | autolayout   2017-08-17 09:08 3 Answers

Answers to Swift - layout - stretch UILabel ( 3 )

  1. 2017-08-17 09:08

    I assume that size of the image can change based on the content (otherwise you could set it's dimensions through width/height constraints. This is exactly what content hugging priority is for, it tells autolayout engine which elements whats to keep its size to minimum and which wants to expand. To use it, just call

    setContentHuggingPriority(252, for: .horizontal)
    

    on your image view (can be set through storyboards as well). The value 252 can be anything than what you have set on your label (default 250). You might need to play with numbers a bit if you have more than two elements and if your layout is even more complicated, you might need to use setContentCompressionResistancePriority as well

  2. 2017-08-17 09:08

    If you want them to be the same width, there's a constraint for that:

    NSLayoutConstraint(item: label2, attribute: .width, relatedBy: .equal, toItem: label1, attribute: .width, multiplier: 1.0, constant: 0.0)
    

    This makes it so label2's width is always equal to label1's width.

  3. 2017-08-17 10:08

    Please update your code like this:

    NSLayoutConstraint.activate([
                textContentLabel.topAnchor.constraint(equalTo: self.contentView.topAnchor),
                textContentLabel.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0),
                textContentLabel.trailingAnchor.constraint(equalTo: textContentIcon.leadingAnchor, constant: 0),
                textContentLabel.heightAnchor.constraint(equalToConstant: 50),
    
                textContentIcon.topAnchor.constraint(equalTo: self.contentView.topAnchor),
                textContentIcon.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: 0),
                textContentIcon.heightAnchor.constraint(equalTo: 50)
    
                //Now your xxxLabel
                xxxLabel.topAnchor.constraint(equalTo: textContentLabel.bottomAnchor),
                xxxLabel.leadingAnchor.constraint(equalTo: textContentLabel.leadingAnchor, constant: 0),
                xxxLabel.trailingAnchor.constraint(equalTo: textContentLabel.trailingAnchor, constant: 0),
                xxxLabel.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor)
    
    
            ])
    

Leave a reply to - Swift - layout - stretch UILabel

◀ Go back