Question

我有一个带有这些约束的视图（图标）：

    let viewsDictionary = ["label": titleLabel, "labelMenu": labelMenu]

    let labelSize = calculateLableSize()

    let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[label]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary)
    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[label]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary)
    NSLayoutConstraint.activateConstraints(horizontalConstraints + verticalConstraints)

    widthLabelConstraint = NSLayoutConstraint(item: titleLabel, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.Width, multiplier: 1.0, constant: labelSize.width)
    widthLabelConstraint.active = true

我想在此图标上方添加另一个带有标签的视图。但是无法通过自动布局来实现这一目标。这就是我所做的：

    let viewsDictionary = ["label": titleLabel, "labelMenu": labelMenu]

    let labelSize = calculateLableSize()

    let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[label]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary)
    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[label]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary)
    NSLayoutConstraint.activateConstraints(horizontalConstraints + verticalConstraints)

    widthLabelConstraint = NSLayoutConstraint(item: titleLabel, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.Width, multiplier: 1.0, constant: labelSize.width)
    widthLabelConstraint.active = true
    //Labels
    let labelSize2 = calculateLableMenuSize()
    let horizontalConstraints2 = NSLayoutConstraint.constraintsWithVisualFormat("H:|[labelMenu]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary)
    let verticalConstraints2 = NSLayoutConstraint.constraintsWithVisualFormat("V:|[label]-[labelMenu]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: viewsDictionary)
    NSLayoutConstraint.activateConstraints(horizontalConstraints2 + verticalConstraints2)

    widthLabelConstraint2 = NSLayoutConstraint(item: labelMenu, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: titleLabel, attribute: NSLayoutAttribute.Width, multiplier: 1.0, constant: labelSize2.width)
    widthLabelConstraint2.active = true

Answer 1

以下是有关如何执行此操作的示例：

class ViewController: UIViewController {

    let label1 = UILabel()
    let label2 = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()

        label1.text = "Label 1"
        label2.text = "Label 2"
        view.addSubview(label1)
        view.addSubview(label2)

        view.translatesAutoresizingMaskIntoConstraints = false
        label1.translatesAutoresizingMaskIntoConstraints = false
        label2.translatesAutoresizingMaskIntoConstraints = false

        let viewsDict: [String: AnyObject] = ["label1": label1, "label2": label2, "topGuide": topLayoutGuide]

        let horizontalConstraintLabel1 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-[label1]-|", options: .AlignAllTop, metrics: nil, views: viewsDict)
        let horizontalConstraintLabel2 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-[label2]-|", options: .AlignAllTop, metrics: nil, views: viewsDict)
        let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[topGuide]-[label1][label2]", options: .AlignAllLeft, metrics: nil, views: viewsDict)

        view.addConstraints(horizontalConstraintLabel1)
        view.addConstraints(horizontalConstraintLabel2)
        view.addConstraints(verticalConstraints)
    }
}

我在topLayoutGuide添加了约束，以便您的观点不会与状态栏重叠。如果您不需要，可以删除它。

AutoLayout constraintsWithVisualFormat垂直居中两个视图

1 个答案: