Multiline label in UIStackView
When putting multiline label (with linebreak set to Word Wrap) into a stack view, the label immediately loses the linebreak and displays the label text in one line instead.
Why is this happening and how does one preserve multiline label within a stack view?
The correct answer is here:
https://stackoverflow.com/a/43110590/566360
- Embed the
UILabel
inside aUIView
(Editor -> Embed In -> View) - Use constraints to fit the
UILabel
to theUIView
(for example, trailing space, top space, and leading space to superview constraints)
The UIStackView
will stretch out the UIView
to fit properly, and the UIView
will constrain the UILabel
to multiple lines.
For a horizontal stack view that has a UILabel
as one of its views, in Interface Builder firstly set label.numberOfLines = 0
. This should allow the label to have more than 1 line. This initially failed to work for me when the stack view had stackView.alignment = .fill
. To make it work simply set stackView.alignment = .center
. The label can now expand to multiple lines within the UIStackView
.
The Apple documentation says
For all alignments except the fill alignment, the stack view uses each arranged view’s intrinsicContentSize property when calculating its size perpendicular to the stack’s axis
Note the word except here. When .fill
is used, the horizontal UIStackView
does NOT resize itself vertically using the arranged subviews' sizes.
- First set the label number of lines to 0
- The stack view still won't grow to
multiLine
unless you give it a fixed width. When we fix its width then it break to multiline when that width is reached as shown:
If we don't give a fixed width to the stack view then things get ambiguous. How long will the stack view grow with the label (if the label value is dynamic)?
Hope this can fix your issue.
Setting preferredMaxLayoutWidth to the UILabel worked for me
self.myLabel.preferredMaxLayoutWidth = self.bounds.size.width;