Auto Layout 介紹

2014/09/02

HappyMan

過去做法

• 使用frame和bounds去決定物件的位置和⼤大⼤ 小。

• 使用Autosizing Mask

– 設定當畫面大小變動時，要固定的值(struts)。

– 在view的大小改變時可以偵測super view的大小改變去改變元件的寬和高的值(springs)。

旋轉？

期望的樣子

設定Autosizing Mask

結果這樣子

問題

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

• 我該怎麼辦？

AUTOLAYOUT和AUTORESIZING MASK

• Autoresizing Mask是Auto Layout的子集

• Auto Layout更多的功能：

–指定任意兩個view的相對位置

–可指定非相等約束(大於或者小於等)

–可以設定約束的優先級

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.

THINKING OF AUTO LAYOUT

• 使用Auto Layout，我們關心的是每個view之間的關聯。這種設計方式我們叫做「通過目的來設計」，要表達的是要達到的目標是什麼，而不是如何來完成目標。

• 「這個按鈕的左上角的坐標是(20, 20)」，現在你可以這麼表達了「這個按鈕在它的super view中垂直居中，把它放置在離它的super view左邊緣的一個固定位置。」

使用Auto Layout

Green View

Blue View

Purple View

Xcode預覽效果

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;

• 我們把所有限制分成從水平與垂直兩方面來看，它們可以分別設定物件的寬度與高度，以及他們在水平垂直面上的限制，下面是視覺化文字背後的語意。

• " V: " 和 " H: ”分別代表由垂直或是水平方向來佈局。

• " | ”代表 Superview的邊界。

• " – ”代表預設寬度或高度，如果在中間加上數字 " -20- "，則代表限制 20 個單位高度或寬度。

• " [ ] ”代表物件本身，括號內包含物件的變數名稱與大小限制，可以使用關係運算子（<＝、>＝或＝＝等）。

• " @ ”優先權，1 至 1000 的整數，優先權較大的條件會優先被滿足，例如，[ViewB(>=100@1000)]，物件 ViewB不可以小於 100 個單位長度或寬度會最優先被考慮。

添加/移除約束到view

• - (void)addConstraint:(NSLayoutConstraint*)constraint

• - (void)addConstraints:(NSArray *)constraints

• - (void)removeConstraint:(NSLayoutConstraint*)constraint

• - (void)removeConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0);

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

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

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

參考

• 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