title: iOS Scaling Constraints for Different Screen Sizes
body: <p>This is my first iOS app and I'm using Swift. I'm following tutorials on CodeWithChris.com. </p>
  
  <p>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.</p>
  
  <p>Here's my process for building the layout:</p>
  
  <ol>
  <li>Grab and parse JSON to NSArray.  Returns ["iPhone", "Android", "Windows", "iPad"]</li>
  <li>Create UIView object for each item in NSArray.  Set Name variable to the associated name.</li>
  <li>Place each UIView using addSubview()</li>
  <li>Apply height, width, and bottom-margin constraints to the UIView</li>
  <li>Set UIView position constraints based on its position in the row</li>
  <li>Add the icons (UIImageViews) to each UIView</li>
  <li>Set height and width constraints based on the type of device</li>
  <li>Add text labels</li>
  </ol>
  
  <p>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?</p>
  
  <p><strong>iPhone 6 with contentView in blue and UIViews in red</strong>
  <img src="https://i.stack.imgur.com/XL1jU.png" alt="enter image description here"></p>
  
  <p><strong>iPhone 6</strong>
  <img src="https://i.stack.imgur.com/fRC18.jpg" alt="iPhone 6 Simulator"></p>
  
  <p><strong>iPhone 5/5S/5c</strong>
  <img src="https://i.stack.imgur.com/3lPQk.png" alt="iPhone 5 Simulator"></p>
  
  <p><strong>iPhone 4S/4</strong>
  <img src="https://i.stack.imgur.com/1rJeT.png" alt="iPhone 4S Simulator"></p>
  
  <p>Here's where I add the device UIViews and apply constraints:</p>
  
  <pre><code>    // 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 &gt; 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)
          }
  </code></pre>
  
  <p>Here are the constraints that I apply to the icon images:</p>
  
  <pre><code>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])
  }
  </code></pre>