Stack View Distribution with Dynamic Label Width

Question

I have a UIStackView however, the first view of the subViews is a UILabel and it is not sizing it accordingly.

My code is as per below;

private let stackView: UIStackView = {
    let view = UIStackView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.axis = .horizontal
    view.distribution = .fillProportionally
    view.alignment = .trailing
    view.spacing = 8
    return view
}()

and I, of course, add my subViews within init as below;

    stackView.addArrangedSubview(currentBidLabel)
    stackView.addArrangedSubview(seperator)
    stackView.addArrangedSubview(adCreatedAtLabel)
    stackView.addArrangedSubview(moreButton)

My current result is as per the illustration below;

The result I'm looking for is the following;

Red = Dynamic Label Width (same as Blue)
Green = Fixed Width
Blue = Fill Remaining Space
Cyan = Fixed Width

**horizontal** stack view doesn't fit with `.trailing` alignment. Instead you should be using `.fill`/`.top`/`.center`/`.bottom`. Do you need the **AED 400** and **1d ago** both labels occupy the same width? — nayem, Dec 20 '19 at 07:30
When I do fill Proportionally, I get the views smashed up into 0 width... — ScottyBlades, Jun 02 '21 at 00:25

score 8 · Accepted Answer · edited Dec 20 '19 at 13:17

8

You should set the desired ContentHuggingPriority for each label. The following setup will be matched to your needs

redLabel.setContentHuggingPriority(. required, for: .horizontal)
greenLabel.setContentHuggingPriority(.required, for: .horizontal)
blueLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)
cyanLabel.setContentHuggingPriority(.required, for: .horizontal)

defaultLow means to fill the rest.
required means fit first.

And other values should be between these two.

edited Dec 20 '19 at 13:17

Sumit

41
5

answered Dec 20 '19 at 08:12

Mojtaba Hosseini

95,414
31
268
278

The image provided is an example of my existing result. I need the red label to be as wide as the text with the blue filling the remainder of space. – David Henry Dec 20 '19 at 10:44
Can you post an image of how you want it to be? – Mojtaba Hosseini Dec 20 '19 at 10:52
I have the desired result by red = .required | green = .required | blue = .defaultLow | cyan = .required (please update your answer so I can accept) – David Henry Dec 20 '19 at 10:52
hm. I misunderstood your example. I'm happy you have fixed your issue – Mojtaba Hosseini Dec 20 '19 at 10:58

Stack View Distribution with Dynamic Label Width

1 Answers1