以编程方式设置约束的问题

Question

我整天都在为此苦苦挣扎 - 我需要在导航栏中添加一个视图作为 rightBarButtonItems，其中包含一个 UILabel 和一个 UIImageView。因此，我需要以编程方式创建视图，设置约束以编程方式将视图添加为 rightBarButtonItems。

我想要实现的是：

.

.

这就是我得到的：

好像不管我做什么，我都不能移动向下箭头..它需要在标签的右侧，并与centerY对齐。

这是我的代码：

    //Elements
    let containerView = UIView()
    containerView.frame = CGRect(x: 0, y: 0, width: 90, height: 30)
    containerView.backgroundColor = UIColor.blueColor()

    let codedLabel:UILabel = UILabel()
    codedLabel.frame = CGRect(x: 0, y: 0, width: 80, height: 30)
    codedLabel.textAlignment = .Center
    codedLabel.text = "FILTRER"
    codedLabel.numberOfLines = 1
    codedLabel.textColor = UIColor.redColor()
    codedLabel.font = UIFont(name: Constants.ubuntuBold, size: 18.0)!
    codedLabel.backgroundColor = UIColor.lightGrayColor()
    codedLabel.sizeToFit()

    let codedImageView: UIImageView = UIImageView()
    codedImageView.frame = CGRect(x: 0, y: 0, width: 10, height: 5.7)
    codedImageView.image = UIImage(named: "dragToRefreshArrow")
    codedImageView.backgroundColor = UIColor.cyanColor()

    containerView.addSubview(codedLabel)
    containerView.addSubview(codedImageView)

    containerView.sizeToFit()

    //Constraints
   containerView.translatesAutoresizingMaskIntoConstraints = false

    //Label
    NSLayoutConstraint(item: codedLabel, attribute: .Top, relatedBy: .Equal, toItem: containerView, attribute: .Top, multiplier: 1, constant: 0).active = true
    NSLayoutConstraint(item: codedLabel, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1, constant: 0).active = true
    NSLayoutConstraint(item: codedLabel, attribute: .Leading, relatedBy: .Equal, toItem: containerView, attribute: .Leading, multiplier: 1, constant: 0).active = true
    NSLayoutConstraint(item: codedLabel, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0).active = true

    //ImageView
    NSLayoutConstraint(item: codedImageView, attribute: .Leading, relatedBy: .Equal, toItem: codedLabel, attribute: .Leading, multiplier: 1, constant: 0).active = true
    NSLayoutConstraint(item: codedImageView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0).active = true
    NSLayoutConstraint(item: codedImageView, attribute: .CenterY, relatedBy: .Equal, toItem: codedLabel, attribute: .Top, multiplier: 1, constant: 0).active = true

    let item = UIBarButtonItem()
    item.customView = containerView

    var negativeSpace:UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FixedSpace, target: nil, action: nil)
    negativeSpace.width = -10.0

    self.navigationItem.rightBarButtonItems = [negativeSpace, item]

有人知道我做错了什么吗？ :-)

Answer 1

为了使标签（codedLabel）右侧的箭头（codedImageView），对齐CenterY和容器内部（ContainerView），您需要以下约束：

• codedImageView.leading = codedLabel.trailing => 这会将 codedImageView 向右移动 codedLabel
• codedImageView.centerY = codedLabel.centerY => 这将垂直居中
• codedImageView.trailing = containerView.trailing => 这会将它设置在容器视图的末尾和内部。

这产生了以下约束：

NSLayoutConstraint(item: codedImageView, attribute: .Leading, relatedBy: .Equal, toItem: codedLabel, attribute: .Trailing, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: codedImageView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: codedImageView, attribute: .CenterY, relatedBy: .Equal, toItem: codedLabel, attribute: .CenterY, multiplier: 1, constant: 0).active = true

看看第一个和第三个约束有何不同？在您的示例中，您将其附加到 codedLabel 的左上角而不是右中角。

Answer 2

您需要将约束添加到视图。类似的东西：

let myConstraint = NSLayoutConstraint(....)
myConstraint.active = ture
self.containerView.addConstraints(myConstraint)