具有固定宽度的居中按钮会中断NSLayoutConstraint

时间:2019-02-06 06:31:36

标签: ios swift autolayout nslayoutconstraint ios-autolayout

我有一个有趣的问题。我的应用程序完全通过代码而不是故事板进行管理。我有一个以编程方式呈现的UIViewController。它创建一个按钮及其约束。

这是控制器代码的样子。

import Foundation
import UIKit

class CreateViewController: UIViewController {

    lazy var button: UIButton = {
        let button =  UIButton()
        button.layer.bounds = CGRect(x: 0, y: 0, width: 50, height: 50)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .green
        return button
    }()

    func setupViews() {
        self.view.addSubview(button)
    }

    func setupConstraints() {
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[button]-100-|", options: NSLayoutConstraint.FormatOptions(rawValue: 0), metrics: nil, views: ["button": button]))
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[button(50)]-|", options: NSLayoutConstraint.FormatOptions(rawValue: 0), metrics: nil, views: ["button": button]))
    }

    override func viewDidLoad() {
        setupViews()
        setupConstraints()
    }
}

它抛出此错误。

(
    "<NSLayoutConstraint:0x60000288bb60 UIButton:0x7fa1ab422680.leading == UILayoutGuide:0x6000032da760'UIViewLayoutMarginsGuide'.leading NSSpace(0)   (active)>",
    "<NSLayoutConstraint:0x60000288bb10 UIButton:0x7fa1ab422680.width == 50   (active)>",
    "<NSLayoutConstraint:0x60000288d7c0 UILayoutGuide:0x6000032da760'UIViewLayoutMarginsGuide'.trailing == UIButton:0x7fa1ab422680.trailing NSSpace(0)   (active)>",
    "<NSLayoutConstraint:0x6000028fe990 'UIView-Encapsulated-Layout-Width' UIView:0x7fa1ab4224a0.width == 375   (active)>",
    "<NSLayoutConstraint:0x60000288fe30 'UIView-leftMargin-guide-constraint' H:|-(16)-[UILayoutGuide:0x6000032da760'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':UIView:0x7fa1ab4224a0 )>",
    "<NSLayoutConstraint:0x60000288d180 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x6000032da760'UIViewLayoutMarginsGuide']-(16)-|(LTR)   (active, names: '|':UIView:0x7fa1ab4224a0 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x60000288d7c0 UILayoutGuide:0x6000032da760'UIViewLayoutMarginsGuide'.trailing == UIButton:0x7fa1ab422680.trailing NSSpace(0)   (active)>

我的目标很简单。我希望按钮在底部上方100像素,水平居中,并具有固定的宽度和高度。

这是实例化控制器的方式。它存在于

内部
        let nav2 = UINavigationController()
        let create = CreateViewController()
        nav2.viewControllers = [create]
        nav2.navigationBar.isTranslucent = false
        ...
        let tabs = UITabBarController()
        tabs.viewControllers = [..., nav2, ...]

        tabs.delegate = self

对于理解为什么违反这些约束的任何帮助将不胜感激!如果问题的任何部分不清楚,请告诉我。

仅供参考,结果视图如下:

the button is not centered here

2 个答案:

答案 0 :(得分:2)

您可以尝试以下添加约束的方法,该约束更加快捷,简洁

func setupConstraints() {
    let topConstraint = NSLayoutConstraint(item: button,
                                           attribute: .top,
                                           relatedBy: .equal,
                                           toItem: self.view,
                                           attribute: .top,
                                           multiplier: 1,
                                           constant: 100)

    let bottomConstraint = NSLayoutConstraint(item: button,
                                              attribute: .left,
                                              relatedBy: .equal,
                                              toItem: self.view,
                                              attribute: .left,
                                              multiplier: 1,
                                              constant: 100)
    self.view.addConstraints([topConstraint,bottomConstraint])

}

尽管我想知道为什么在初始化时可以声明x和y时对按钮添加约束。如果您需要帮助,我也将代码添加到了按钮居中的位置,希望对您有所帮助。

 lazy var button: UIButton = {
    let button =  UIButton()
    button.frame = CGRect(x: UIScreen.main.bounds.width/2-25, y: UIScreen.main.bounds.height/2-25, width: 50, height: 50)
    button.backgroundColor = .green
    return button
     }()  

答案 1 :(得分:1)

使用视觉格式语言将元素居中很困难。

您可以使用.centerXAnchor 轻松地做到这一点:

class CreateViewController: UIViewController {

    lazy var button: UIButton = {
        let button =  UIButton()
        // next line is not needed
//      button.layer.bounds = CGRect(x: 0, y: 0, width: 50, height: 50)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .green
        return button
    }()

    func setupViews() {
        self.view.addSubview(button)
    }

    func setupConstraints() {

        NSLayoutConstraint.activate([

            // button width of 50
            button.widthAnchor.constraint(equalToConstant: 50.0),

            // button height of 50
            button.heightAnchor.constraint(equalToConstant: 50.0),

            // bottom of button 100-pts from bottom of view
            // note: contant is negative!
            button.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -100),

            // center the button horizontally
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            ])

    }

    override func viewDidLoad() {
        setupViews()
        setupConstraints()
    }
}