XCode: How to change layout of views between landscape and portrait mode

Question

In portrait mode I have four views on top of one another from the top to the bottom of the view controller (see image).

I then want to change the position o

Answer 1

We used to set up different sets of constraints and activate/deactivate them based upon orientation change. But nowadays can use size classes and "vary for traits".

For example, I start with a simple view and choose a compact width size class and then choose "Vary for traits":

I then add the appropriate constraints and click on "Done varying":

I then choose a "regular width size class" and repeat the process ("Vary for traits", add the constraints, click on "Done varying":

You then end up with a scene that will have a completely different set of constraints active for compact width size classes and regular width size classes. I.e. when I run the app, if the device rotates, the new constraints are activated:

For more information, see WWDC 2016 videos on adaptive layouts:

• https://developer.apple.com/videos/play/wwdc2016/222
• https://developer.apple.com/videos/play/wwdc2016/233

Answer 2

I use arrays of constraints and activate/deactivate according to orientation.

var p = [NSLayoutConstraint]()
var l = [NSLayoutConstraint]()
var initialOrientation = true
var isInPortrait = false

override func viewDidLoad() {
    super.viewDidLoad()
    // add any subviews here
    view.turnOffAutoResizing()        
    // add constraints here....
    //    common constraints you can set their isActive = true
    //    otherwise, add in to portrait(p) and landscape(l) arrays
}

override func viewWillLayoutSubviews() {
    super.viewDidLayoutSubviews()
    if initialOrientation {
        initialOrientation = false
        if view.frame.width > view.frame.height {
            isInPortrait = false
        } else {
            isInPortrait = true
        }
        view.setOrientation(p, l)
    } else {
        if view.orientationHasChanged(&isInPortrait) {
            view.setOrientation(p, l)
        }
    }
}
extension UIView {
    public func turnOffAutoResizing() {
        self.translatesAutoresizingMaskIntoConstraints = false
        for view in self.subviews as [UIView] {
           view.translatesAutoresizingMaskIntoConstraints = false
        }
    }
    public func orientationHasChanged(_ isInPortrait:inout Bool) -> Bool {
        if self.frame.width > self.frame.height {
            if isInPortrait {
                isInPortrait = false
                return true
            }
        } else {
            if !isInPortrait {
                isInPortrait = true
                return true
            }
        }
        return false
    }
    public func setOrientation(_ p:[NSLayoutConstraint], _ l:[NSLayoutConstraint]) {
        NSLayoutConstraint.deactivate(l)
        NSLayoutConstraint.deactivate(p)
        if self.bounds.width > self.bounds.height {
            NSLayoutConstraint.activate(l)
        } else {
            NSLayoutConstraint.activate(p)
        }
    }
}

My needs to distinguish portrait or landscape require using something other than size classes, as my app is universal and iPad (unless using split or slide out view) is always normal size. Also, you may get use viewWillTransistion(toSize:) or viewDidLoadSubviews() instead of 'viewWillLoadSubviews()` - but always test, as these may be executed more than once on an orientation change!