Search code examples
iosswiftuilabeluistackview

iOS: UILabel multi-line text get truncated in horizontal UIStackView


enter image description here

Issue: UILabel multi-line text get truncated in horizontal UIStackView.

I have a horizontal UIStackView, in this stack view, the left side is an UIImage, right side is a UILabel with some text.

The UILabel is a multiline UILabel, it should wrap itself if text is very long. However, in runtime it got truncated.

Any ideas on how to fix it? My code below:

self.imageView = self.createIconImageView(...)
self.textLabel.text = text
self.textLabel.numberOfLines = 0 // which specify it is multi-line

let stackView = UIStackView()
stackView.axis = .horizontal
stackView.alignment = .fill
stackView.distribution = .fillProportionally
stackView.spacing = 8.0
stackView.addArrangedSubview(self.imageView)
stackView.addArrangedSubview(self.textLabel)

self.containerView.addSubview(stackView)
stackView.edgesToSuperview(insets: Style.containerInsets)

Solution

  • alignment

    /* The layout of the arrangedSubviews transverse to the axis;
     e.g., leading/trailing edges in a vertical stack
     */
    @property(nonatomic) UIStackViewAlignment alignment;
    

    For .fill

    StackView will automatically generate these layout attributes for you.

     imageView.bottom == label.bottom
     imageView.top == label.top
    

    the size of stackView depend on the 'voice' image's size or size layout attributes of imageView as it is fixed instead of adjustable UILable which namely have the low priority.


    For .center

    StackView achieve a decent height by look for the max height between your label and imageView.

     _UILayoutSpacer.bottom >= imageView.bottom
     _UILayoutSpacer.bottom >= label.bottom
     _UILayoutSpacer.top <= imageView.top
     _UILayoutSpacer.top <= label.top