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.
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.
However adding a single line Label
and the multiline Label
to a Stack View
leads to the Stack View
becoming of zero
width
:
Adding this vertical Stack View
to another Stack View
makes the new new Stack View
of extremely wide width
:
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.