因應iPhone螢幕大小多元，介面元件間的相對位置有更好的解決方式，所以考慮使用Auto Layout吧！

1. Auto Layout 介紹
2014/09/02
HappyMan

2. 過去做法
• 使用frame和bounds
去決定物件的位置和⼤
大⼤ 小。
• 使用Autosizing Mask
– 設定當畫面大小變動時，
要固定的值(struts)。
– 在view的大小改變時可
以偵測super view的大
小改變去改變元件的寬
和高的值(springs)。

3. 旋轉？
期望的樣子

4. 設定Autosizing Mask
結果這樣子

5. 問題
• Autosizing masks在view的大小改變時，
可以改變物件的寬和高的值(springs)，但
是幾乎不可能精確設置如20-points的距離
在三個view之間。
• 我該怎麼辦？

6. AUTOLAYOUT和AUTORESIZING MASK
• Autoresizing Mask是Auto Layout的子集
• Auto Layout更多的功能：
– 指定任意兩個view的相對位置
– 可指定非相等約束(大於或者小於等)
– 可以設定約束的優先級

7. WHAT IS AUTO LAYOUT
• 一種基於約束的,描述性的佈局系統。 Auto
layout is a constraint-based, descriptive
layout system.
– 基於約束 - 以所謂相對位置的約束來定義的
– 描述性 - 使⼤ 用接近⼤ 自然語⼤ 言的⼤ 方法來進⼤
行描述
– 佈局系統 - 設計界⼤ 面的各個元素的位置
• 使用約束條件來描述佈局，view的frame會依
據這些約束來進行計算。
• Describe the layout with constraints, and
frames are calculated automatically.

8. THINKING OF AUTO LAYOUT
• 使用Auto Layout，我們關心的是每個view
之間的關聯。這種設計方式我們叫做「通
過目的來設計」，要表達的是要達到的目
標是什麼，而不是如何來完成目標。
• 「這個按鈕的左上角的坐標是(20, 20)」，
現在你可以這麼表達了「這個按鈕在它的
super view中垂直居中，把它放置在離它
的super view左邊緣的一個固定位置。」

9. 使用Auto Layout

11. Green View

12. Blue View

13. Purple View

14. Xcode預覽效果

15. NSLayoutConstraint 動態產生 Auto
Layout 的效果
/* Create an array of constraints using an ASCII art-like visual format string. */
• + (NSArray *)constraintsWithVisualFormat:(NSString
*)format options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics views:(NSDictionary
*)views;
/* Create constraints explicitly. Constraints are of the form "view1.attr1 = view2.attr2 * multiplier
+ constant” If your equation does not have a second view and attribute, use nil and
NSLayoutAttributeNotAnAttribute. */
• +(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier constant:(CGFloat)c;

16. • 我們把所有限制分成從水平與垂直兩方面來看，它們可以分別設定物件的寬
度與高度，以及他們在水平垂直面上的限制，下面是視覺化文字背後的語意。
• " V: " 和 " H: ”
分別代表由垂直或是水平方向來佈局。
• " | ”
代表 Superview 的邊界。
• " – ”
代表預設寬度或高度，如果在中間加上數字 " -20- "，則代表限制 20
個單位高度或寬度。
• " [ ] ”
代表物件本身，括號內包含物件的變數名稱與大小限制，可以使用關
係運算子（<＝、>＝ 或 ＝＝ 等）。
• " @ ”
優先權，1 至 1000 的整數，優先權較大的條件會優先被滿足，例如 ，
[ViewB(>=100@1000)]，物件 ViewB 不可以小於 100 個單位長度
或寬度會最優先被考慮。

17. 添加/移除約束到view
• - (void)addConstraint:(NSLayoutConstraint
*)constraint
• - (void)addConstraints:(NSArray *)constraints
• - (void)removeConstraint:(NSLayoutConstraint
*)constraint
• - (void)removeConstraints:(NSArray *)constraints
NS_AVAILABLE_IOS(6_0);

18. • 對於兩個同層級view之間的約束關係，添
加到他們的父view上

19. • 對於兩個不同層級view之間的約束關係，
添加到他們最近的共同父view上

20. • 對於有層次關係的兩個view之間的約束關
係，添加到層次較⼤ 高的父view上

22. 參考
• Furnace iOS 程式設計中文學習網站: Auto Layout
• Auto Layout介紹
• Auto Layout Keynote
• 10 Things You Need To Know About Cocoa Auto
Layout
• Video Tutorial: Beginning Auto Layout
• Beginning Auto Layout Tutorial in iOS 7: Part 1
• iOS/Mac Autolayout Constraints