swift - iOS Scaling Constraints for Different Screen Sizes -

this first ios app , i'm using swift. i'm following tutorials on codewithchris.com.

the user tapping on series of icons determine device model have. far i've used handful of constraints icons placed on iphone 6 display. when using iphone 5s/5c/5 or 4s/4 display sizes icons , text still render @ full size iphone 6 , go off screen.

here's process building layout:

1. grab , parse json nsarray. returns ["iphone", "android", "windows", "ipad"]
2. create uiview object each item in nsarray. set name variable associated name.
3. place each uiview using addsubview()
4. apply height, width, , bottom-margin constraints uiview
5. set uiview position constraints based on position in row
6. add icons (uiimageviews) each uiview
7. set height , width constraints based on type of device
8. add text labels

i'm using bunch of constraints place uiviews , uiimageviews. how can make these constraints dynamic based on device's screen size?

iphone 6 contentview in blue , uiviews in red

iphone 6

iphone 5/5s/5c

iphone 4s/4

here's add device uiviews , apply constraints:

    // loop through array of devicetypes add each uiview     index in 0...devicetypes.count-1 {          // grab current device         var thisdevice:devicetype = devicetypes[index]           // add view!         contentview.addsubview(thisdevice)         thisdevice.settranslatesautoresizingmaskintoconstraints(false)           // how tall device uiview         var heightconstraint:nslayoutconstraint = nslayoutconstraint(item: thisdevice, attribute: nslayoutattribute.height, relatedby: nslayoutrelation.equal, toitem: nil, attribute: nslayoutattribute.notanattribute, multiplier: 1, constant: 200)          // how wide device uiview         var widthconstraint:nslayoutconstraint = nslayoutconstraint(item: thisdevice, attribute: nslayoutattribute.width, relatedby: nslayoutrelation.equal, toitem: nil, attribute: nslayoutattribute.notanattribute, multiplier: 1, constant: 130)          // how far bottom of uiview top of contentview         var bottommarginconstraint:nslayoutconstraint = nslayoutconstraint(item: thisdevice, attribute: nslayoutattribute.top, relatedby: nslayoutrelation.equal, toitem: contentview, attribute: nslayoutattribute.top, multiplier: 1, constant: 100)           // add thisdevice's uiview constraints         thisdevice.addconstraints([heightconstraint, widthconstraint])         contentview.addconstraint(bottommarginconstraint)         thisdevice.backgroundcolor = uicolor.redcolor()           // set uiview position constraints based on place in row         if (index > 0) {             // device second or further in row             var deviceontheleft = devicetypes[index-1]              var leftmarginconstraint:nslayoutconstraint = nslayoutconstraint(item: thisdevice, attribute: nslayoutattribute.left, relatedby: nslayoutrelation.equal, toitem: deviceontheleft, attribute: nslayoutattribute.right, multiplier: 1, constant: 10)              contentview.addconstraint(leftmarginconstraint)         }         else {             // device first in row             var leftmarginconstraint:nslayoutconstraint = nslayoutconstraint(item: thisdevice, attribute: nslayoutattribute.left, relatedby: nslayoutrelation.equal, toitem: contentview, attribute: nslayoutattribute.left, multiplier: 1, constant: 0)              // add constraint             contentview.addconstraint(leftmarginconstraint)         } 

here constraints apply icon images:

func adddeviceimages() {      // set right image based on devicetype name     self.frontimageview.image = uiimage(named: self.name!)      // set translates autoresizing mask fault     self.frontimageview.settranslatesautoresizingmaskintoconstraints(false)      // add imageview view     self.addsubview(self.frontimageview)      if (self.name == "windows") {         self.addimagesizeconstraints(90, height: 160)     }      else if (self.name == "ipad"){         self.addimagesizeconstraints(120, height: 180)     }      else if (self.name == "iphone"){         self.addimagesizeconstraints(85, height: 175)     }      else if (self.name == "android"){         self.addimagesizeconstraints(95, height: 185)     }  }  func addimagesizeconstraints(width: cgfloat, height: cgfloat) {      // set size constraints imageview based on values passed in     var heightconstraint:nslayoutconstraint = nslayoutconstraint(item: self.frontimageview, attribute: nslayoutattribute.height, relatedby: nslayoutrelation.equal, toitem: nil, attribute: nslayoutattribute.notanattribute, multiplier: 1, constant: height)      var widthconstraint:nslayoutconstraint = nslayoutconstraint(item: self.frontimageview, attribute: nslayoutattribute.width, relatedby: nslayoutrelation.equal, toitem: nil, attribute: nslayoutattribute.notanattribute, multiplier: 1, constant: width)      self.frontimageview.addconstraints([heightconstraint, widthconstraint])       // set position of imageview in uiview     var verticalconstraint:nslayoutconstraint = nslayoutconstraint( item: self.frontimageview, attribute: nslayoutattribute.bottom, relatedby: nslayoutrelation.equal, toitem: self, attribute: nslayoutattribute.bottom, multiplier: 1, constant: -25)      var horizontalconstraint:nslayoutconstraint = nslayoutconstraint( item: self.frontimageview, attribute: nslayoutattribute.left, relatedby: nslayoutrelation.equal, toitem: self, attribute: nslayoutattribute.left, multiplier: 1, constant: 5)      self.addconstraints([horizontalconstraint,verticalconstraint]) } 

you using wrong kinds of constraints. width constraints absolute - setting fixed constant. instead, make constant 0, , widths depend on height, using value multiplier fixes aspect ratio correctly. in way, height changes, width change match. same sort of thing separation between images - make separation depend on width of superview, multiplier.