xxtesaxx
xxtesaxx

Reputation: 6429

iOS horizontal UIStackView with 3 labels - First label pushed other labels out of sight

I'm not sure if I understand UIStackView correctly. I have a UIStackView in a UITableViewCell. It contains 3 UILabel and is set to align and distribute Fill.

When my first labels text is not very long, it looks all good. The second and third label take up as much space as they need and they are aligned to the right. The first label takes up the rest of the space.

However, when the first label contains a lot of text, it pushes the other two labels out of the visible area. What do I have to do to make sure the second and third label are always visible and take as much space as they need to display their content. The first label should always take up the rest of the available space and then truncate its text with "..."

This is my configuration in the Storyboard:

UIStackView configuration

And this is how the result looks like in the TableView:

UIStackView result in UITableView

Upvotes: 8

Views: 6556

Answers (2)

xxtesaxx
xxtesaxx

Reputation: 6429

I tried the others solutions mentioned here and found them to be to difficult or unpractical. I didn't want to setup and change layout constraints programmatically so I continued playing around with the values. In the end, I found a very simple solution which does exactly what I wanted.

All I had to do was, setting the "Content Compression Resistance Priority" to be lower on my first label. Second and third label have 750 and also they have 251 and 252 for the "Content Hugging Priority" whereas the first label has a value of 749 and 250. This gives me exactly the results I wanted.

Thank you guys anyways. Sometimes I feel like I find solutions to my problems a lot faster after asking it here. I hope my answer will help somebody else in the future.

This: enter image description here

Gives me this as a result (notice that I set "isHidden" to true for second and third label on the third row): enter image description here

Upvotes: 18

Chaolong_Liao
Chaolong_Liao

Reputation: 256

you may consider placing those 3 views directly to the contentView instead of using UIStackView, and set the first label trailing to the second's

Upvotes: 1

Related Questions