Different layouts in portrait and landscape mode
iPAD don't have the size class for Landscape mode. I think the reason is that it is not needed in most of the cases. However one can activate and deactivate constraints when device orientation change like the accepted answer.
The following can be helpful for iPhone user.
Yes this is possible in interface builder with autolayout and size classes. You will not need to code.
First you select size class wAny hAny
Here is how to select size class.
Add two views in your view controller. Red view on top and blue view below. Just like your first image.
Constraints on red view are:
- Top space to super view
- Leading space to super view
- Trailing space to super view
- height = 50
Constraints on blue view are:
- vertical space to red view
- leading space to super view
- trailing space to super view
- bottom space to super view
This is all set for Potrait mode.
Now you change size classes to wAny hCompact(The first two column in first row). this class is for iPhone landscape.
Now you have to use install and uninstall concept.
Constraints that will change for red view:
- Uninstall its height constriant for (wAny hCompact) size class as:
- Similary uninstall its Leading constraint. Add two new constraints to this red view in this class:
- Bottom space to superview
- Width constraint = 50
This will make red view to right side with 50 width.
Now constraint change for blue view:
- Uninstall Its vertical spacing, trailing space.
Add two new constraint:
- Vertical space to super view
- Trailing space to red View
This will attach red view left of blue view.
Hope it work for you.
You can achieve this through code First of all you have to make IBoutlet of your dynamic constraints
Constant Constraint: // these constraint will remain same in both orientations
1- RedView top Space to Superview
2- RedView Trailing Space to Superview
3- BlueView Leading Space to Superview
4- BlueView bottom Space to SuperView
Dynamic Constraint
Portrait Constraint:
1- RedView height
2- RedView Vertical Space to BlueView
3- RedView Leading Space to Superview
4- BlueView Trailing Space to Superview
LandScape Constraint:
1- RedView Width
2- RedView Horizontal Space to BlueView
3- RedView bottom Space to Superview
4- BlueView Top Space to Superview
Now You have to override method which is called on Orientation change
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
coordinator.animateAlongsideTransition({ (UIViewControllerTransitionCoordinatorContext) -> Void in
let orient = UIApplication.sharedApplication().statusBarOrientation
switch orient {
case .Portrait:
print("Portrait")
self.ApplyportraitConstraint()
break
// Do something
default:
print("LandScape")
// Do something else
self.applyLandScapeConstraint()
break
}
}, completion: { (UIViewControllerTransitionCoordinatorContext) -> Void in
print("rotation completed")
})
super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
}
And call these 2 functions
Portrait Orientation Function
func ApplyportraitConstraint(){
self.view.addConstraint(self.RedViewHeight)
self.view.addConstraint(self.RedView_VerticalSpace_To_BlueView)
self.view.addConstraint(self.RedView_LeadingSpace_To_SuperView)
self.view.addConstraint(self.BlueView_TrailingSpace_To_SuperView)
self.view.removeConstraint(self.RedViewWidth)
self.view.removeConstraint(self.RedView_HorizontalSpace_To_BlueView)
self.view.removeConstraint(self.RedView_BottomSpace_To_SuperView)
self.view.removeConstraint(self.BlueView_TopSpace_To_SuperView)
}
LandScape Orientation Function
func applyLandScapeConstraint(){
self.view.removeConstraint(self.RedViewHeight)
self.view.removeConstraint(self.RedView_VerticalSpace_To_BlueView)
self.view.removeConstraint(self.RedView_LeadingSpace_To_SuperView)
self.view.removeConstraint(self.BlueView_TrailingSpace_To_SuperView)
self.view.addConstraint(self.RedViewWidth)
self.view.addConstraint(self.RedView_HorizontalSpace_To_BlueView)
self.view.addConstraint(self.RedView_BottomSpace_To_SuperView)
self.view.addConstraint(self.BlueView_TopSpace_To_SuperView)
}
Portrait ScreenShot: LandScape ScreenShot:
Hope it will Help to Understand it through Layout Managment through coding. If you still not able to Understand then Please Check my Code on
Github:
If you have warnings just set height and width's constraint priority to 999.