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

Time:06-09

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)

CodePudding user response:

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
  • Related