如何使用自动布局以编程方式水平对齐具有不同宽度的标签循环

Question

我想以编程方式使用 AutoLayout 约束将一组标签彼此对齐。

注意：每个标签必须有不同的 width.Like 我需要在数组 [50,40,70,30,20,10]

中分配

我找到了一些相关问题，但对我的情况没有用

for var i=0;i<7;i++{
    let DataLabel = UILabel()
    DataLabel.translatesAutoresizingMaskIntoConstraints = false

    DataLabel.text = NamingLabel[i]

    DataLabel.backgroundColor = UIColor.lightGrayColor()
    Self.view.addSubview(DataLabel)
}

如果约束是在可视化格式语言中，手段会更有用。

提前致谢。

Answer 1

您的标签需要以下 VFL 字符串：

要将每个标签放置在距离顶部 40pt 的位置，每个标签需要："V:|-40-[*labelName*]"。将 40 更改为最适合您的值。
要将标签并排放置并设置它们的宽度，您需要这个 VFL 字符串："H:|-[label0(50)][label1(40)][label2(70)][label3(30)][label4(20)][label5(10)][label6(30)]"

为了能够使用视觉格式语言，您已经创建了一个包含所有标签的字典。该字典的值为 UILabels，键为 Strings，您在 VFL 字符串中使用它们来定义应向哪个标签添加约束。在这种情况下，我使用键 "label0"、"label1"、"label2" 等

这是一个如何在循环中添加约束的示例：

let labelWidths = [50, 40, 70, 30, 20, 10, 30]
var labels = [String: UILabel]()
var allConstraints = [NSLayoutConstraint]()
var horizontalConstraintsString = "H:|-"

for i in 0..<7 {
    let labelName = "label\(i)"
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false

    // set text, textColor etc.

    view.addSubview(label)
    labels[labelName] = label

    // add vertical constraints to label
    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-40-[\(labelName)]", options: [], metrics: nil, views: labels)
    allConstraints.appendContentsOf(verticalConstraints)

    // add label to horizontal VFL string
    horizontalConstraintsString += "[\(labelName)(\(labelWidths[i]))]"
}

// get horizontal contraints from horizontal VFL string
let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(horizontalConstraintsString, options: [], metrics: nil, views: labels)
allConstraints.appendContentsOf(horizontalConstraints)

NSLayoutConstraint.activateConstraints(allConstraints)

更新：当您在评论中写道它仍然不适合您时，这是我的示例项目中的完整 ViewController class。所以只需在 Xcode 中创建一个新项目并将以下代码粘贴到 ViewController class:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor.lightGrayColor()

        let labelWidths = [50, 40, 70, 30, 20, 10, 30]
        var labels = [String: UILabel]()
        var allConstraints = [NSLayoutConstraint]()
        var horizontalConstraintsString = "H:|-"

        for i in 0..<7 {
            let labelName = "label\(i)"
            let label = UILabel()
            label.translatesAutoresizingMaskIntoConstraints = false
            label.text = "\(i)"
            label.layer.cornerRadius = 6
            label.clipsToBounds = true
            label.backgroundColor = UIColor.grayColor()
            view.addSubview(label)
            labels[labelName] = label

            // add vertical constraints to label
            let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-40-[\(labelName)]", options: [], metrics: nil, views: labels)
            allConstraints.appendContentsOf(verticalConstraints)

            // add label to horizontal VFL string
            horizontalConstraintsString += "[\(labelName)(\(labelWidths[i]))]"
        }

        // get horizontal contraints from horizontal VFL string
        let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(horizontalConstraintsString, options: [], metrics: nil, views: labels)
        allConstraints.appendContentsOf(horizontalConstraints)

        NSLayoutConstraint.activateConstraints(allConstraints)
    }
}

我为标签添加了背景颜色和圆角半径，这样您就可以看到一个标签的结束位置和下一个标签的开始位置。当您运行这个项目时，您应该看到以下内容：

如何使用自动布局以编程方式水平对齐具有不同宽度的标签循环

how to align loop of labels horizontally with different width using autolayout Programatically

labels

width

autolayout

programmatically-created

swift