Search code examples
iosswiftuiviewautolayoutconstraints

How can I fix constraint in the landscape mode in swift?


I have an question about how can I fix the issue with the constraints in the landscape mode with view?

I set the constraint height for the view which I created in the bottom of the view controller = 80 but when the device enter in the landscape mode I need to set the height constraint for this view to 40 , but in that case I have an issue with the constraint the issue is (Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (

   "<NSLayoutConstraint:0x7d175100 UIView:0x7d5eeef0.height == 40   (active)>",
    "<NSLayoutConstraint:0x7d5f8ef0 UIView:0x7d5eeef0.height == 80   (active)>"

)
)

the following is my code :

 var toolBarView:UIView = {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: 80))
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = UIColor(red: 23 / 255.0, green: 120 / 255.0, blue: 104 / 255.0, alpha: 1.0)
        return view
    }()


     func setupToolBarViewInPortrait() {

            toolBarView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
            toolBarView.rightAnchor.constraint(equalTo:view.rightAnchor).isActive = true
            toolBarView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
            toolBarView.heightAnchor.constraint(equalToConstant: 80).isActive = true

 }

 func setupToolBarViewInLandScape() {

        toolBarView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        toolBarView.rightAnchor.constraint(equalTo:view.rightAnchor).isActive = true
        toolBarView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        toolBarView.heightAnchor.constraint(equalToConstant: 40).isActive = true


    }




override func viewWillLayoutSubviews() {

        let oriantation = UIDevice.current.orientation
        if oriantation.isLandscape {
           setupNavigationBarWithObjectsInLandScape()
           setupToolBarViewInLandScape()

        }else if oriantation.isPortrait {
            setupToolBarViewInPortrait()
        }

    }

Solution

  • As i am always late in community so posting answer is late. I have handled your case like this way. you can try.

    At first my View controller is just like this.

    enter image description here

    And for iphone 7plus height constraint is 128 for portrait and in landscape i want 55 for height constraint.

    What i did.

    Step 1:

    pull the height constraint outlet so that i can change it programmatically.

    enter image description here

    Step 2:

    I defined some predefined value for calculation.

    var  SCREEN_HEIGHT = UIScreen.main.bounds.size.height
    var  BASE_SCREEN_HEIGHT:CGFloat = 736.0 //My base layout is iphone 7 plus and 128(redViewheight) according to this.
    var  HEIGHT_RATIO = SCREEN_HEIGHT/BASE_SCREEN_HEIGHT
    

    Step 3:

    made a function and called it from viewDidLoad for initial layout constant.

    func  updateConstraint() {
        self.redViewHeight.constant = 128 * HEIGHT_RATIO
    }
    

    Step 4:

    As this method is called whenever rotation change so i called this function.

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    
        super.viewWillTransition(to: size, with: coordinator)
        coordinator.animate(alongsideTransition: { context in
            //This function will do the trick
    
            let orientation = UIDevice.current.orientation
            if orientation == .portrait {
                self.redViewHeight.constant = 128 * HEIGHT_RATIO //Just a value
            }
            else {
                self.redViewHeight.constant = 55  * HEIGHT_RATIO //Just a value
            }
            self.view.layoutIfNeeded()
    
        }, completion: {
            _ in
        })
    
    }
    

    Hope you will find this useful.