Visual Format Language: "Swift" Image constraints not working

Question

I'm having an issue with building constraints. I'm very new using Visual Format Language. I need help. I put my constraints for two images the height is okay but the horizontal placement is off. They seem to be placed at different lengths with different devices. I'm trying to keep them centered in a button but the two images are just obeying the -70- on the left and right side always despite the width of the phone. How do I tell it to adjust to the width of the phone? Oh consider I have images setTranslatesAutoresizingMaskIntoConstraints(false)

// Constraint Views
        let views = ["view": view,
                     "topHeader": topHeader,
                     "topBannerView": topBannerView,
                     "backGroundView": backGroundView,
                     "wolLogoView":wolLogoView,
                     "backGround2View": backGround2View,
                     "pictureView": pictureView,
                     "wolMottoView": wolMottoView,
                     "menuButton": menuButton,
                     "buttonMenuView": buttonMenuView,
                     "featListings": featListings,
                     "scrollView": scrollView,
                     "button1": button1,
                     "busLogoView": busLogoView,
                     "button2": button2,
                     "classLogoView": classLogoView,
                     "button3": button3,
                     "forwardLogoView": forwardLogoView,
            ]

        // CONSTRAINTS -----------------------------------------------------

        // backGround
        var constHBackground = NSLayoutConstraint.constraintsWithVisualFormat("H:|[backGround2View]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHBackground)
        var constVBackground = NSLayoutConstraint.constraintsWithVisualFormat("V:|-17-[backGround2View(>=100)]-0-[backGroundView(==backGround2View)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVBackground)


        // topHeader
        var constHHeader = NSLayoutConstraint.constraintsWithVisualFormat("H:[view]-(<=0)-[topHeader(==view)]", options: .AlignAllTop, metrics: nil, views: views)
        view.addConstraints(constHHeader)
        var constVHeader = NSLayoutConstraint.constraintsWithVisualFormat("V:[view]-(<=0)-[topHeader(17)]", options: .AlignAllCenterX, metrics: nil, views: views)
        view.addConstraints(constVHeader)


        // topBannerView
        var constHBanner = NSLayoutConstraint.constraintsWithVisualFormat("H:|[topBannerView(==view)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHBanner)
        var constVBanner = NSLayoutConstraint.constraintsWithVisualFormat("V:|-17-[topBannerView(50)]|", options: .AlignAllCenterX, metrics: nil, views: views)
        view.addConstraints(constVBanner)

        // wolLogo
        var constHWolLogo = NSLayoutConstraint.constraintsWithVisualFormat("H:|-55-[wolLogoView(>=0)]-60-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHWolLogo)
        var constVWolLogo = NSLayoutConstraint.constraintsWithVisualFormat("V:|-10-[wolLogoView(28)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVWolLogo)

        // picture view
        var constHPic = NSLayoutConstraint.constraintsWithVisualFormat("H:|[pictureView]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHPic)
        var constVPic = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView(>=0)]-0-[backGroundView]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVPic)

        // wolMotto
        var constHWolMotto = NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[wolMottoView(>=0)]-20-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHWolMotto)
        var constVWolMotto = NSLayoutConstraint.constraintsWithVisualFormat("V:|-69-[wolMottoView(35)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVWolMotto)

        // menuButton
        var constHMenuButton = NSLayoutConstraint.constraintsWithVisualFormat("H:|[menuButton(40)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHMenuButton)
        var constVMenuButton = NSLayoutConstraint.constraintsWithVisualFormat("V:|-22-[menuButton(40)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVMenuButton)

        // buttonMenuView
        var constHButtonMenu = NSLayoutConstraint.constraintsWithVisualFormat("H:|[buttonMenuView(==menuButton)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHButtonMenu)
        var constVButtonMenu = NSLayoutConstraint.constraintsWithVisualFormat("V:|-20-[buttonMenuView(==menuButton)]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVButtonMenu)

        // featListings
        var constHFeatListing = NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[featListings]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHFeatListing)
        var constVFeatListing = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView][featListings][scrollView]-130-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVFeatListing)

        // button3
        var constHButton3 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(>=0)-[button3(100)]-(<=0)-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHButton3)
        var constVButton3 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView][button3][scrollView]-130-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVButton3)

        // forwardLogoView
        var constHForwardLogoView = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(>=0)-[forwardLogoView(23)]-(<=0)-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHForwardLogoView)
        var constVForwardLogoView = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView][forwardLogoView(>=0)][scrollView]-130-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVForwardLogoView)

        // scrollView
        var constHScrollView = NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHScrollView)
        var constVScrollView = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView]-30-[scrollView(>=0)]-130-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVScrollView)

        // button1 and button2
        var constHButton1 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-15-[button1(<=220)]-20-[button2(==button1)]-15-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHButton1)
        var constVButton1 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView]-30-[scrollView(>=0)]-20-[button1(80)]-25-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVButton1)
        var constVButton2 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView]-30-[scrollView(>=0)]-20-[button2(80)]-25-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVButton2)

        // busLogoView and classLogoView
        var constHBusLogoView = NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[busLogoView]-100-[classLogoView(==busLogoView)]-50-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constHBusLogoView)
        var constVBusLogoView = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView]-30-[scrollView(>=0)]-20-[busLogoView(<=50)]-45-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVBusLogoView)
        var constVClassLogoView = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView]-30-[scrollView(>=0)]-20-[classLogoView(==busLogoView)]-45-|", options: nil, metrics: nil, views: views)
        view.addConstraints(constVClassLogoView)

I know this is hard to look at haha. Like I said this is my first time doing constraints. Sorry!

Answer 1

OK, just editing your constraints to remove over constraining views I can get it down to...

// busLogoView and classLogoView
var constHBusLogoView = NSLayoutConstraint.constraintsWithVisualFormat("|-70-[busLogoView][classLogoView(==busLogoView)]-70-|", 
                                                                       options: nil,
                                                                       metrics: nil,
                                                                       views: views)
view.addConstraints(constHBusLogoView)
var constVBusLogoView = NSLayoutConstraint.constraintsWithVisualFormat("V:|-85-[pictureView]-30-[scrollView]-20-[busLogoView(<=50)]-45-|",
                                                                       options: nil,
                                                                       metrics: nil,
                                                                       views: views)
view.addConstraints(constVBusLogoView)
var constVClassLogoView = NSLayoutConstraint.constraintsWithVisualFormat("V:[scrollView]-20-[classLogoView(==busLogoView)]-45-|",
                                                                         options: nil,
                                                                         metrics: nil,
                                                                         views: views)
view.addConstraints(constVClassLogoView)

A few notes about the changes.

1. Adding a >=0 constraint to width or height is redundant because all views have to have positive size in AutoLayout. So you can just not add a constraint at all.
2. In the second set of constraints you already position the picture view and scroll view. You don't need to position them again in the third set.
3. In the first set you added a ]-0-[ space. You can do this with ][.
4. In the first set of constraints you added an equal width constraint between the bus and class view. But you also said bus should be <=50 and you also gave constraints that go all the way from the left to the right of the superview. This is dangerous because if the superview is more tan 240 (70 + 70 + 50 + 50) across then those constraints will conflict each other (class and bus cannot be the same width with bus being less than or equal 50 width because that cannot add up to more than 240).

I suspect it was possibly number 4 that was causing your problem (possibly not) but apply these fixes and let me know what happens.

EDIT

In fact, looking again it looks like you already have picture view and scroll view constrained elsewhere so you don't need picture view in here at all...

// busLogoView and classLogoView
var constHBusLogoView = NSLayoutConstraint.constraintsWithVisualFormat("|-70-[busLogoView][classLogoView(==busLogoView)]-70-|", 
                                                                       options: nil,
                                                                       metrics: nil,
                                                                       views: views)
view.addConstraints(constHBusLogoView)
var constVBusLogoView = NSLayoutConstraint.constraintsWithVisualFormat("V:[scrollView]-20-[busLogoView(<=50)]-45-|",
                                                                       options: nil,
                                                                       metrics: nil,
                                                                       views: views)
view.addConstraints(constVBusLogoView)
var constVClassLogoView = NSLayoutConstraint.constraintsWithVisualFormat("V:[scrollView]-20-[classLogoView(==busLogoView)]-45-|",
                                                                         options: nil,
                                                                         metrics: nil,
                                                                         views: views)
view.addConstraints(constVClassLogoView)