iOS Scaling Constraints for Different Screen Sizes - ios

Question

This is my first iOS app and I'm using Swift. I'm following tutorials on CodeWithChris.com.
The user will be tapping on a series of icons to determine what device model they have. So far I've used a handful of constraints to get the icons placed properly on an iPhone 6 display. When using iPhone 5S/5c/5 or 4S/4 display sizes the icons and text still render at the full size for iPhone 6 and they go off the screen.
Here's my process for building the layout:
Grab and parse JSON to NSArray. Returns ["iPhone", "Android", "Windows", "iPad"]
Create UIView object for each item in NSArray. Set Name variable to the associated name.
Place each UIView using addSubview()
Apply height, width, and bottom-margin constraints to the UIView
Set UIView position constraints based on its position in the row
Add the icons (UIImageViews) to each UIView
Set height and width constraints based on the type of device
Add text labels
I'm using a bunch of constraints to place the UIViews and the UIImageViews. How can I make these constraints dynamic based on the device's screen size?
iPhone 6 with contentView in blue and UIViews in red
iPhone 6
iPhone 5/5S/5c
iPhone 4S/4
Here's where I add the device UIViews and apply constraints:
// Loop through the array of DeviceTypes to add each to the UIView
for index in 0...deviceTypes.count-1 {
// Grab the current device
var thisDevice:DeviceType = deviceTypes[index]
// Add to the view!
contentView.addSubview(thisDevice)
thisDevice.setTranslatesAutoresizingMaskIntoConstraints(false)
// How tall is the 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 is the 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 is the bottom of the UIView from the top of the 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 is 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 is 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 are the constraints that I apply to the icon images:
func addDeviceImages() {
// Set right image based on deviceType name
self.frontImageView.image = UIImage(named: self.Name!)
// Set translates autoresizing mask to fault
self.frontImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
// Add the imageview to the 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 the size constraints for the imageview based on the 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 the position of the imageview in the 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])
}

Answer 1

You are using the wrong kinds of constraints. Your width constraints are absolute - you are setting a fixed constant. Instead, make the constant 0, and the widths depend on the height, using a value for the multiplier that fixes the aspect ratio correctly. In this way, as the height changes, the width will change to match. Do the same sort of thing with the separation between the images - make the separation depend on the width of the superview, as a multiplier.