Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 913
xxtesaxx Avatar asked Nov 23 '16 06:11

xxtesaxx


People also ask

How to set constraints in stack view?

fill distribution creates constraints attaching the top of the first arranged subview to the top of the stack view, and the bottom of the last arranged subview to the bottom of the stack view. It also creates a constraint between the top/bottom of adjacent subviews with the spacing of the stack view.

How to use stack view in ios swift?

To use a stack view, open the Storyboard you wish to edit. Drag either a Horizontal Stack View or a Vertical Stack View out from the Object library, and position the stack view where desired. Next, drag out the stack's content, dropping the view or control into the stack.

What is stack view in ios swift?

Stack View Appearance The property that determines how a stack view lays out its subviews along its axis is distribution . Currently, it's set to Fill , which means the subviews will completely fill the stack view along its axis.


2 Answers

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

like image 129
xxtesaxx Avatar answered Nov 03 '22 08:11

xxtesaxx


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

like image 32
Chaolong_Liao Avatar answered Nov 03 '22 10:11

Chaolong_Liao