纵向和横向模式下的不同布局

假设我在iPad肖像上有这个布局devise。

但是，当iPad处于风景中时，我想这样做：

是否有可能做到这一点与自动布局？ 还是用less量的代码？

Answer 1

你可以通过代码来实现这一点首先，你必须做出你的dynamic约束的IBoutlet

常量约束： //这两个方向的约束将保持相同

1 – RedView顶部空间到Superview

2 – RedView拖尾空间到Superview

3 – BlueView领先空间Superview

4- BlueView底部空间到SuperView

dynamic约束

肖像约束：

1- RedView高度

2-红视图垂直空间蓝视图

3 RedView领先空间Superview

4- BlueView尾随空间到Superview

LandScape约束：

1-红视图宽度

2-红视图水平空间蓝视图

3，RedView底部空间到Superview

4- BlueView顶层空间Superview

现在您必须重写方向更改所调用的方法

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) } 

并称这2个function

肖像取向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方向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) } 

肖像ScreenShot： LandScape ScreenShot：

希望能通过编码帮助理解它通过布局pipe理。 如果您仍然无法理解，请检查我的代码

Github ：

如果您有警告，只需将高度和宽度的约束优先级设置为999。

Answer 2

iPAD没有横向模式的尺寸等级。 我认为这是因为在大多数情况下这是不需要的。 但是，当设备方向改变如接受的答案时，可以激活和停用约束。

以下内容可以帮助iPhone用户。

是的，这可以在界面生成器中使用自动布局和大小类。 你不需要编码。

首先，你select大小classwAny hAny

这里是如何select大小类。

在视图控制器中添加两个视图。 在顶视图和蓝色视图下面的红色视图。 就像你的第一个形象。

红色的限制是：

• 顶级空间超级观点
• 引领空间超级观点
• 尾随空间超级观点
• 身高= 50

蓝色视图上的约束条件是：

• 垂直的空间到红色视图
• 引领空间超级观点
• 尾随空间超级观点
• 底部空间超级观点

这是为Potrait模式设置的。

现在您将大小类更改为wAny hCompact（第一行的前两列）。 这个类是iPhone风景。

现在你必须使用安装和卸载的概念。

限制将改变为红色视图：

• 卸载（wAnyHCompact）大小类的高度constriant为：

• Similary卸载其领导约束。 在这个类的红色视图中添加两个新的约束：
• 底部空间，超级查看
• 宽度约束= 50

这将使50宽度右侧的红色视图。

现在蓝色视图的约束更改：

• 卸载它的垂直间距，尾随空间。

添加两个新的约束：

• 垂直空间超级观点
• 拖尾到红色视图的空间

这将附加蓝色视图左侧的红色视图。

希望它为你工作。

Answer 3

是否有可能做到这一点与自动布局？ 还是用less量的代码？

你将需要为iPad做这些布局。

1. 为每个视图定义布局约束，不要为这些视图设置宽度或高度约束。
2. 为视图1和视图2上的每个约束连接IBOutlets 。

3. 在视图控制器中实现UIContentContainer协议 。

   viewWillTransitionToSize(_ size: CGSize,withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator)

讨论UIKit在改变呈现的视图控制器视图的大小之前调用这个方法。 您可以在自己的对象中重写此方法，并使用它来执行与大小更改相关的其他任务。 例如，一个容器视图控制器可以使用这个方法来覆盖其embedded的子视图控制器的特性。 使用提供的协调器对象来animation您所做的任何更改。

如果您在自定义视图控制器中重写此方法，则始终在实现中的某个位置调用super，以便UIKit可以适当地转发大小更改消息。 视图控制器将大小更改消息转发到其视图和子视图控制器。 演示文稿控制器将大小更改转发给他们的视图控制器。

是你需要实现的方法。 在这个方法里面，你将需要检查尺寸的属性宽度和高度来计算你的布局应该如何改变 – 例如横向或纵向布局。 请注意，这个方法告诉它将会改变为传入的大小。

4. 根据设备是否旋转到纵向或横向来调整您的约束。

Answer 4

我使用Obj-C实现了这个function，并在我的github上发布了解决scheme只涉及less量的代码，大部分工作都集中在AutoLayout和命名约定中。自述文件解释了我是如何做到的。 我在ViewController上使用的代码基本上是这个方法：

 - (void)setUpViewConstraintsForInterfaceOrientation:(InterfaceOrientation)interfaceOrientation { self.lastOrientation = interfaceOrientation; if (interfaceOrientation == Landscape) { [NSLayoutConstraint deactivateConstraints:self.portraitConstraintsCollection]; [NSLayoutConstraint activateConstraints:self.landscapeConstraintsCollection]; } else if(interfaceOrientation == Portrait){ [NSLayoutConstraint deactivateConstraints:self.landscapeConstraintsCollection]; [NSLayoutConstraint activateConstraints:self.portraitConstraintsCollection]; } [self.view layoutIfNeeded]; } 

portraitConstraintsCollection和landscapeConstraintsCollection是IBOutletCollection属性来pipe理方向的特定约束。

自动布局解决scheme只适用于安装和卸载约束（激活和停用），不需要添加或删除约束。

Answer 5

将这两个视图置于堆栈视图并更改堆栈视图的轴方向会更容易。

1. 创build一个IBOulet引用到堆栈视图
2. 实现viewWillTransitionToSize
3. 通过执行self.stackView.axis = .vertical或.horizo​​ntal来更改每个方向的轴