ios - Different layouts in portrait and landscape mode

Question

Let's assume I have this layout design on an iPad Portrait.

But I would like to have it this way when the iPad is in landscape:

Is it possible to do that with auto layout? Or with a small amount of code?

Answer 1

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.