0

Just started developing an iOS app in Xcode.

In the Storyboard I have eight set of Labels which need to be put inside horizontal/vertical Stack Views. One of them is a multiline Label i.e. Lines set to 2 and text has a newline inserted with Ctrl+Enter. Eight Labels with one being multiline

What I want to achieve is something like (more of a conceptual illustration than a visual one):

+---------------Stack View+1-(100%)-------------------+
| +--Stack View 2-(50%)-+ | +---Stack View 3-(50%)--+ |
| |Label 1              | | | +--Stack+View 4-----+ | |
| +---------------------+ | | |Label 3|Label 4    | | |
| |Label 2              | | | +-------+-----------+ | |
| |Multiline            | | +-----------------------+ |
| +---------------------+ | | +--Stack+View 5-----+ | |
|                         | | |Label 5|Label 6    | | |
|                         | | +-------+-----------+ | |
|                         | +-----------------------+ |
|                         | | +--Stack+View 6-----+ | |
|                         | | |Label 7|Label 8    | | |
|                         | | +-------+-----------+ | |
|                         | +-----------------------+ |
+-------------------------+---------------------------+

Stack View 1 should be as wide as the screen. Stack Views 2 and 3 should expand to fill half of the screen width. Both should expand accordingly. Labels 4, 6, 8 should expand to fill remaining width of Stack View 3, whereas 3, 5, 7 should be only be wide enough to fit the text.

I'll be using constraints to the outermost horizontal Stack View to hug the edges.

Adding single line Labels to Stack Views and even adding these Stack Views to Stack View works as expected. Some single line Labels added to Stack Views

However adding a single line Label and the multiline Label to a Stack View leads to the Stack View becoming of zero width: Single line and multiline Labels added to a Stack View

Adding this vertical Stack View to another Stack View makes the new new Stack View of extremely wide width: Stack Views added to another Stack View

Doing the same without a multiline Label works as expected. How do I achieve my intended layout with multiline Label?

I tried setting constraints on the Stack Views but nothing i have tried seems to be working.

Edit: I found the solution here: Multiline label in UIStackView. My issue was not having multiple Labels (which I was searching for earlier) but rather the multiline Label. Embedding the multiline Label inside a View before adding to the Stack View solved the issue.

Kanchu
  • 3,721
  • 1
  • 15
  • 14

1 Answers1

1

The outermost stackview needs 3 constraints, top, leading and trailing. It will infer the height constraint from its contentSize.

You will need to set the horizontal content hugging and horizontal content compression values on the substackviews so the outermost stackView knows which stack to compress / expand if it has too little / too much space (unless you choose a different distribution method than fill, like equal sizing).

You need to do the same thing for the stackviews with multiple labels. You should also set the label behavior properly (ie word wrap, shrink to fit, numberOfLines, etc).

Josh Homann
  • 15,933
  • 3
  • 30
  • 33
  • Tried setting constraints with no luck... Specific to my case, what would be the sequence? – Kanchu Nov 25 '17 at 13:25
  • those are the correct constraints. Did you set the horizontal content hugging and content compression for every subview? I cannot tell you what values to use here because I don't know what your intent is as far as the label widths go. When you are using stackviews you either need to have 1) a fixed proportion of view or spacing or 2) an idea of how the elements are going to shrink and expand when there is more or less space so you can set the content attributes accordingly. – Josh Homann Nov 25 '17 at 13:34
  • Embedding the multiline `Label` inside a `View` before adding to `StackView` solved the issue. – Kanchu Nov 26 '17 at 02:59