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

by | 11 月 6, 2016

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

不同尺寸的畫面

在前篇初探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。

吳 致賢

吳 致賢

擁有 App/Web 開發經驗的軟體 PM,從 0 到 1 執行過 20 個以上全客製專案,包含悠遊付、friDay 影音等。關於我的簡歷點此

Recent Posts

時尚與穿搭,啟蒙我審美的影片

時尚與穿搭,啟蒙我審美的影片

在 YouTube 與 bilibili 看了超過一百部關於時尚、穿搭、服飾主題的影片,整理出幾個精選,希望讓讀者們從比較有趣的角度瞭解:)