auto layout in i os 7
DESCRIPTION
TRANSCRIPT
ABOUT ME - CLAIRE CHANG
BLOG http://claire-chang.com/
FB https://www.facebook.com/claire0318
Email [email protected]
SKILL Action Script 3、FLEX 4、PHP、Objective-C
DREAMDevelop a game that everyone loved it!
過去的作法...
使⽤用frame和bounds去決定物件的位置和⼤大⼩小。
使⽤用autosizing masks
設定當畫⾯面⼤大⼩小變動時，要固定那些值(struts)。
在view的⼤大⼩小改變時，可以偵測super view的⼤大⼩小改變去改變物件的寬和⾼高的值(springs)。
THE PROBLEM WITH SPRINGS AND STRUTS
假如我們想要做這樣的旋轉效果....
藍⾊色⽅方塊的設定 紫⾊色⽅方塊的設定 ⿈黃⾊色⽅方塊的設定
真實的旋轉後狀況
Autosizing masks在view的⼤大⼩小改變時，可以改變物件的寬和⾼高的值(springs)，但是幾乎不可能精確設置如20-points的距離在三個view之間。
我該怎麼解決這個問題？
AUTOLAYOUT和AUTORESIZING MASK的區別
Autoresizing Mask是AutoLayout的⼦子集。
AutoLayout更多的功能
指定任意兩個view的相對位置
可指定⾮非相等約束（⼤大於或者⼩小於等）
可以設定約束的優先級
太棒啦～！
USE AUTO LAYOUT
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.
AUTO LAYOUT相關⾯面版
1. 左⽅方元件列表可看到現有view所有的約束。
2. 右⽅方⾯面版可以檢視所選擇元件的約束，並可編輯刪除。
3. 新增修改view的約束屬性
XCODE 5相關⼩小技巧
1 先選擇要預覽的scene
2
3
• 預覽畫⾯面旋轉
• 預覽在ios7之前版本的顯⽰示樣式1. 開啟Assistant Editor視窗（⻄西裝外套那個）
2. 按Assistant Editor上⽅方的Automatic
3. 選擇Preview > Main.storyboard(Preview)
螢幕尺⼨寸
翻轉
不同版本選擇
4. 右邊的視窗會出現預覽畫⾯面，此時可⽤用右下的預覽控制選項來選擇
THINKING OF AUTO LAYOUT
使⽤用Auto Layout，我們應該關⼼心每個view之間的關連。這種設計⽅方式我們叫做『通過⺫⽬目的來設計』，要表達的是要達到的⺫⽬目標是什麼，⽽而不是如何來完成⺫⽬目標。
“這個按鈕的左上⾓角的坐標是（20, 230）”,現在你可以這麼表達了 “這個按鈕在它的superview中垂直居中,把他放置在離它的superview左邊緣的⼀一個固定位置。”
BEFORE BEGINNING….
每⼀一個維度都需要⾄至少兩個條件。
當我們刪除⼀一個Constraints，便需要增加另⼀一個Constraints。
避免在尚未確認最後版⾯面時，便開始建置Constraints。因為當我們更改版⾯面上某⼀一個物件的條件時，很可能導致其他的條件也需要⼿手動增加條件，這很容易讓原有設定的畫⾯面產⽣生問題。
為了向後兼容，所有⽤用程式產⽣生的view，要記得關閉Autoresizing Masks。setTranslatesAutoresizingMaskIntoConstraints:NO;
Forget that the frame property exists. Never set it directly. A view’s frame is the result of the autolayout process, not an input variable. To change the frame, change the constraints. This forces you to change the way you think about your UI. Rather than thinking in positions and sizes, think of the rules that specify a each view’s positioning in relation to its siblings and parents. It’s not unlike CSS.
AUTO LAYOUT WARNINGS
Ambiguous Frames: 條件不⾜足。如：有⼀一個物件只給它⻑⾧長與寬，但沒有指定元件應該所在的位置，便會出現此警告。
Conflicting Constraint: 條件衝突。如：螢幕寬度為320，但我們設左邊留⽩白30、右邊留⽩白30、物件寬度等於300。這時就會出現條件衝突的警告，因為無法同時滿⾜足這些條件。
Misplaced View: storyboard上元件的位置或⼤大⼩小被改變了，但Constraints沒有變動。
⼿手動使⽤用API建⽴立CONSTRAINT
//這對應的約束是「button的底部（y） ＝ superview的底部 －10」。
[NSLayoutConstraint constraintWithItem:button
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-padding]
創建NSLayoutConstraint
將其添加到作⽤用的view上
-(void)addConstraint:(NSLayoutConstraint *)constraint;
對於兩個同層級view之間的約束關係，添加到他們的⽗父view上
對於兩個不同層級view之間的約束關係，添加到他們最近的共同⽗父view上
對於有層次關係的兩個view之間的約束關係，添加到層次較⾼高的⽗父view上
範例實作（⼀一）
範例實作（⼆二）
參考資料Beginning Auto Layout Tutorial in iOS 7 http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
Auto Layout Guide https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40010853-CH13-SW1
10 Things You Need To Know About Cocoa Autolayouthttp://oleb.net/blog/2013/03/things-you-need-to-know-about-cocoa-autolayout/
WWDC 2012 Session筆記—202, 228, 232 AutoLayout（⾃自動佈局）⼊入⾨門http://onevcat.com/2012/09/autoayout/
Auto Layouthttp://furnacedigital.blogspot.tw/2013/10/auto-layout.html
Autolayout percentage widths http://www.rsaunders.co.uk/2013/08/autolayout-percentage-widths.html
Q&A
謝謝⼤大家的聆聽