iOS Developer新手筆記(二):Auto Layout

新手的第一個考驗,介紹用途與相關資源。


不同尺寸的畫面

在前篇初探Xcode中有提到,我們只要拖曳相關的元素到Storyboard,並且透過右方工具列的設定參數,就可以完成所見即所得的畫面。

前提是我們設計的頁面與模擬器是用個尺寸的iPhone。假如在iPhone SE設計畫面,模擬器選用iPhone 7,因為兩者尺寸不同,顯示出來的畫面就會跑版。

這樣聽起來,每種尺寸的畫面都要全部從頭設計嗎?

不用。Xcode有Auto Layout,一個超級強大的功能,讓開發人員設定好約束條件,元素就會乖乖到定位,而且不用寫程式碼。

雖然講起來好像很簡單,但我光研究這功能就花超過6個小時,才稍稍搞懂要怎麼使用。就像當初練習網頁設計,怎麼排版畫面都不對,或是加個新東西畫面就整個崩潰,再度重複了排版的奇幻旅程。


Auto Layout:約束條件

先舉個簡單的例子,首先我們變出一個農夫在iPhone SE尺寸大小的Storyboard左下方插秧。

隨著我點擊下方更換不同的畫面尺寸,就會看到農夫飛~起~來~了~~~

圖案的位置跑掉了!

這時我們只要緩緩打開右下角的Auto Layout相關功能,替圖案加上約束條件:點擊Add New Constraints中,元素左方和下方紅線,並把距離設為0。

再把WidthHeight也打勾加上約束條件,固定寬高。

現在農夫就乖乖待在畫面的左下角了,零距離的貼近左方跟下方畫面邊線。


Auto Layout:元素動態拉伸

表格的拉伸也是同樣的道理,我們拉Label改名為勇者名稱,再拉一個Text Field輸入欄位。先點選這兩個元素,並把他們加入Stack View設為群組,間距為10:

再針對這個群組設水平、垂直置中,最後設定距離左邊線、右邊線各30:

這樣一來,不論畫面尺寸如何變化,這個群組內部元素間距固定為10,始終水平、垂直置中,距離左邊線、右邊線各30,所以可以看到輸入欄位動態變長了。


理解約束條件

就像我們去電影院一樣,票上必須要有清楚的幾排幾號,才知道座位在哪邊。約束條件設定不清楚,就好像走進電影院,只知道是在第6排,但是不知道是幾號,那就有很多種可能,可能在左邊、中間、右邊,所以跑版常常是因為條件沒說明白,造成模擬器雖然知道條件,但是結果卻不是自己想要的。


Mysteries of Auto Layout

推薦2015年的蘋果全球開發者大會(WWDC),Mysteries of Auto Layout, Part 1講座,特別是前面的13分鐘有Auto LayoutStack View的Demo。整段40分鐘長的影片我總共看了2次,擷取一些重點段落:


約束條件的細節


推薦閱讀 iOS開發之Autolayout——“Content Compression Resistance”和“Content Hugging”,以下引用文章內的有趣比喻。


Content Hugging Priority:別扯我。數字越大越晚被拉伸。


Content Compression Resistance Priority:別擠我。數字越大越晚被壓縮。


App應用

不用寫一行程式碼,用Auto LayoutStack View做出直立與橫放的版型,包括圖片大小及位置,以及按鈕的上下與左右排列:


延伸閱讀

WWDC 2016 - What’s New in Auto Layout

Swift 新手系列之三:Auto Layout 介紹:更多細節以及點(Points)像素(Pixels)的差異。

iOS學習筆記(5)-Auto Layout基本原理:對於約束條件有詳細的圖解。

一篇文章詳解iOS之AutoResizing、AutoLayout、sizeClass來龍去脈:AutoLayout旨在替代Autoresizing。

Pala

於電商公司擔任Research Analyst,紀錄過去兩年下班自學簡報設計Python網頁設計AppGoogle Analytics分享;也推薦從架站、撰文到運營,首年12萬瀏覽的部落格心得。最近嘗試靠櫃試香水乾燥花裝飾音樂會,體驗生活之美。