2014年10月6日 星期一

Auto Layout 介紹

Auto Layout 是個讓界面上的物件可以依據螢幕解析度大小的不同layout到畫面上正確的位置上的技術,2011年在Cocoa中發表,在2012年隨著iOS 6發表用來取代autosizing masks (struts-and-springs model) 。Auto Layout除了解決應對不同螢幕大小解析度或是螢幕方向的問題,同時也解決了在localization上會遇到的問題包括一些從右讀到左的語言。

Auto Layout工具基本介紹:下面這些按鈕在Storyboard的右下角

(圖片取自AppCoda網站)

Align – 創造「對齊」相關的constraint
右邊的數字是可以設定你要它離開中心點多遠,如果你要它在正中心的話,當然就設定為零就可以了。

Pin – 創造spacing(空間)相關的constraint



Issues – Resolve layout issues.


Resizing – Specify how resizing affects constraints.
Sibling 兄弟
Ancestor 祖先
Descendants 後人
(這三個選項還不知道是做什麼的,只是先把英文翻出來Orz)

有時創造的constraint會互相衝突,這些衝突顯示在Interface Builder outline view上,點選Storyboard右下角的按鈕就可以展開,就像寫程式一樣,如果警示的圖案中間是個圓圈的話,Xcode還會幫你修正自動加上它認為最合適的constraint。
(圖片取自AppCoda網站)


右邊的Utilities裡的Size inspector,顯示每個constraint以及其數據,也可以在這裡直接編輯,再下面可以設定各個contraint的priority。

網路上找到別人寫的各個工具的細項介紹:IOS7.0 Xcode5 AutoLayout 备忘录


正常成功的constraint在Storyboard上是顯示藍色的
(圖片取自AppCoda網站)

 如果現有的constraint不足以完整地義該物件要放在哪裡,constraint就會是黃色的
(圖片取自AppCoda網站)


       設定Auto Layout就像寫程式一樣,背後也有一套邏輯在運作,只要跟著邏輯走就沒錯了。

       設定Auto Layout的時候要同時考慮該物件的「長寬」以及「位置」,初學者一開始都只有在思考位置的問題,但這樣該物件的的大小形狀就會被擠壓到。
       以下面這張圖為例,可以看到分別有兩條設定長寬constraint跟四條設定置中的constrain,如果只有設定置中的contraint的話,在preview裡面是完全看不到東西的,因為沒有設定該物件的長寬,所以這個色塊會被縮小成一點完全看不見。
但如果該物件的長寬是intrinsic Size,我們一般不會設定它的長寬,會讓它自動隨著需要做改變,像button跟label都是intrinsic size。

其實Auto Layout除了用constraint設定外,也可以用程式設定,關於Auto Layout的API是NSLayoutConstraint,不過用Xcode就可以完成大部份的Layout設定了,如果真的要用程式碼來設定那應該是相當複雜,網路上關於這方面教學文更是少之又少,我目前只有找到下面這幾篇是在講程式的:
NSLayoutConstraint 動態產生 Auto Layout 的效果
AutoLayout (2) 手動建立 NSLayoutConstraint


專有名詞解釋:

Leading Space:左邊
Trailing Space:右邊
inferred:推斷
Standard Value:Xcode建議的間隔大小


設定Auto Layout 的小訣竅:

  1. 在設定constraint時最好不要設定特定的數字,不管是位置還是長寬。除非你自己很清楚我就是要讓某個關係(長寬或間格)是在特定的數字。
  2. 在設定Auto Layout時要同時思考position跟size的問題

Xcode 6新增的功能:
Compact Width | Compact Height : iPhone in landscape
Compact Width | Regular Height : iPhone in portrait
Regular Width | Regular Height : iPad in portrait or landscape
所有設定一開始都一定要設定在Any Width | Any Height,要不然該設定就只會設定在特定的螢幕大小裡


相關WWDC Session:

  • 2011 Session 103 : Cocoa Autolayout
    • Basics
    • Runtime
    • Layering
    • Debugging
    • Transition
    • 2012 Session 202 : Introduction to Auto Layout for iOS and OS X
      • Setting up Constraint-Based Layout
      • Layout Behind the Scenes
      • The Visual Format Language:make your code more easier to read
      • Things That Can Go Wrong
      • Compatibility Issue
    • 2012 Session 228 : Best Practices for mastering Auto Layout
      • 教程式
    • 2012 Session 232 : Auto Layout By Example
      • Transitioning to Auto Layout
      • Explicit Widths
      • Localization
      • New API
      • Animation
      • 2013 Session 406 : Taking Control of Auto Layout in Xcode 5
        • 一開始還是有介紹一下Auto Layout,主要都是示範,相當值得一看,到後面有比較複雜的操作。
      史丹佛的課程:9. Animation and Autolayout(從25分開始講Auto Layout)

      這個課程設計的非常棒,在短短四十分鐘裡就講了很多東西,強烈建議一定要看,其中他介紹了設定Auto Layout的三種方式:
      1. 使用Xcode建議的constraint:方法是把物件放在Xcode推薦的blue guidelines上,然後再按下Issues的Reset to Suggested Constraints選項,Xcode就會自動幫你設定他認為最適合的constraint,而要Xcode設定到最正確的constraint就是要用Xcode建議的blue guidelines。
      2. 使用下面Align跟Pin的功能
      3. 使用control-drag的方式創造constraint:如果在物件內部拖曳,可以設定長寬,橫著拖曳可以設定寬度,直著拖曳可以設定高度,斜著拖曳可以設定長寬比;如果點住該物件往外面空的地方拖曳,可以設定與邊界的間隔;如果往其他物件身上拖曳,可以設定兩個物件的關係。


      教學文:

      Introduction to Auto Layout(AppCoda):非常非常非常簡略的介紹,光看這篇的話是絕對學不會的,不過可以當作最入門的文章,因為Auto Layourt東西實在很多,一開始就看長篇大論教學文實在會很令人心煩。

      Beginning Auto Layout in iOS 6(Ray Wenderlich):非常長很詳細,有分Part1, Part2。從上一代作layout的技術autosizing masks的缺點講起,我想如果是iOS的初學者,這部分就可以跳過了,直接從Designing like you mean it這個部分開始看就可以了,我們不需要知道以前的技術有多麼的不方便,如果是從iOS 6前就開始開發iOS的人才比較需要看這段,比較兩個技術的差別也比較容易轉換到Auto Layout。
      • Auto Layout的運作邏輯 Designing Like You Mean It:
        • The big advantage of using constraints is that you no longer have to fiddle with coordinates to get your views to appear in the proper places. Instead, you can describe to Auto Layout how the views are related to each other and Auto Layout will do all the hard work for you. This is called designing by intent.
        • When you design by intent, you’re expressing what you want to accomplish but not necessarily how it should be accomplished. Instead of saying: “the button’s top-left corner is at coordinates (20, 230)”, you now say: “The button is centered vertically in its superview, and it is placed at a fixed distance from the left edge of the superview.”
        • Using this description, Auto Layout can automatically calculate where your button should appear, no matter how big or small that superview is.
        • This makes the design of your user interfaces much more descriptive. You simply define the constraints, and the system calculates the frames for you automatically.
      • Interface Builder only adds new constraints when the existing ones are no longer adequate.
      • 名詞解釋:User constraint,比較粗的那種T-bar。
      Auto-Layout-Showcase:Project for demonstrating several auto layout techniques on iOS.
      《Auto Layout 使用心得》系列文章

      相關工具:

      可以幫你寫 constraint 的 code
      http://constraints.icodeforlove.com/

      Code
      FLKAutoLayout:FLKAutoLayout is a category on UIView which makes it easy to setup layout constraints in code.


      相關討論

      https://www.facebook.com/groups/iostw/permalink/990792090948140/
      解法:

      Superview.bottom = label.top x 3 + 150
      在storyboard中 multiplier設定3 constant設定150

      根據要求,上下空間比例為 1:2,所以上下加起來的空間高度是上面空間高度的三倍,然後還差 img 的高度 150

      於是上面空間 x 3 + 150 就等於整個畫面的高度

      上面空間是 label.top
      整個畫面的高度則是 Superview.bottom


      深入探討:

      影片
      1. Achieving Zen With Auto Layout(投影片


      2. Auto Layout v.s Programmatically Layout by Claire Chang + Jamie Sa + Zonble @Cocoaheads Taipei


      文章
      1. iOS Autolayout Fun Facts and Tips
      2. 10 Things You Need To Know About Cocoa Auto Layout
      3. Content Compression and Hugging in Auto Layout


      蘋果官方文件:Auto Layout Guide


      Auto Layout的東西真的非常多,如果要打算一開始就把所有的東西都看完,我想是不太可能的,因為像priority這樣非常深入的工具,如果自己沒有這個需要,那是很難體會它的實用性,就算硬去學跟著操作一遍我想也是根本記不起來的。

      我個人推薦學習Auto Layout的順序是:
      1. 先看些非常簡單的教學,像是AppCoda這篇
      2. 然後再去一部教學影片,比如說史丹佛上課的那部
      3. 然後再去了解全部Auto Layout的功能,了解知道就好,這樣之後遇到問題就知道要往哪裡深入了解,可以看我這篇文章一開始的介紹,我把所有關於Auto Layout的工具都介紹過一遍了(如有遺漏請告訴我,感謝~)