Set Autolayout Constraints Relative to Device Size

Question

I fell into the trap of relying on Autolayout. I currently have a ViewController with a ton of UIViews and realized they're distorted on smaller devices (iPhone 4s and 5).

Is it possible to set constraints in Autolayout relative to device size.

For example, I have one UIView with several other UIViews aligned edges. I would like to change the height in Autolayout of that one UIView to equal half the device height.

Answer 1

Yes. There is a way to constrain by screen size.

They are called size classes.

In Interface Builder look on the bar at the bottom of the screen where it says wAny hAny, those are pulldowns. Select the combination of height and width of the device and orientation you want to constrain it to, and when you create the constraints in that mode, they'll be specific to that size/orientation. You can also add and modify size-specific constraints in the inspector, constraint editor pane, in Interface Builder.

If you need to tweak some corner case things that you aren't able accomplish conveniently enough with size clases, you can make an IBOutlet for a constraint and refer to it in your code, and modify it when the view appears and changes, similar to the following example. This is much easier and safer than trying to generate constraints from scratch programmatically.

Note: When modifying a NSLayout constraint via an IB outlet, you can only tweak the constant field, not multiplier because multiplier is readonly at runtime. So whatever scaling factor you use (if any) must be multiplied into whatever final value you use for constant.

@IBOutlet var tableYTopConstraint : NSLayoutConstraint!

override func viewWillAppear(animated: Bool) {
     adjustViewLayout(UIScreen.mainScreen().bounds.size)
}

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
        adjustViewLayout(size)
}

func adjustViewLayout(size: CGSize) {
    switch(size.width, size.height) {
    case (320, 480):                        // iPhone 4S in portrait
        tableYTopConstraint.constant = 0
    case (480, 320):                        // iPhone 4S in landscape
        tableYTopConstraint.constant = 0
    case (320, 568):                        // iPhone 5/5S in portrait
        tableYTopConstraint.constant = 0
    case (568, 320):                        // iPhone 5/5S in landscape
        tableYTopConstraint.constant = 0
    case (375, 667):                        // iPhone 6 in portrait
        tableYTopConstraint.constant = 0
    case (667, 375):                        // iPhone 6 in landscape
        tableYTopConstraint.constant = 0
    case (414, 736):                        // iPhone 6 Plus in portrait
        tableYTopConstraint.constant = 0
    case (736, 414):                        // iphone 6 Plus in landscape
        tableYTopConstraint.constant = 0
    default:
        break
    }
    view.setNeedsLayout()

}