Updating constraints on orientation change

Question

Below is the view in portrait mode (Image 1) and in landscape I wanted to show as (Image 2). I am facing issue to show in it properly in landscape.

Image 1:

I have setup constraints in storyboard.

greenView: top: 0, leading: 0, trailing: 0, width: equal to superview.width, height: equal to superview.height/2

Image 2: I tried modifying constraints but when I turn device to landscape, greenView becomes 1/4 of the screen. below is the code.

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    if UIDevice.current.orientation.isLandscape {
        greenView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.50).isActive = true
        greenView.heightAnchor.constraint(equalToConstant: 0).isActive = true
    } else {
    }
}

FYI you need to call `super.viewWillTransition` – zombie Jul 24 '18 at 17:53 — zombie, Jul 24 '18 at 17:53

Shehata Gamal · Answer 1 · 2018-07-24T20:14:38.727

0

Instead of headache of creating constraints for this problem insert both views in a UIStackView (vertical) , and inside viewWillTransition change axis to horizontal if the orientation is isLandscape

plus adding these constraints

greenView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.50).isActive = true
greenView.heightAnchor.constraint(equalToConstant: 0).isActive = true

will make a conflict as the old ones are not removed

//

func shared () {

     if UIDevice.current.orientation == .portrait {

         self.stView.axis = .vertical
     }
     else {

         self.stView.axis = .horizontal 
     }

 }

Call the above method in viewDidLoad & viewWillTransition

edited Jul 24 '18 at 20:14

answered Jul 24 '18 at 17:51

Shehata Gamal

98,760
8
65
87

let me check by adding UIStackView. – JiteshW Jul 24 '18 at 17:53
UIStackView is doing the trick, but when I rotate its splitting in half based on height and not based on width. Any suggestion. – JiteshW Jul 24 '18 at 18:09

score 0 · Answer 2 · answered Jul 27 '18 at 11:22

isActive flag is highly misunderstood option. This flag does not change constraint's state, it completely adds or removes a constraint.

greenView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.50).isActive = true
greenView.heightAnchor.constraint(equalToConstant: 0).isActive = true

The above code will add multiple constraint on your view. Every time you rotate your device a new width, height constraint gets added to your view which will result in your view having multiple height and width constraints. To add/remove same constraint, store its reference then use isActive on it.

I'm not sure why you are setting height constraint to 0?

Now coming to what you want to do. I can think of 2 approaches

1st Approach

Add two more constraints in addition to existing constraints in your storyboard but keep their priority low(<1000):

1. greenView.bottom = safeArea.bottom
2. greenView.width = superView.width/2

Make IBOutlet of greenView.height = superview.height/2 and greenView.trailing = superView.trailing. The outlets should be of those constraints which have high priority. Make sure your Outlets are not weak otherwise their outlet will become nil when you set isActive false. Now all you have to do is set this when device changes to landscape mode:

highPriorityGreenViewConstraint.isActive = false
highPriorityHeightConstraint.isActive = false

2nd Approach

Use size classes to set your constraint. All size classes are mentioned here.

Example - Install greenView.bottom = safeArea.bottom,greenView.width = superView.width/2 constraints for compact width compact height size class only. You will have to put more constraints in this approach as landscape size class is different even among iPhone models.

Updating constraints on orientation change

2 Answers2

1st Approach

2nd Approach