iOS：对齐两个 UILabel 的前导和尾随

Posted 2023-03-15

【中文标题】iOS：对齐两个 UILabel 的前导和尾随

【英文标题】：iOS: align two UILabels' leading and trailing

【发布时间】：2017-08-01 06:54:53

【问题描述】：

我需要对齐两个UILabel的前导和尾随，例如我想让两个标签这样对齐（方括号表示标签的边框）：

label1 =      [Hello World in Big Font]
label2 =      [welcome to the world in
               smaller font that wraps
               into two multiple lines]

然而结果是

label1 =      [                          Hello World in Big Font                      ]
label2 =      [welcome to the world in smaller font that wraps into two multiple lines]

我知道我可以调整第二个标签的首选字体宽度，但有更好的方法吗？

谢谢！

【问题讨论】：

你能上传你要求的视觉图像吗

【参考方案1】：

为第二个标签添加宽度约束，使其等于第一个标签的宽度。

【讨论】：

谢谢，我试试；但是从它的声音来看，它仍然可能导致意外的行为，这也满足它们的宽度相等。更新：它不起作用。

【参考方案2】：

请试试这个

label1.text = "your text"
label1.sizeToFit()

label2.frame.size = label1.frame.size
label2.numberOfLines = 0
label2.text = "your long text"

【讨论】：

设置他们的框架会起作用，但我正在使用自动布局，所以我不想弄乱框架......

【参考方案3】：

对于第一个标签，您只能应用顶部和前导约束。所以对于第二个标签，设置前导，宽度与第一个标签相同。

【讨论】：

谢谢让我试试，但我认为它会相似，因为它也可以通过使第一个标签与第二个标签具有相同的宽度来满足约束。

【参考方案4】：

SnapKit 很容易

label1.textAlignment = .left
self.view.addSubview(label1)
label1.snp.makeConstraints  (make) -> Void in
    make.height.left.top.equalTo(21)
    make.right. lessThanOrEqualTo(self.view).offset(-20)

label2.textAlignment = .left
label2.numberOfLines = 0
self.view.addSubview(label2)
label2.snp.makeConstraints  (make) -> Void in
    make.left.right.equalTo(label1)
    make.top.equalTo(label1.snp.bottom).offset(20)

在没有 SnapKit 的情况下使用自动布局

        let label1 = UILabel()
        label1.textAlignment = .left
        self.view.addSubview(label1)
        let constraintOne = NSLayoutConstraint.init(item: label1, attribute: .left, relatedBy: .equal, toItem: self.view, attribute: .left, multiplier: 1, constant: 20)
        let constraintTwo = NSLayoutConstraint.init(item: label1, attribute: .right, relatedBy: .lessThanOrEqual, toItem: self.view, attribute: .right, multiplier: 1, constant: -20)
        let constraintThree = NSLayoutConstraint.init(item: label1, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 20)
        let constraintFour = NSLayoutConstraint.init(item: label1, attribute: .top, relatedBy: .greaterThanOrEqual, toItem: self.view, attribute: .top, multiplier: 1, constant: 20)
        let label2 = UILabel()
        label2.textAlignment = .left
        label2.numberOfLines = 0
        self.view.addSubview(label2)
        let layoutConstraintOne = NSLayoutConstraint.init(item: label2, attribute: .left, relatedBy: .equal, toItem: label1, attribute: .left, multiplier: 1, constant: 0)
        let layoutConstraintTwo = NSLayoutConstraint.init(item: label2, attribute: .right, relatedBy: .equal, toItem: label1, attribute: .right, multiplier: 1, constant: 0)
        let layoutConstraintThree = NSLayoutConstraint.init(item: label2, attribute: .top, relatedBy: .equal, toItem: label1, attribute: .bottom, multiplier: 1, constant: 20)
        NSLayoutConstraint.activate([constraintOne, constraintTwo, constraintThree, constraintFour,layoutConstraintOne, layoutConstraintTwo,layoutConstraintThree ])

【讨论】：

没有SnapKit怎么样？

【参考方案5】：

在尝试了几种方法后，我找到了一种方法。

我没有对标签的前导和尾随进行约束，而是将它们全部设置为中心 X w.r.t superview，并在视图控制器的viewDidLayoutSubviews：

[label1 sizeToFit]

确保label1 的frame 足以容纳其文本，然后我这样做：

label2.preferredMaxLayoutWidth = label1.bounds.size.width

据说preferredMaxLayoutWidth

多行标签的首选最大宽度（以磅为单位）。

当应用布局约束时，此属性会影响标签的大小。在布局期间，如果文本超出此属性指定的宽度，则附加文本会流动到一个或多个新行，从而增加标签的高度。

确保label2'文本符合label1的宽度边界，如果宽度不足以容纳单行文本，则分成多行。

【参考方案6】：

尝试将第一个标签的内容拥抱优先级设置为.defaultHigh + 1.0。