Create Three Columns using Visual Formatting Language (Swift)

Question

I am trying to create a view with following layout using VFL (Visual Formatting Language)

-------------------------------------------------
| [LeftView]      [CenterView]       [RightView]|
-------------------------------------------------

But it is showing up like this

-------------------------------------------------
| [LeftView]                         [RightView]|
-------------------------------------------------

I think the problem is with this line

H:|-10-[cancel(70)]-[title]-[save(70)]-10-|

Here is the rest of the code I don't know what I am doing wrong. Here is my code :

    let headerView = UIView(frame: CGRectMake(0,0,mainFrame.width, headerHeight))
    headerView.backgroundColor = BG_COLOR
    self.addSubview(headerView)

    let cancelButton = UIButton(type: .Custom)
    cancelButton.translatesAutoresizingMaskIntoConstraints = false
    cancelButton.setTitle("Cancel", forState: .Normal)
    cancelButton.addTarget(self, action: "cancelButtonClick:", forControlEvents: .TouchUpInside)
    headerView.addSubview(cancelButton)

    let titleLabel = UILabel()
    titleLabel.text = "Bedroom"
    titleLabel.textColor = UIColor.whiteColor()
    headerView.addSubview(titleLabel)

    let saveButton = UIButton(type: .Custom)
    saveButton.titleLabel?.textAlignment = NSTextAlignment.Right
    saveButton.translatesAutoresizingMaskIntoConstraints = false
    saveButton.setTitle("Save", forState: .Normal)
    saveButton.addTarget(self, action: "saveButtonClick:", forControlEvents: .TouchUpInside)
    headerView.addSubview(saveButton)

    let views = ["title":titleLabel, "cancel":cancelButton,"save":saveButton,"header":headerView]

    headerView.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|[save]|",
            options:[.AlignAllCenterY],
            metrics:nil,
            views:views)
    )

    headerView.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|[cancel]|",
            options:[.AlignAllCenterY],
            metrics:nil,
            views:views)
    )

    headerView.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|[title]|",
            options:[.AlignAllCenterY],
            metrics:nil,
            views:views)
    )

    headerView.addConstraints(
        NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-10-[cancel(70)]-[title]-[save(70)]-10-|",
            options:[.AlignAllCenterY],
            metrics:nil,
            views:views)
    )

Answer 1

Your code looks fine. From the phenomenon you describe, the center view is not visible. This could have several reasons.

• It has no content.
• You set the hidden property somewhere.
• You have set the alpha property to zero.
• You are overriding the layout in layoutSubviews.
• The text of the label has the same color as the background.

As well as many other reasons... Anyway, it's not this line of VFL.