skip to Main Content

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?

2

Answers


  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

    enter image description here

    Landscape

    enter image description here

    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:

    enter image description here

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search