iPad Landscape and Portrait different layouts with Size Class

Question

How to design iPad Landscape and Portrait screens with different Layouts using Size class. I could find only w-regular and h-regular for both orientations. Example: I need to align 2 views vertically in portrait and horizontally in landscape using Size Class

Answer 1

Finally I found a solution :

if traitCollection.verticalSizeClass == .Regular && traitCollection.horizontalSizeClass == .Regular {

     var orientation:UIInterfaceOrientation = UIApplication.sharedApplication().statusBarOrientation;
     if orientation == UIInterfaceOrientation.LandscapeLeft || orientation == UIInterfaceOrientation.LandscapeRight {
            // orientation is landscape


     }  else {
            // orientation is portrait

     }
}

Answer 2

It appears to be Apple's intent to treat both iPad orientations as the same -- but as a number of us are finding, there are very legitimate design reasons to want to vary the UI layout for iPad Portrait vs. iPad Landscape.

However, please see this answer for another approach to adapting size classes to do what we need: https://stackoverflow.com/a/28268200/4517929

Answer 3

For Swift 3 it would look like this:

override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? {
    if UI_USER_INTERFACE_IDIOM() == .pad &&
        view.bounds.width > view.bounds.height {

        let collections = [UITraitCollection(horizontalSizeClass: .regular),
                           UITraitCollection(verticalSizeClass: .compact)]
        return UITraitCollection(traitsFrom: collections)

    }

    return super.overrideTraitCollection(forChildViewController: childViewController)
}

It will use wRhC instead of wRhR for iPad devices in landscape mode. Put this code to your base view controller, i.e. this rule will work for all controllers that were presented by this one. You can put any additional conditions here... For example, if you want this rule to be working only for specific view controller, your if operator would look like this:

    if UI_USER_INTERFACE_IDIOM() == .pad &&
        childViewController is YourSpecificViewController &&
        view.bounds.width > view.bounds.height {

        let collections = [UITraitCollection(horizontalSizeClass: .regular),
                           UITraitCollection(verticalSizeClass: .compact)]
        return UITraitCollection(traitsFrom: collections)

    }

Answer 4

Swift 4

override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? {
    if UIDevice.current.userInterfaceIdiom == .pad && UIDevice.current.orientation.isLandscape {
        return UITraitCollection(traitsFrom:[UITraitCollection(verticalSizeClass: .compact), UITraitCollection(horizontalSizeClass: .regular)])
    }
    return super.overrideTraitCollection(forChildViewController: childViewController)
}

I like to create a custom subclass of navigationController and then set a storyboards initial Navigation controller to that class. You can also do something similar with a ViewController.

Example:

import UIKit

class NavigationControllerWithTraitOverride: UINavigationController {
    
    // If you make a navigationController a member of this class the descendentVCs of that navigationController will have their trait collection overridden with compact vertical size class if the user is on an iPad and the device is horizontal.
    
    override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? {
        if UIDevice.current.userInterfaceIdiom == .pad && UIDevice.current.orientation.isLandscape {
            return UITraitCollection(traitsFrom:[UITraitCollection(verticalSizeClass: .compact), UITraitCollection(horizontalSizeClass: .regular)])
        }
        return super.overrideTraitCollection(forChildViewController: childViewController)
    }
}

Note: You should not override traitCollection as per the docs

Important

Use the traitCollection property directly. Do not override it. Do not provide a custom implementation.