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:
And this is how the result looks like in the TableView:
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.
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.
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.
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:
Gives me this as a result (notice that I set "isHidden" to true for second and third label on the third row):
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With