iOS学习之Autolayout

转载自：http://vit0.com/blog/2013/12/07/iosxue-xi-zhi-autolayout/

学习资料

文章

• Beginning Auto Layout Tutorial in iOS 7: Part 1
• Beginning Auto Layout Tutorial in iOS 7: Part 2
• Auto Layout Guide（官方）

前两篇文章对如何在xcode 5中使用autolayout讲得已经很详细了。我使用了一段时间autolayout的感觉是，一般情况下都可以通过xcode的ib上直接设置autolayout的各种属性完成项目需求，除非遇到需求比较复杂的布局。

官方的Auto Layout Guide讲得详细易懂，推荐

WWDC视频

2012

• 202 – Introduction to Auto Layout for iOS and OS X
• 228 – Best Practices for Mastering Auto Layout
• 232 – Auto Layout by Example
• 以及obj.io对这三个视频的总结

2013

• Taking Control of Auto Layout in Xcode 5

一些学习到的知识点整理

用代码创建一个 NSLayoutConstraint

下面的方法遵循一个计算公式：

view1.attribute1 = multiplier × view2.attribute2 + constant

1 2 3 4 5 6 7

+ (id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attribute1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attribute2 multiplier:(CGFloat)multiplier constant:(CGFloat)constant;

例子：

• Button.centerX = Superview.centerX

1 2 3 4 5 6 7

[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0]

• Button.bottom = Superview.bottom –

1 2 3 4 5 6 7

[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0f constant:-padding]

创建完 NSLayoutConstraint 接下来要将它添加到 view 里，添加方法很简单，用 view 的- (void)addConstraint:(NSLayoutConstraint *)constraint添加。但是应该添加到哪个 view 里呢？

1. 兄弟 view 的 Constraint 添加到他们的 superview

2. 两个 view 的父 view 是兄弟关系的，Constraint 添加到父 view 的 superview 上

3. 如果两个 view 是 parent-child 关系，Constraint 添加到 parent view上

跨层级 view 之间的 Constraint

有如下的视图层级：

- View
    - UIScrollView
        - UISwitch
    - UIButton

其中UISwitch相对 UIScrollView 水平居中，和 ScrollView 同一层级有一个 UIButton，现在要始终保持 UIButton 的水平中点位置和 UISwitch 的水平中点位置在同一条线上。

为 UISwitch 的水平居中 Constraint 建立一个 IBOutlet。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

- (void)viewDidLoad { [super viewDidLoad]; // Remove the IB-generated constraint centering the switch in its super view [self.scrollView removeConstraint:self.horizontalSwitchConstraint] // Add a new constraint centering the switch on the button NSLayoutConstraint *cn = [NSLayoutConstraint constraintWithItem:self.switchButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.button attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0]; [self.view addConstraint:cn]; }

上面的的代码就实现了跨层级视图之间的 Constraint 设置。其实就是这么简单

设置Autolayout有两个原则

• Ambiguous Layout(The constraints must be suficient)
• Unsatisfiable Constraints(The constraints must not conflict)

在 IB 中设置明确的宽度

设置宽度有几个原则：

• 如果一个 View 的宽高在显示的时候是不确定的：让 view 根据内容改变大小（size to fit size）
• 如果一个 View 有确定的大小：改变其宽度的 Constraint Relation 为 >=
• 正确的设置Content Hugging Priority（内容压缩优先级）与Content Compression Resistance Priority（内容抗压缩优先级）

Relation（Greater/Less） 与 Priority

Greater/Less 一般与 Priority 一起使用，为一个 Constraint 设置了 Greater/Less 后，调整 Priority。如果 Constraint 的 Priority 的值越大，程序优先设置它的 Constraint 效果。

如果两个 View 不在同一个层级，此时想要设置他们之间的 Constraint，只能通过代码实现。简单的方式是：先在 Xcode 中设置了 Constraint，然后为这个 Constraint 建立一个 IBOutlet，回到代码中，移除想要替换的 Constraint。

Content Hugging Priority 与 Content Compression Resistance Priority

含义：

• Content Hugging Priority（内容压缩优先级）
• Content Compression Resistance Priority（内容抗压缩优先级）。

如果 Constraint 发生冲突时，会先找优先级高的UIView，满足优先级高的UIView 的Constraint 后再依次找优先级低的 Constraint 满足，最后改变 View 的 Frame。如果发生多个 Constraint不能同时满足的情况，就发生了Unsatisfiable Constraints的错误。

Visual Format Language

VFL(Visual Format Language),提供了一种让代码以一种可视化的方式来设置不同 views 之间的 Constraint。

1 2 3 4 5

[NSLayoutConstraint constraintsWithVisualFormat:@"[cancelButton]-[acceptButton]"] options:0 metrics:nil views:viewsDictionary]; UIButton *cancelButton = ... UIButton *acceptButton = ... viewsDictionary = NSDictionaryOfVariableBindings(cancelButton, acceptButton);

Examples:

Property Examples

Inequality,Priority	[wideView(>=60@700)]
Vertical:Flush Views,Equal Heights	V:[redBox][yellowBox(==redBox)]
Combination	H:|–[Find]–[FindNext]–[FindField(>=20)]–|

Constraint 在什么时候更新

UIView中

-setNeesdDisplay
-setNeedsLayout
-setNeedsUpdateConstraints

UIView/UIWindow中

-layoutIfNeeded

关于 intrinsicContentSize

在 UIView 中有个方法-intrinsicContentSize,用于指定一个 view 的 width 和 height，设置了-intrinsicContentSize相当于设置一个不可变的长度或者宽度。有点像 UISlider 只能设置宽度，不能设置高度那样。

Debug

1. 在 Xcode 中，设置 Autolayout 时可能出现3种状态，分别会出现黄色、红色、蓝色的线或线框。

   • 出现黄色的线或者线框表示：View 根据设置的 Constraints 最后计算出的 frame 位置和在xib 中 view 目前显示的位置不一致。此时并没有错误，只要更新一下 Update frames 以下就好
   • 出现红色的线或者线框表示：出现了Ambiguous Layout（Constraints 太少以至不能确定一个 view 的位置）或者Unsatisfiable Constraints（Constraints 有冲突，确定 view 一个方向上的 Constraints 超过1个）。这种情况要找到没有正确设置 Constraints 的 View 添加缺失的 Constraints 或者删除多余的 Constraints。
   • 蓝色线条或者线框表示这个 view 的 Constraints 正确设置，并且 view 目前显示的位置和 Constraints 计算得出的最终位置是在同一个地方。

2. 在代码添加 Constraints 的 Debug 方法。

   • 在控制台输出AutolayoutTrace：po [[UIWindow keyWindow] _autolayoutTrace]。如果此时有Ambiguous Layout或Unsatisfiable Constraints，可以在输出的代码中看到。

3. 有用的 debugging defaults

   • 双倍的国际化字符串：NSDoubleLocalizedStrings YES
   • 显示视图的对齐框：UIViewShowAlignmentRects YES

AutoresizingMask自动转化成 Constraint

view有一个 translatesAutoresizingMaskIntoConstraints 属性，如果设置为 NO，那么在运行时，程序不会自动将AutoresizingMask转化成 Constraint。

Animation

关键是在 UIView Animation 中调用[view layoutIfNeeded]

1 2 3 4 5 6

[UIview animateWithDuration:1.0 animations:^{ // Constraint Changed... [view layoutIfNeeded]; }];

Github上一些好用的Autolayout第三方库

• Masonry
• UIView AutoLayout

Comments