以编程方式向Views添加约束

时间:2016-04-21 12:38:02

标签: swift constraints

这是我添加约束的简单代码:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let contentView = UIView()
        contentView.backgroundColor = UIColor.greenColor()
        contentView.frame.size.width = 250
        contentView.frame.size.height = 100
        contentView.center = view.center
        view.addSubview(contentView)

        let userNameLabel = UILabel()
        userNameLabel.translatesAutoresizingMaskIntoConstraints = false
        userNameLabel.text = "Username:"
        contentView.addSubview(userNameLabel)

        let passwordLabel = UILabel()
        passwordLabel.translatesAutoresizingMaskIntoConstraints = false
        passwordLabel.text = "Password:"
        contentView.addSubview(passwordLabel)

        let usernameTextField = UITextField()
        usernameTextField.translatesAutoresizingMaskIntoConstraints = false
        usernameTextField.borderStyle = .RoundedRect
        contentView.addSubview(usernameTextField)

        let passwordTextField = UITextField()
        passwordTextField.translatesAutoresizingMaskIntoConstraints = false
        passwordTextField.borderStyle = .RoundedRect
        contentView.addSubview(passwordTextField)

        let submitButton = UIButton()
        submitButton.translatesAutoresizingMaskIntoConstraints = false
        submitButton.setTitle("Submit", forState: .Normal)
        submitButton.setTitleColor(UIColor.redColor(), forState: .Normal)
        submitButton.setTitleColor(UIColor.redColor(), forState: .Highlighted)
        contentView.addSubview(submitButton)

        // For Username
        NSLayoutConstraint(item: userNameLabel, attribute: .Leading, relatedBy: .Equal, toItem: contentView, attribute: .LeadingMargin, multiplier: 1, constant: 0).active = true
        NSLayoutConstraint(item: userNameLabel, attribute: .Top, relatedBy: .Equal, toItem: contentView, attribute: .Top, multiplier: 1, constant: 10).active = true
        NSLayoutConstraint(item: usernameTextField, attribute: .Trailing, relatedBy: .Equal, toItem: contentView, attribute: .TrailingMargin, multiplier: 1.0, constant: 0.0).active = true
        NSLayoutConstraint(item: usernameTextField, attribute: .Leading, relatedBy: .Equal, toItem: userNameLabel, attribute: .Trailing, multiplier: 1.0, constant: 3).active = true
        NSLayoutConstraint(item: userNameLabel, attribute: .Baseline, relatedBy: .Equal, toItem: usernameTextField, attribute: .Baseline, multiplier: 1.0, constant: 0.0).active = true
        // For Password
        NSLayoutConstraint(item: passwordLabel, attribute: .Leading, relatedBy: .Equal, toItem: contentView, attribute: .LeadingMargin, multiplier: 1, constant: 0).active = true
        NSLayoutConstraint(item: passwordLabel, attribute: .Top, relatedBy: .Equal, toItem: userNameLabel, attribute: .Bottom, multiplier: 1, constant: 15).active = true
        NSLayoutConstraint(item: passwordTextField, attribute: .Trailing, relatedBy: .Equal, toItem: contentView, attribute: .TrailingMargin, multiplier: 1.0, constant: 0.0).active = true
        NSLayoutConstraint(item: passwordTextField, attribute: .Leading, relatedBy: .Equal, toItem: passwordLabel, attribute: .Trailing, multiplier: 1.0, constant: 3).active = true
        NSLayoutConstraint(item: passwordLabel, attribute: .Baseline, relatedBy: .Equal, toItem: passwordTextField, attribute: .Baseline, multiplier: 1.0, constant: 0.0).active = true
        // For Button
        NSLayoutConstraint(item: submitButton, attribute: .Top, relatedBy: .Equal, toItem: passwordLabel, attribute: .Bottom, multiplier: 1.0, constant: 8.0).active = true
        NSLayoutConstraint(item: submitButton, attribute: .CenterX, relatedBy: .Equal, toItem: contentView, attribute: .CenterX, multiplier: 1.0, constant: 0.0).active = true
    }

}

但是为什么它看起来像这样,我希望passWordTextField的领先3passWordLabel的尾随:

enter image description here

我看这一行,找不到任何问题:

NSLayoutConstraint(item: passwordTextField, attribute: .Leading, relatedBy: .Equal, toItem: passwordLabel, attribute: .Trailing, multiplier: 1.0, constant: 3).active = true

任何帮助将不胜感激。感谢

2 个答案:

答案 0 :(得分:2)

问题是标签和文本字段具有相同的拥抱优先级。您需要定义哪个优先级。例如:

userNameLabel.setContentHuggingPriority(251, forAxis: .Horizontal)
passwordLabel.setContentHuggingPriority(251, forAxis: .Horizontal)

答案 1 :(得分:0)

问题是:这一行:

NSLayoutConstraint(item: passwordTextField, attribute: .Leading, relatedBy: .Equal, toItem: passwordLabel, attribute: .Trailing, multiplier: 1.0, constant: 3).active = true

应该出现在此行之前:

NSLayoutConstraint(item: passwordTextField, attribute: .Trailing, relatedBy: .Equal, toItem: contentView, attribute: .TrailingMargin, multiplier: 1.0, constant: 0.0).active = true

密码的代码如下:

 // For Password
 NSLayoutConstraint(item: passwordLabel, attribute: .Leading, relatedBy: .Equal, toItem: contentView, attribute: .LeadingMargin, multiplier: 1, constant: 0).active = true
 NSLayoutConstraint(item: passwordLabel, attribute: .Top, relatedBy: .Equal, toItem: userNameLabel, attribute: .Bottom, multiplier: 1, constant: 15).active = true
 NSLayoutConstraint(item: passwordTextField, attribute: .Leading, relatedBy: .Equal, toItem: passwordLabel, attribute: .Trailing, multiplier: 1.0, constant: 3).active = true
 NSLayoutConstraint(item: passwordTextField, attribute: .Trailing, relatedBy: .Equal, toItem: contentView, attribute: .TrailingMargin, multiplier: 1.0, constant: 0.0).active = true
 NSLayoutConstraint(item: passwordLabel, attribute: .Baseline, relatedBy: .Equal, toItem: passwordTextField, attribute: .Baseline, multiplier: 1.0, constant: 0.0).active = true

enter image description here