Swift / X-code 來AutoLayout一下吧!!

這一堂課算是跟之前教得有些不大一樣,之前不是拉畫面就是寫程式,總算是喘口氣了,那這一章節也是設計App當中非常重要的一環,總不能設計的App僅限某一款Iphone 使用吧…所以必須要有AutoLayout的功能,才能使App在各個Iphone中穿梭自如。

首先先介紹一下設定的功能介面好了。基本上會用到最多的就是這裡了。

這次的題目有四個,那就一個一個來解釋我的作業囉。

題目一:

三個image view水平排列,彼此間距10,距離左右邊界間距20, 等寬,寬高比例1:2,垂直置中。

那幾個重點先標出來,順便附上設定的圖:

1. 水平排列。

將三張圖選起來,一次設定三張圖,兩個方式 單純只要水平排列勾選1 就可以了,阿如果順便要跟整張view的中心點水平對齊的話就勾2 在這邊兩種都可以。那我是選2。

2. 彼此距離10。

照圖上指示,選起三張圖,更改左跟右的間距,那因為我不想留外邊線,所以要取消勾選Constrain to margins。

3. 最左跟最右距離20。

那因為剛剛我們一次更改全部圖的左右間距,所以我們必須來找到最左跟最右的距離把他更改成20。

4. 三個圖等寬,且寬高比1:2。

等寬的部分,按住control+拖曳拉線連到另一個圖,選擇等寬,

(如果要一次選多個可以按著shift在點選)

設定寬高比。1:2 也可輸入0.5

(因為1:2 就是1/2)

5. 垂直置中。

基本上,一步一步做應該就沒有問題了,如果有問題,就要在左邊一大堆藍色的線當中看看是不是有設定錯囉^_^

最後附上完成圖:

題目二:

2個button水平置中, button彼此的間距10(其中一Button較寬,另一個較窄)

這一題就不像第一題考這麼多基本功了,不過還是需要動動頭腦,那方法有兩種。(也是我亂按亂按按到的..)

方法一、 先拉兩個Button ,一個比較長,另一個就維持原長度。然後將兩個選起來後,點選右下角Embed in stack。就會自動將兩個加入其中。

再去右邊選單中 將距離調成10。 最後再將整個Stack View 置中在畫面中就可以了。

方法二:既然方法一做得出來,那方法二就是延伸囉。一樣的邏輯 將兩個Button 放入一個容器,也就是View 再去做相對位置的設定。最後再將整個View置中在畫面中囉。

題目三:

三個button水平排列, 彼此的間距以及和邊界的間距都一樣大, button的長度等於內容文字長度, 不同screen size時,間距大小不同

這題就真的是很難了,真的也是參考同學寫的才想到有這一招,不過也相對複雜。因為三個Button之間的間距一樣大也跟邊界的間距也一樣大,還要能隨著不同大小機型畫面時 間距還會自動變大變小。怎麼做呢?

方法就是 三個Button, 中間以及邊界全部塞上一個空白的元件,最好用的就是View囉。然後讓每個View的大小相等成比例。邊界緊貼畫面邊界,這樣不管Button長還短。View都會自行照比例分配大小。

原則就是

  1. view1 = view2 = view3 = view4
  2. view1->ButtonA->view2->ButtonB->view3->ButtonC->view4 間距為0
  3. 這7個元件的Y要設定。就索性讓他水平置中吧。
  4. 完成

題目四:

模仿一樣的圖囉。

那經過前三題的洗禮,這一題應該不成問題,我就把幾個要注意的點講一講就好了,

  1. 元件拉一拉,文字輸入完畢。
  2. 看圖中最一致的就是Text Field 就先設定上下間距10
  3. 在兩兩配對(Label & TextField) 做水平對齊。
  4. 一樣兩兩一組 設定左右邊界距離 20
  5. 再隨便挑一組 設定水平置中於畫面中心點。

6. 最後一樣兩兩一組 設定靠左對齊,但是要加上距離150。

至於為什麼是150 是因為Label當中最長的就是140.67了,為了要讓Label & Text Field 有點距離,所以我抓150。

下方的Button,就設定『左右邊界間距20』,『兩個之間的間距10』,『對下邊界間距20』再設定兩個Button的『寬相等』就可以了。

以上四個作業,完成!!!

那心得呢,其實我覺得設定這些條件剛開始學可能有點小複雜,但是練習過後,就知道…他是個很直覺的設定,在設定時只要想著,如果這個元件要你來執行,你從何得知這個元件該怎麼擺,上下左右XY有沒有都清楚,還是說跟別的元件相對位置有沒有完整,如果不完整你怎麼知道他高度要多高,邊界要多少。 當你這樣想時, 就在加條件吧^_^

最後設定完記得在全部掃過一次。因為練習這幾個作業後發現,好多條線功能是一樣的。

例如:設定比例:我設定了View的寬高比,但是我又設定了寬相等 & 高相等。 (那….既然有寬高比,何必多設一個寬相等或高相等呢?應該只需要一個寬 他自己會換算高才對吧!? )所以又可以刪除一些多餘的設定了~~

以上報告完畢。 該睡了~~~晚安^_^