auto layout 介紹
Post on 17-Jul-2015
445 Views
Preview:
TRANSCRIPT
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
top related