前言

之前都沒提到的排版，今天就要來跟大家聊聊Xcode 裡面好用的Auto Layout。

隨著各種尺寸的裝置出現，開發者在設計介面的時候，就要非常小心不同裝置下的顯示狀況，也因此Apple 很貼心的在Xcode 裡內建了一個Auto Layout 的功能。

Auto Layout 主要有兩個部分
1.size classes tool
2.constraints

size classes tool 可以立即變更裝置，而隨著裝置尺寸不同，我們可以立即看到各元件在各裝置上的呈現方式。好的排版是可以因應各種裝置的

constraints是一種侷限、約束。大部分，我們都把元件放在View裡面，那View的大小就侷限了元件的大小與位置，說得有點抽象，下面在一一解說。

Auto Layout的基本觀念

1.建立一個空白View Controller(我們預設裝置是iPhone 8 Plus)並在View 裡面加入一個Image View ，圖片是一艘船

請記得，創立空白View Controller 時，裡面就附送了一個免費且滿版的View (滿版：它會自動符合各種裝置大小)

在拖曳過程中，我們刻意把圖片放在View 的正中心，要判斷有沒有在正中心，可以看輔助線(藍色虛線)
PS:這邊故意強調藍色虛線，因為那只是輔助線，並不是實際Auto Layout的結果！！

2.來看看在各裝置下的呈現結果

點選Main.storyboaurd主編輯器下方 View as: 就可以出現下方畫面，可以看到有很多裝置可以選擇，右上角也有Auto Layout按鈕可以點選

iPhone SE裝置下，已明顯偏右下方

iPhone 4S裝置下，船有些已經跑出可視範圍了

3.開始排版前先聊聊四個屬性

• X軸(向右增加)
• Y軸(向下增加)
• width：元件寬度(間接與X軸有關)
• height：元件高度(間接與Y軸有關)
• 

Auto Layout不外乎要滿足上面這四個屬性，缺一不可！！
如果Auto Layout出現錯誤，一定是少了哪個屬性！

4.讓"船"永遠置中吧

點選船的圖片，按下Align的按鈕，選擇Horizontally in Container和Vertically in Container，接著Add 2 Constraints就可以了

來看看結果，右方屬性頁面多了兩個Constraints條件，點選"船"也可以看到兩條實心藍線

來看看iPhone SE下的呈現方式

iPhone 4S下的呈現方式

很棒，都置中了...
等等！Auto Layout成功了？？那跟上面提的四屬性什麼關係？？

決定X軸

Horizontally in Container，他的意思就是把元件放在Container的中間，而這裡的Container就是View(View Controller免費送的那個)，我上面有提到過，這個免費的View會隨裝置自動調整大小，所以我們在其他裝置下也都會水平置中了

決定Y軸

Vertically in Container，這個約束跟水平置中一樣，間接決定Y軸

那width 和 height呢？？

其實早在新增圖片的時候，我們就決定了元件(Image View)大小＝圖片大小，如果要嚴謹一點，應該要加入width 和 height的約束條件，讓我們把元件大小加入constraints吧

進階一點的Auto Layout，錨點？

錨點這個詞是我自創的拉，因為等等的Auto Layout會用到相對位置，這個觀念有點像船和船錨位置的相對關係，所以用這個詞來做解釋

1.我們先把船錨置中在裝置正中心，並在上面一段距離放上一條船

船錨就比照上方的條件，建立
Horizontally in Container
Vertically in Container
Width: 100
Height: 100

PS:小小提醒一下，大家可以看到上方預留了一點空間，這個高度是20 point，這個高度是頂部的狀態列

2.建立相對距離

點選船，右鍵拉藍線拖曳到船錨，就會出現選單，選擇Vertical Spacing，他就會自動加入船與船錨的「垂直相對距離」

因為船錨已經決定好(X,Y,Width,Height)，我們再建立船與船錨的垂直距離，也就間接決定了船的Y軸，再加上船本身圖片的大小，我們就只剩X軸還要設定了(可以看出Xcode已顯示紅線錯誤)

3.加入船的X軸設定

最快的方法就是加入Horizontally in Container，就可以完成Auto Layout

完成，都是實心藍線了

4.注意事項

• Horizontally in Container也間接決定了左邊界和右邊界，所以不設定Horizontally in Container就要注意左右邊界是否都已經設定

• 同理，Vertically in Container也間接決定了上邊界和下邊界，一樣要檢查是否缺少了

• 要使用錨點時，錨點本身的Auto Layout一定要先完成！！否則你永遠約束不完！