How can I change screens layout for landscape and portrait in iOS

Question

I have totally different layouts for landscape and portrait.

In portrait the screen does not have the menu view of full height and half width on left and in landscape the screen contains the menu view on left side.

How to do that in iOS?

Answer 1

You can do it programmatically, declare your menuContainer view under your class controller like that:

let menuContainer: UIView = {
    let v = UIView()
    v.backgroundColor = .lightGray
    v.alpha = 0
    v.translatesAutoresizingMaskIntoConstraints = false
    
    return v
}()

Now in viewDidLoad set constraints:

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .darkGray
    
    view.addSubview(menuContainer)
    menuContainer.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    menuContainer.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    menuContainer.trailingAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    menuContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}

after that write the detect func (I add animation but you can't do it):

fileprivate func detectRotation() {
    if UIDevice.current.orientation == UIDeviceOrientation.landscapeLeft {
        print("landscape left")
        UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, animations: {
            self.menuContainer.alpha = 1
            self.view.layoutIfNeeded()
        }, completion: nil)
    } else if UIDevice.current.orientation == UIDeviceOrientation.landscapeRight {
        print("landscape right")
        UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, animations: {
            self.menuContainer.alpha = 1
            self.view.layoutIfNeeded()
        }, completion: nil)
    } else {
        print("porrait")
        UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut, animations: {
            self.menuContainer.alpha = 0
            self.view.layoutIfNeeded()
        }, completion: nil)
    }
}

override viewWillTransition func and call detectRotation func:

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    detectRotation()
}

This is the result:

portrait

Landscape

To show in landscape and portrait:

let myButton: UIButton = {
    let b = UIButton()
    b.backgroundColor = .white
    b.setTitle("Section 1", for: .normal)
    b.setTitleColor(.black, for: .normal)
    b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
    b.titleLabel?.adjustsFontSizeToFitWidth = true
    b.titleLabel?.minimumScaleFactor = 0.5
    b.translatesAutoresizingMaskIntoConstraints = false

    return b
}()

let myButton2: UIButton = {
    let b = UIButton()
    b.backgroundColor = .white
    b.setTitle("Section 2", for: .normal)
    b.setTitleColor(.black, for: .normal)
    b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
    b.titleLabel?.adjustsFontSizeToFitWidth = true
    b.titleLabel?.minimumScaleFactor = 0.5
    b.translatesAutoresizingMaskIntoConstraints = false

    return b
}()

let myButton3: UIButton = {
    let b = UIButton()
    b.backgroundColor = .white
    b.setTitle("Section 3", for: .normal)
    b.setTitleColor(.black, for: .normal)
    b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
    b.titleLabel?.adjustsFontSizeToFitWidth = true
    b.titleLabel?.minimumScaleFactor = 0.5
    b.titleLabel?.textAlignment = .left
    b.translatesAutoresizingMaskIntoConstraints = false

    return b
}()

let myButton4: UIButton = {
    let b = UIButton()
    b.backgroundColor = .white
    b.setTitle("Section 4", for: .normal)
    b.setTitleColor(.black, for: .normal)
    b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
    b.titleLabel?.adjustsFontSizeToFitWidth = true
    b.titleLabel?.minimumScaleFactor = 0.5
    b.titleLabel?.textAlignment = .left
    b.translatesAutoresizingMaskIntoConstraints = false

    return b
}()

let menuContainer: UIView = {
    let v = UIView()
    v.backgroundColor = .lightGray
    v.alpha = 1
    v.translatesAutoresizingMaskIntoConstraints = false

    return v
}()

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .darkGray
    
    view.addSubview(menuContainer)
    menuContainer.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    menuContainer.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
    menuContainer.trailingAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    menuContainer.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    let stackViewMenu = UIStackView(arrangedSubviews: [myButton, myButton2, myButton3, myButton4])
    stackViewMenu.axis = .vertical
    stackViewMenu.distribution = .fillEqually
    stackViewMenu.spacing = 2
    stackViewMenu.translatesAutoresizingMaskIntoConstraints = false
    
    menuContainer.addSubview(stackViewMenu)
    stackViewMenu.topAnchor.constraint(equalTo: menuContainer.safeAreaLayoutGuide.topAnchor).isActive = true
    stackViewMenu.leadingAnchor.constraint(equalTo: menuContainer.leadingAnchor).isActive = true
    stackViewMenu.trailingAnchor.constraint(equalTo: menuContainer.trailingAnchor).isActive = true
    stackViewMenu.heightAnchor.constraint(equalTo: menuContainer.heightAnchor, multiplier: 0.5).isActive = true
}

The result:

Answer 2

If you only want to show menu on landscape.

Check the device orientation by: UIDevice.current.orientation == .landscapeLeft || UIDevice.current.orientation == .landscapeRight

Then show the menu by using menu.isHidden = false to show the menu. You can set the menu constraints either using storyboard or programmatically.