iOS 自动布局 Auto Layout 入门 05 相册 (上)

通过前面几节,我们已经了解了什么是约束,以及约束是如何工作的。这一节开始,我们使用自动布局来做一个相册应用程序。这个程序在水平和垂直模式都可以显示4副图片,效果如下:

屏幕被分为4个区域,每个区域由一个Image view和一个Label组成。

创建一个名为Gallery的single view应用程序。打开Main.storyboard,disable Size Classes。添加一个view到画布上并修改其大小为160×284,将其背景色改为绿色:

选中绿色的view,点击打开pin菜单,激活Spacing to nearest neighbor区域的4条红色T型并点击Add 4 Constraints来创建4个约束:

约束创建后效果如下:

由于UIView不像UIButton或UILabel,它没有intrinsic content大小,我们需要足够的约束来确定UIView的大小。这里,UIView的大小就是其父view的大小。在Document Outline界面中可以看到,生成的4个约束分别为2个水平间距约束和2个垂直间距约束,它们的值都是固定的。

绿色view的宽度就是"其父view的宽度减去(0 + 128 + 2*16)",这里16为布局的边界。

绿色view的高度就是“其父view的高度减去(0 + 264)"。

预览一下,垂直模式下,屏幕分辨率为320×568,绿色view的大小为:160×304

水平模式下,屏幕分辨率为568×320,绿色view的大小为:408×56:

这里,我们并不期望绿色view在屏幕旋转时发生大小的变化,我们通过pin菜单设置长和宽的约束:

通过预览查看效果,垂直方向看起不错,但是当我们将预览图切换到水平模式时,啊哦,绿色view并不是我们所期望的大小,在调试窗口,有如下log输出:

2015-03-11 21:51:55.481 Gallery[3955:39020] Unable to simultaneously satisfy constraints.Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ("<NSLayoutConstraint:0x7b35c170 V:[UIView:0x7b35c650(284)]>","<NSLayoutConstraint:0x7b35d300 V:[_UILayoutGuide:0x7b35c9d0]-(0)-[UIView:0x7b35c650]>","<NSLayoutConstraint:0x7b35d390 V:[UIView:0x7b35c650]-(264)-[_UILayoutGuide:0x7b35cee0]>","<_UILayoutSupportConstraint:0x7b35d3c0 V:[_UILayoutGuide:0x7b35c9d0(20)]>","<_UILayoutSupportConstraint:0x7b35c050 V:|-(0)-[_UILayoutGuide:0x7b35c9d0] (Names: '|':UIView:0x7b35c5e0 )>","<_UILayoutSupportConstraint:0x7b35d270 V:[_UILayoutGuide:0x7b35cee0(0)]>","<_UILayoutSupportConstraint:0x7b35d1c0 _UILayoutGuide:0x7b35cee0.bottom == UIView:0x7b35c5e0.bottom>","<NSLayoutConstraint:0x7b360f30 'UIView-Encapsulated-Layout-Height' V:[UIView:0x7b35c5e0(480)]>")Will attempt to recover by breaking constraint <NSLayoutConstraint:0x7b35c170 V:[UIView:0x7b35c650(284)]>Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.2015-03-11 21:51:58.523 Gallery[3955:39020] Unable to simultaneously satisfy constraints.Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ("<NSLayoutConstraint:0x7b35bfe0 H:[UIView:0x7b35c650(160)]>","<NSLayoutConstraint:0x7b35d330 UIView:0x7b35c5e0.trailingMargin == UIView:0x7b35c650.trailing + 128>","<NSLayoutConstraint:0x7b35d360 UIView:0x7b35c650.leading == UIView:0x7b35c5e0.leadingMargin>","<NSLayoutConstraint:0x7b360f00 'UIView-Encapsulated-Layout-Width' H:[UIView:0x7b35c5e0(480)]>")Will attempt to recover by breaking constraint <NSLayoutConstraint:0x7b35bfe0 H:[UIView:0x7b35c650(160)]>Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.回顾我们之前的几节,我们需要为自动布局提供足够的约束让其计算所有view的位置和大小。现在我们的问题是,约束太多了“Unable to simultaneously satisfy constraints",这就意味着我们的约束出现了冲突。功夫不负有心人。

iOS 自动布局 Auto Layout 入门 05 相册 (上)

相关文章:

你感兴趣的文章:

标签云: