Different portrait/landscape views in storyboard and Swift

Question

I'm using storyboard and Xcode 6 to design app views but I'm facing this issue: I want to assign different positions of subviews for portrait and landscape modes. For example:

Since now I've achieved this programmatically with willRotateToInterfaceOrientation and status bar to get ipad orientation.

With Xcode 6, iPhone layouts for portrait and landscape are different, but are the same for iPad (regular, regular). It's is possible to achieved those positions with constraints?

Answer 1

Yes, you can do this with constraints.

First, you need to create constraints to the superview, not to the nearest view. Neighboring views will be changing positions, so we DO NOT want the constraints to be relative to the other views. See the screenshot below for an example of how to set the constraints.

Next, link the constraints you'll be modifying to IBOutlets so we can modify them programmatically. For your example, these would be the constraints:

@IBOutlet var greenViewTrailingConstraint: NSLayoutConstraint!
@IBOutlet var greenViewBottomConstraint: NSLayoutConstraint!

@IBOutlet var redViewTopConstraint: NSLayoutConstraint!
@IBOutlet var redViewLeadingConstraint: NSLayoutConstraint!
@IBOutlet var redViewBottomConstraint: NSLayoutConstraint!

@IBOutlet var blueViewTrailingConstraint: NSLayoutConstraint!
@IBOutlet var blueViewTopConstraint: NSLayoutConstraint!
@IBOutlet var blueViewLeadingConstraint: NSLayoutConstraint!

Finally, update the constraint constants based on UIInterfaceOrientation. Again, using your example, the code looks something like this:

override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) {
    let padding: CGFloat = 16.0

    // since we're calling this before the rotation, the height and width are swapped
    let viewHeight = self.view.frame.size.width
    let viewWidth = self.view.frame.size.height

    // if landscape
    if UIInterfaceOrientationIsLandscape(toInterfaceOrientation) {
        greenViewTrailingConstraint.constant = (viewWidth/2.0) + (padding/2.0)
        greenViewBottomConstraint.constant = padding

        blueViewTopConstraint.constant = (viewHeight/2.0) + (padding/2.0)
        blueViewTrailingConstraint.constant = padding
        blueViewLeadingConstraint.constant = (viewWidth/2.0) + (padding/2.0)

        redViewTopConstraint.constant = padding
        redViewBottomConstraint.constant = (viewHeight/2.0) + (padding/2.0)
        redViewLeadingConstraint.constant = (viewWidth/2.0) + (padding/2.0)
    } else { // else portrait
        greenViewBottomConstraint.constant = (viewHeight/2.0) + (padding/2.0)
        greenViewTrailingConstraint.constant = padding

        blueViewTopConstraint.constant = (viewHeight/2.0) + (padding/2.0)
        blueViewTrailingConstraint.constant = (viewWidth/2.0) + (padding/2.0)
        blueViewLeadingConstraint.constant = padding

        redViewLeadingConstraint.constant = (viewWidth/2.0) + (padding/2.0)
        redViewBottomConstraint.constant = padding
        redViewTopConstraint.constant = (viewHeight/2.0) + (padding/2.0)
    }
}