不同的布局在纵向和横向模式 [英] Different layouts in portrait and landscape mode

问题描述

让我们假设我有一个iPad纵向此布局设计。

不过，我想有这种方式当iPad处于横向：

是否有可能做到这一点与自动布局？
或code少量的？

解决方案

您可以通过code，首先做到这一点，你必须做的 IBOutlet中的动态约束

  

恒约束： //这些约束将在两个方向保持相同

1 RedView顶部空间来上海华

2 - RedView尾随空格到上海华

3蓝景前导空格到上海华

4-蓝景底部空间来的SuperView

  

动态约束

人像约束：

1 RedView高度

2 - RedView垂直空间为蓝景

3 RedView前导空格到上海华

4-蓝景尾随空格到上海华

景观约束：

1 RedView宽度

2 - RedView水平空间，以蓝景

3 RedView底部空间为上海华

4-蓝景顶层空间，以上海华

现在你必须重写方法被称为上方向变化

 覆盖FUNC viewWillTransitionToSize（尺寸：CGSize，withTransitionCoordinator协调员：UIViewControllerTransitionCoordinator）{    coordinator.animateAlongsideTransition（{（UIViewControllerTransitionCoordinatorContext） -  GT;无效的        让东方= UIApplication.sharedApplication（）。statusBarOrientation        切换东方{
        案例.Portrait：
            打印（纵向）
            self.ApplyportraitConstraint（）
            打破
            // 做一点事
        默认：
            打印（风景）
            //做别的事情
            self.applyLandScapeConstraint（）
            打破
        }
        }完成：{（UIViewControllerTransitionCoordinatorContext） -  GT;在无效
            打印（旋转完成）
    }）
    super.viewWillTransitionToSize（大小，withTransitionCoordinator：协调人）
}
 

并调用这些功能2

  

纵向功能

  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_Horizo​​ntalSpace_To_BlueView）
 self.view.removeConstraint（self.RedView_BottomSpace_To_SuperView）
 self.view.removeConstraint（self.BlueView_TopSpace_To_SuperView）
}
 

  

横向功能

  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_Horizo​​ntalSpace_To_BlueView）
    self.view.addConstraint（self.RedView_BottomSpace_To_SuperView）
    self.view.addConstraint（self.BlueView_TopSpace_To_SuperView）}
 

  

人像截图：
  
  景观截图：
  

希望这将有助于通过编码通过布局枭雄去了解它。
如果你还不能理解，那么请检查我的code对

Github上： https://github.com/mwaqasbhati /纵向 - 横向 - 不同的布局

如果你刚才设置警告的高度和宽度的约束优先级为999。

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?

解决方案

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:https://github.com/mwaqasbhati/Portrait-LandScape-Different-Layouts

If you have warnings just set height and width's constraint priority to 999.

这篇关于不同的布局在纵向和横向模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！