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!
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.
>=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.]-0-[ space. You can do this with ][.<=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)