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

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

ios xcode

Ios 纵向和横向模式下的不同布局,ios,xcode,autolayout,Ios,Xcode,Autolayout,让我们假设我在iPad肖像上有这个布局设计但我希望在iPad处于“风景”状态时采用这种方式：是否可以用自动布局来实现这一点？或者使用少量代码？是否可以使用自动布局来实现这一点？还是使用少量代码？你将需要两者都为iPad做这些布局为每个视图定义布局约束，不要为这些视图设置宽度或高度约束为视图1和视图2上的每个约束连线IBOutlets 在视图控制器中实现 private var portraitRaceInfoViewTrailing: NSLayoutConstraint! pr

让我们假设我在iPad肖像上有这个布局设计

但我希望在iPad处于“风景”状态时采用这种方式：

是否可以用自动布局来实现这一点？或者使用少量代码？

是否可以使用自动布局来实现这一点？还是使用少量代码？

你将需要两者都为iPad做这些布局

为每个视图定义布局约束，不要为这些视图设置宽度或高度约束

为视图1和视图2上的每个约束连线IBOutlets

在视图控制器中实现

private var portraitRaceInfoViewTrailing: NSLayoutConstraint!
private var portraitRaceInfoViewBottom: NSLayoutConstraint!
private var portraitRaceListViewLeading: NSLayoutConstraint!
private var landscapeRaceInfoViewTrailing: NSLayoutConstraint!
private var landscapeRaceInfoViewBottom: NSLayoutConstraint!
private var landscapeRaceListViewTop: NSLayoutConstraint!

viewwilltransitionsize（size:CGSize，带TransitionCoordinator协调器：UIViewControllerTransitionCoordinator）

讨论 UIKit在更改文件大小之前调用此方法显示视图控制器的视图。您可以在应用程序中重写此方法拥有对象并使用它执行与大小相关的其他任务改变例如，容器视图控制器可能使用此方法覆盖其嵌入式子视图控制器的特征。使用提供了协调器对象以设置所做更改的动画

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

private var portraitRaceInfoViewTrailing: NSLayoutConstraint!
private var portraitRaceInfoViewBottom: NSLayoutConstraint!
private var portraitRaceListViewLeading: NSLayoutConstraint!
private var landscapeRaceInfoViewTrailing: NSLayoutConstraint!
private var landscapeRaceInfoViewBottom: NSLayoutConstraint!
private var landscapeRaceListViewTop: NSLayoutConstraint!

是您需要实现的方法。在该方法中，您需要检查尺寸的属性宽度和高度，以确定布局应如何更改，即横向或纵向布局。请注意，此方法告诉的是，它将更改为传入的大小

根据设备是否要旋转为纵向或横向调整约束

iPAD没有横向模式的尺寸等级。我认为原因是在大多数情况下不需要它。但是，当设备方向改变时，可以激活和禁用约束，如接受的答案
以下内容对iPhone用户很有帮助
是的，这在具有autolayout和size类的interface builder中是可能的。您不需要编写代码
首先选择尺寸等级wAny hAny
是如何选择大小类

在视图控制器中添加两个视图。顶部为红色视图，下方为蓝色视图。就像你的第一张照片
红色视图的约束条件包括：

顶部空间到超级视图

将空间引入超级视图

从尾随空间到超级视图

高度=50

蓝色视图的约束条件包括：

垂直空间到红色视图

将空间引入超级视图

从尾随空间到超级视图

从底部空间到超级视图

这是所有设置为Potrait模式
现在，将大小类更改为wAny hCompact（第一行的前两列）。本课程针对iPhone环境
现在您必须使用安装和卸载概念
将更改为红色视图的约束：

卸载（wAny hCompact）尺寸等级的高度约束，如下所示：

类似地，卸载其前导约束。向此类中的红色视图添加两个新约束：

超级视图的底部空间

宽度约束=50

这将使红色视图位于右侧，宽度为50
现在蓝色视图的约束更改：

卸载其垂直间距、尾随间距

添加两个新约束：

垂直空间到超级视图

红色视图的尾随空间

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

希望它对您有用。
您可以通过代码实现这一点，首先，您必须对动态约束进行IBoutlet
常量约束：//这些约束在两个方向上保持不变
1-红色视图顶部空间到Superview
2-红色视图尾部空间到Superview
3-BlueView将空间引入Superview
4-从BlueView底部空间到SuperView
动态约束
纵向约束：
1-红色视图高度
2-从RedView垂直空间到BlueView
3-红色视图将空间引导到Superview
4-BlueView尾部空间到Superview
横向约束：
1-红色视图宽度
2-从红色视图水平空间到蓝色视图
3-从红色视图底部空间到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) }
并调用这两个函数
纵向定位功能
横向定位功能
人像截图： 横向屏幕截图：
希望通过编码对版式管理有助于理解。如果您仍然无法理解，请检查我的代码
：

如果有警告，只需将高度和宽度的约束优先级设置为999。
我用Obj-C实现了这一点，并在上发布解决方案涉及少量代码，大部分工作集中在自动布局和命名约定上。。。自述文件解释了我是如何做到这一点的。我在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]; }
肖像约束集合和景观约束集合是IBOutletCollection属性，用于管理方向的特定约束
自动布局解决方案仅适用于安装和卸载约束（激活和停用），无需
@property (strong, nonatomic) IBOutletCollection(NSLayoutConstraint) NSArray *ipadLandscapeConstraints; @property (strong, nonatomic) IBOutletCollection(NSLayoutConstraint) NSArray *ipadPortraitConstraints;

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator { [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator]; [self configConstraints]; } - (void)configConstraints { if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { // iPad landscape orientation if (UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation)) { [NSLayoutConstraint deactivateConstraints:self.ipadPortraitConstraints]; [NSLayoutConstraint activateConstraints:self.ipadLandscapeConstraints]; } // iPad portrait orientation else { [NSLayoutConstraint deactivateConstraints:self.ipadLandscapeConstraints]; [NSLayoutConstraint activateConstraints:self.ipadPortraitConstraints]; } [self.view layoutIfNeeded]; } }

@IBOutlet weak var raceInfoView: UIStackView! @IBOutlet weak var raceListView: UITableView!

private var portraitRaceInfoViewTrailing: NSLayoutConstraint! private var portraitRaceInfoViewBottom: NSLayoutConstraint! private var portraitRaceListViewLeading: NSLayoutConstraint! private var landscapeRaceInfoViewTrailing: NSLayoutConstraint! private var landscapeRaceInfoViewBottom: NSLayoutConstraint! private var landscapeRaceListViewTop: NSLayoutConstraint!

override func viewDidLoad() { super.viewDidLoad() portraitRaceInfoViewTrailing = NSLayoutConstraint( item: racesView as Any, attribute: NSLayoutConstraint.Attribute.trailing, relatedBy: NSLayoutConstraint.Relation.equal, toItem: raceInfoView, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: 0) portraitRaceInfoViewBottom = NSLayoutConstraint( item: raceListView as Any, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: raceInfoView, attribute: NSLayoutConstraint.Attribute.bottom, multiplier: 1, constant: 0) portraitRaceListViewLeading = NSLayoutConstraint( item: raceListView as Any, attribute: NSLayoutConstraint.Attribute.leading, relatedBy: NSLayoutConstraint.Relation.equal, toItem: racesView, attribute: NSLayoutConstraint.Attribute.leading, multiplier: 1, constant: 0) landscapeRaceInfoViewTrailing = NSLayoutConstraint( item: raceListView as Any, attribute: NSLayoutConstraint.Attribute.leading, relatedBy: NSLayoutConstraint.Relation.equal, toItem: raceInfoView, attribute: NSLayoutConstraint.Attribute.trailing, multiplier: 1, constant: 0) landscapeRaceInfoViewBottom = NSLayoutConstraint( item: raceInfoView as Any, attribute: NSLayoutConstraint.Attribute.bottom, relatedBy: NSLayoutConstraint.Relation.equal, toItem: racesView, attribute: NSLayoutConstraint.Attribute.bottom, multiplier: 1, constant: 0) landscapeRaceListViewTop = NSLayoutConstraint( item: raceListView as Any, attribute: NSLayoutConstraint.Attribute.top, relatedBy: NSLayoutConstraint.Relation.equal, toItem: racesView, attribute: NSLayoutConstraint.Attribute.top, multiplier: 1, constant: 0) applyOrientationConstraints() }

func applyOrientationConstraints() { let orient = UIApplication.shared.statusBarOrientation switch orient { case .portrait: NSLayoutConstraint.activate([portraitRaceInfoViewTrailing, portraitRaceInfoViewBottom, portraitRaceListViewLeading]) NSLayoutConstraint.deactivate([landscapeRaceInfoViewTrailing, landscapeRaceInfoViewBottom, landscapeRaceListViewTop]) break default: NSLayoutConstraint.deactivate([portraitRaceInfoViewTrailing, portraitRaceInfoViewBottom, portraitRaceListViewLeading]) NSLayoutConstraint.activate([landscapeRaceInfoViewTrailing, landscapeRaceInfoViewBottom, landscapeRaceListViewTop]) break } }

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { coordinator.animate(alongsideTransition: { (UIViewControllerTransitionCoordinatorContext) -> Void in self.applyOrientationConstraints() }, completion: { (UIViewControllerTransitionCoordinatorContext) -> Void in print("rotation completed") }) super.viewWillTransition(to: size, with: coordinator) }

// // ViewController.swift // AutoLayoutSampleOnRotation // // Created by ing.conti on 13/09/2019. // Copyright © 2019 ing.conti. All rights reserved. // import UIKit class ViewController: UIViewController { @IBOutlet weak var redView: UIView! @IBOutlet weak var yellowView: UIView! private var red_TopPortrait : NSLayoutConstraint? private var red_TopLandscape : NSLayoutConstraint? private var red_LeftPortrait : NSLayoutConstraint? private var red_LeftLandscape : NSLayoutConstraint? private var red_RightPortrait : NSLayoutConstraint? private var red_RightLandscape : NSLayoutConstraint? private var red_BottomPortrait : NSLayoutConstraint? private var red_BottomLandscape : NSLayoutConstraint? private var red_HeightPortrait : NSLayoutConstraint? private var red_WidthLandscape : NSLayoutConstraint? /// private var yellow_TopPortrait : NSLayoutConstraint? private var yellow_TopLandscape : NSLayoutConstraint? private var yellow_LeftPortrait : NSLayoutConstraint? private var yellow_LeftLandscape : NSLayoutConstraint? private var yellow_RightPortrait : NSLayoutConstraint? private var yellow_RightLandscape : NSLayoutConstraint? private var yellow_BottomPortrait : NSLayoutConstraint? private var yellow_BottomLandscape : NSLayoutConstraint? private let H_SpaceBetween = CGFloat(20) private let V_SpaceBetween = CGFloat(50) override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. redView.translatesAutoresizingMaskIntoConstraints = false yellowView.translatesAutoresizingMaskIntoConstraints = false buildConstraintsForRed() buildConstraintsForYellow() applyConstraints() } final private func buildConstraintsForRed(){ let portraitTopMargin = CGFloat(70) let portraitLeftMargin = CGFloat(70) let portraitRightMargin = CGFloat(70) let landscapeTopMargin = CGFloat(70) let landscapeLeftMargin = CGFloat(70) let landscapeBottomMargin = CGFloat(70) // TOP P red_TopPortrait = NSLayoutConstraint(item: redView as Any, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: portraitTopMargin) red_TopPortrait!.identifier = "red_TopPortrait" // LEFT-Heading P red_LeftPortrait = NSLayoutConstraint(item: redView as Any, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1, constant: portraitLeftMargin) red_LeftPortrait!.identifier = "red_LeftPortrait" // RIGHT - trailing P red_RightPortrait = NSLayoutConstraint(item: redView as Any, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1, constant: -portraitRightMargin) red_RightPortrait!.identifier = "red_RightPortrait" // BOTTOM: P red_BottomPortrait = NSLayoutConstraint(item: redView as Any, attribute: .bottom, relatedBy: .equal, toItem: yellowView, attribute: .top, multiplier: 1, constant: -V_SpaceBetween) red_BottomPortrait!.identifier = "red_BottomPortrait" // HEIGHT: P red_HeightPortrait = NSLayoutConstraint(item: redView as Any, attribute: .height, relatedBy: .equal, toItem: self.view, attribute: .height, multiplier: 0.3, constant: 0) red_HeightPortrait?.identifier = "red_HeightPortrait" //LANDSCAPE // TOP L red_TopLandscape = NSLayoutConstraint(item: redView as Any, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: landscapeTopMargin) red_TopLandscape!.identifier = "red_TopLandscape" // LEFT-Heading L red_LeftLandscape = NSLayoutConstraint(item: redView as Any, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1, constant: landscapeLeftMargin) red_LeftLandscape!.identifier = "red_LeftLandscape" // RIGHT - trailing L red_RightLandscape = NSLayoutConstraint(item: redView as Any, attribute: .trailing, relatedBy: .equal, toItem: yellowView, attribute: .leading, multiplier: 1, constant: -H_SpaceBetween) red_RightLandscape!.identifier = "red_RightLandscape" // BOTTOM: L red_BottomLandscape = NSLayoutConstraint(item: redView as Any, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -landscapeBottomMargin) red_BottomLandscape?.identifier = "red_BottomLandscape" // Width L: red_WidthLandscape = NSLayoutConstraint(item: redView as Any, attribute: .width, relatedBy: .equal, toItem: self.view, attribute: .width, multiplier: 0.3, constant: 0) red_WidthLandscape!.identifier = "red_WidthLandscape" } final private func buildConstraintsForYellow(){ let portraitLeftMargin = CGFloat(20) let portraitRightMargin = CGFloat(20) //let portraitHorizMargin = CGFloat(100) let portraitBottomMargin = CGFloat(20) let landscaspeTopMargin = CGFloat(20) let landscaspeRightMargin = CGFloat(20) let landscapeBottomMargin = CGFloat(20) // TOP P yellow_TopPortrait = NSLayoutConstraint(item: yellowView as Any, attribute: .top, relatedBy: .equal, toItem: redView, attribute: .bottom, multiplier: 1, constant: V_SpaceBetween) yellow_TopPortrait!.identifier = "yellow_TopPortrait" // LEFT-Heading P yellow_LeftPortrait = NSLayoutConstraint(item: yellowView as Any, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1, constant: portraitLeftMargin) yellow_LeftPortrait!.identifier = "yellow_LeftPortrait" // RIGHT - trailing P yellow_RightPortrait = NSLayoutConstraint(item: yellowView as Any, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1, constant: -portraitRightMargin) yellow_RightPortrait!.identifier = "yellow_RightPortrait" // BOTTOM: P yellow_BottomPortrait = NSLayoutConstraint(item: yellowView as Any, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -portraitBottomMargin) yellow_BottomPortrait!.identifier = "yellow_BottomPortrait" //LANDSSCAPE // TOP L yellow_TopLandscape = NSLayoutConstraint(item: yellowView as Any, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: landscaspeTopMargin) yellow_TopLandscape!.identifier = "yellow_TopLandscape" // LEFT-Heading L yellow_LeftLandscape = NSLayoutConstraint(item: yellowView as Any, attribute: .leading, relatedBy: .equal, toItem: self.redView, attribute: .trailing, multiplier: 1, constant: H_SpaceBetween) yellow_LeftLandscape!.identifier = "yellow_LeftLandscape" // RIGHT - trailing L yellow_RightLandscape = NSLayoutConstraint(item: yellowView as Any, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1, constant: -landscaspeRightMargin) yellow_RightLandscape!.identifier = "yellow_RightLandscape" // BOTTOM: L yellow_BottomLandscape = NSLayoutConstraint(item: yellowView as Any, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -landscapeBottomMargin) yellow_BottomLandscape!.identifier = "yellow_BottomLandscape" } final private func removeRedConstraints() { if let c = red_LeftPortrait {self.view.removeConstraint(c)} if let c = red_LeftLandscape {self.view.removeConstraint(c)} if let c = red_RightPortrait {self.view.removeConstraint(c)} if let c = red_RightLandscape {self.view.removeConstraint(c)} if let c = red_TopPortrait {self.view.removeConstraint(c)} if let c = red_TopLandscape {self.view.removeConstraint(c)} if let c = red_BottomPortrait {self.view.removeConstraint(c)} if let c = red_BottomLandscape {self.view.removeConstraint(c)} if let c = red_HeightPortrait {self.view.removeConstraint(c)} if let c = red_WidthLandscape {self.view.removeConstraint(c)} } final private func removeYellowConstraints() { if let c = yellow_LeftPortrait {self.view.removeConstraint(c)} if let c = yellow_LeftLandscape {self.view.removeConstraint(c)} if let c = yellow_RightPortrait {self.view.removeConstraint(c)} if let c = yellow_RightLandscape {self.view.removeConstraint(c)} if let c = yellow_TopPortrait {self.view.removeConstraint(c)} if let c = yellow_TopLandscape {self.view.removeConstraint(c)} if let c = yellow_BottomPortrait {self.view.removeConstraint(c)} if let c = yellow_BottomLandscape {self.view.removeConstraint(c)} } final private func applyPortraitConstraint(){ removeRedConstraints() removeYellowConstraints() self.view.addConstraint(self.red_LeftPortrait!) self.view.addConstraint(self.red_RightPortrait!) self.view.addConstraint(self.red_TopPortrait!) self.view.addConstraint(self.red_BottomPortrait!) self.view.addConstraint(self.red_HeightPortrait!) self.view.addConstraint(self.yellow_LeftPortrait!) self.view.addConstraint(self.yellow_RightPortrait!) self.view.addConstraint(self.yellow_TopPortrait!) self.view.addConstraint(self.yellow_BottomPortrait!) } final private func applyLandscapeConstraint(){ removeRedConstraints() removeYellowConstraints() self.view.addConstraint(self.red_LeftLandscape!) self.view.addConstraint(self.red_RightLandscape!) self.view.addConstraint(self.red_TopLandscape!) self.view.addConstraint(self.red_BottomLandscape!) self.view.addConstraint(self.red_WidthLandscape!) self.view.addConstraint(self.yellow_LeftLandscape!) self.view.addConstraint(self.yellow_RightLandscape!) self.view.addConstraint(self.yellow_TopLandscape!) self.view.addConstraint(self.yellow_BottomLandscape!) } final private func applyConstraints(){ let orient = UIApplication.shared.statusBarOrientation switch orient { case .portrait: print("Portrait") self.applyPortraitConstraint() break // Do something default: print("LandScape") // Do something else self.applyLandscapeConstraint() break } } override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { coordinator.animate(alongsideTransition: { (UIViewControllerTransitionCoordinatorContext) -> Void in self.applyConstraints() }, completion: { (UIViewControllerTransitionCoordinatorContext) -> Void in print("rotation completed") }) super.viewWillTransition(to: size, with: coordinator) } }