UIStackView中的多行标签

Question

将多行标签(将换行符设置为Word Wrap)放入堆栈视图时,标签会立即丢失换行符并在一行中显示标签文本.

为什么会发生这种情况？如何在堆栈视图中保留多行标签？

Answer 1

正确的答案在这里:https://stackoverflow.com/a/43110590/566360

1. 嵌入UILabel内部UIView(编辑器 - >嵌入 - >视图)
   2. 使用约束以适合UILabel于UIView(例如,后空间,顶部空间,并导致空间的SuperView约束)

将UIStackView要伸出的UIView配合不当,而UIView将限制UILabel为多行.

Answer 2

对于具有UILabel其视图之一的水平堆栈视图,首先在Interface Builder中进行设置label.numberOfLines = 0.这应该允许标签有多于1行.当堆栈视图出现时,这最初无法为我工作stackView.alignment = .fill.简单地设置它stackView.alignment = .center.标签现在可以扩展到内部的多行UIStackView.

在苹果的文档说

对于除填充对齐之外的所有对齐,堆栈视图在计算垂直于堆栈轴的大小时使用每个已排列视图的内在内容大小属性

注意这里除了这个词.当.fill使用横向UIStackView不调整大小本身垂直使用布置子视图的尺寸.

Answer 3

• 首先将标签行数设置为0
• multiLine除非你给它一个固定的宽度,否则堆栈视图仍然不会增长.当我们修正它的宽度时,它会在达到该宽度时断开到多线,如图所示:

如果我们没有给堆栈视图一个固定的宽度,那么事情会变得模糊不清.堆栈视图随标签一起增长多长时间(如果标签值是动态的)？

希望这可以解决您的问题.

Answer 4

在尝试了以上所有建议后，我发现 UIStackView 不需要更改属性。我只是按如下方式更改 UILabels 的属性（标签已添加到垂直堆栈视图中）：

斯威夫特 4 示例：

[titleLabel, subtitleLabel].forEach(){
    $0.numberOfLines = 0
    $0.lineBreakMode = .byWordWrapping
    $0.setContentCompressionResistancePriority(UILayoutPriority.required, for: .vertical)
}

Answer 5

设置preferredMaxLayoutWidth到UILabel对我有用

self.myLabel.preferredMaxLayoutWidth = self.bounds.size.width;

Answer 6

只需在属性检查器中为标签设置行数为0即可.它会对你有用.

Answer 7

2020 年 11 月 26 日，Xcode 12.2、iOS 14.2。以下对我来说适用于垂直堆栈视图。它适用于所有设备和模拟器。我使用故事板，所有这些值都在故事板中设置。

用户界面标签

线路：0

UIStackView

对齐方式：填充

分配：按比例填充

UILabel 嵌入到视图中并固定到 UIView 的所有侧面。

Answer 8

iOS 9+

[textLabel sizeToFit]设置 UILabel 的文本后调用。

sizeToFit 将使用 preferredMaxWidth 重新布局多行标签。标签将调整 stackView 的大小，这将调整单元格的大小。除了将堆栈视图固定到内容视图之外，不需要其他约束。

Answer 9

对我来说，魔术是将 a 设置widthAnchor为UIStackView.

设置leadingAnchor和trailingAnchor不起作用，但设置centerXAnchor和widthAnchor使 UILabel 正确显示。

Answer 10

这是UIStackView由UILabel具有自动高度的 multiline 组成的垂直的完整示例。

标签基于 stackview 的宽度环绕，stackview 的高度基于标签的环绕高度。（使用这种方法，您不需要将标签嵌入UIView.）（Swift 5，iOS 12.2）

// A vertical stackview with multiline labels and automatic height.
class ThreeLabelStackView: UIStackView {
    let label1 = UILabel()
    let label2 = UILabel()
    let label3 = UILabel()

    init() {
        super.init(frame: .zero)
        self.translatesAutoresizingMaskIntoConstraints = false
        self.axis = .vertical
        self.distribution = .fill
        self.alignment = .fill

        label1.numberOfLines = 0
        label2.numberOfLines = 0
        label3.numberOfLines = 0
        label1.lineBreakMode = .byWordWrapping
        label2.lineBreakMode = .byWordWrapping
        label3.lineBreakMode = .byWordWrapping
        self.addArrangedSubview(label1)
        self.addArrangedSubview(label2)
        self.addArrangedSubview(label3)

        // (Add some test data, a little spacing, and the background color
        // make the labels easier to see visually.)
        self.spacing = 1
        label1.backgroundColor = .orange
        label2.backgroundColor = .orange
        label3.backgroundColor = .orange
        label1.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi."
        label2.text = "Hello darkness my old friend..."
        label3.text = "When I wrote the following pages, or rather the bulk of them, I lived alone, in the woods, a mile from any neighbor, in a house which I had built myself, on the shore of Walden Pond, in Concord, Massachusetts, and earned my living by the labor of my hands only."
    }

    required init(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
}

这是一个ViewController使用它的示例。

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let myLabelStackView = ThreeLabelStackView()
        self.view.addSubview(myLabelStackView)

        // Set stackview width to its superview.
        let widthConstraint  = NSLayoutConstraint(item: myLabelStackView, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.width, multiplier: 1, constant: 0)
        self.view.addConstraints([widthConstraint])
    }
}