当前位置:  开发笔记 > IOS > 正文

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

如何解决《纵向和横向模式下的不同布局》经验,为你挑选了2个好方法。

我们假设我在iPad Portrait上有这种布局设计.

屏蔽1

但是当iPad处于风景中时,我想这样做: 画面2

是否可以使用自动布局?或者使用少量代码?



1> Muhammad Waq..:

您可以通过代码实现这一点首先,您必须制作动态约束的IBoutlet

常量约束: //这些约束在两个方向上都保持相同

1- RedView顶级空间到Superview

2- RedView尾随空间到Superview

3- BlueView超级视图的领先空间

4- BlueView底部空间到SuperView

动态约束

肖像约束:

1- RedView高度

2- RedView垂直空间到BlueView

3- RedView领先空间到Superview

4- SuperView尾随空间到Superview

LandScape约束:

1- RedView宽度

2- RedView水平空间到BlueView

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

并称这两个功能

纵向定位功能

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定位功能

    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: 在此输入图像描述

希望通过编码通过布局管理帮助理解它.如果您仍然无法理解那么请检查我的代码

Github:

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


FIX:将高度和宽度约束优先级设置为999.
到github的链接已损坏

2> Irfan..:

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

以下内容对iPhone用户有所帮助.

是的,这可以在具有autolayout和size类的界面构建器中使用.您不需要编码.

首先你选择尺寸类wAny hAny

以下是如何选择尺寸等级.

在此输入图像描述

在视图控制器中添加两个视图.在上面顶视图和蓝色视图的红色视图.就像你的第一张图片一样.

红色视图的约束是:

顶级空间超级观看

领先的超级视野空间

尾随空间到超级视图

身高= 50

蓝色视图的约束是:

垂直空间到红色视图

超前视野的领先空间

尾随空间到超级视图

底层空间到超级视图

这都是为Potrait模式设置的.

现在您将大小类更改为wAny hCompact(第一行中的前两列).这个类适用于iPhone风景.

现在您必须使用安装卸载概念.

红色视图会改变的约束:

卸载(wAny hCompact)size class的高度constriant:

在此输入图像描述

类似卸载其Leading约束.在此类中为此红色视图添加两个新约束:

底层空间到superview

宽度约束= 50

这将使红色视图向右侧以50宽度.

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

卸载其垂直间距,尾随空格.

添加两个新约束:

垂直空间到超级视图

尾随空间为红色视图

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

希望它对你有用.

推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有