Different layouts in portrait and landscape mode

后端 未结 9 1671
别跟我提以往
别跟我提以往 2020-12-28 14:16

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

9条回答
  •  既然无缘
    2020-12-28 15:09

    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.

提交回复
热议问题