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?

Solution 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)
    }
}

Solution 2

I know this is an old post but, just for info.I tried the below steps and it is working as expected.

Step1. Select View controller, Select any from size class control. And add the Views in this mode. Any Mode Step2. Change the mode to portrait all iPhones from size class control, add constraints for the view for portrait mode. Potrait mode Step3. Similarly Change the mode to landscape all iPhones, add constraints for the view for landscape mode.

Please note: The constraints are independent now for portrait and landscape