ios - 如何在ios swift中使用自动布局以编程方式将两个标签并排放置在中心和间距？

Question

我对 swift 和 IOS 非常陌生，我想以编程方式将两个标签并排水平居中放置。下面是我的代码

let secondLabel : UILabel = {
    let label = UILabel()
    label.text = "1234"
    label.textAlignment = .center
    label.translatesAutoresizingMaskIntoConstraints = false
    label.backgroundColor = UIColor.blue
    return label
}()

let thirdLabel : UILabel = {
    let label = UILabel()
    label.text = "5678"
    label.textAlignment = .center
    label.translatesAutoresizingMaskIntoConstraints = false
    label.backgroundColor = UIColor.red
    return label
}()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.

    setupLayout()
}

private func setupLayout(){
    view.addSubview(secondLabel)
    //secondLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    secondLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
    secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true

    view.addSubview(thirdLabel)
    //thirdLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    thirdLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    thirdLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
    thirdLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true

    self.view.addConstraint(NSLayoutConstraint(
        item: thirdLabel,
        attribute: .left,
        relatedBy: .equal,
        toItem: secondLabel,
        attribute: .right,
        multiplier: 1.0,
        constant: 10
        ))
}

但这就是它现在的样子

请帮我把标签移到中心

Answer 1

您可以使用 UIStackView 来解决您的问题。请在您的 setupLayout 方法中更新以下代码。

 private func setupLayout(){
        let stackview = UIStackView()
        stackview.axis = .horizontal
        stackview.spacing = 10
        stackview.translatesAutoresizingMaskIntoConstraints = false
        stackview.addArrangedSubview(secondLabel)
        secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
        secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true

        stackview.addArrangedSubview(thirdLabel)
        thirdLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
        thirdLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true

        self.view.addSubview(stackview)
        stackview.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        stackview.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    }

输出：-