Auto layout （自動布局）

現在做網站不太可能 PC only，都是要跨裝置呈現網站內容，也就是在不同裝置、不同大小螢幕上的 UI 佈局要彈性化，自動調整物件的位置、尺寸等等。沒錯，就是「響應式網站」（RWD or AWD）。而 Auto layout 就是用來幫助我們達成這個需求的好工具，它可以模擬設計稿在不同螢幕尺寸下的樣子，達成設計稿 RWD，那要如何製作 Auto layout 物件呢？讓我們開始吧！

• 基礎模組：
  Auto layout 是由三個元素構成：內容(content)、內距(padding)、外框(border) 。
  
• 製作 Auto layout：
  將設計好的元素（例如卡片）選取起來，按右鍵／點擊 Add auto layout，就完成一個 Auto layout 物件。（也可以用快捷鍵： shift + A）。
• Auto layout 面版說明：
  點選 Auto layout 物件，右邊面版就可找到其屬性及各種控制項：
  

1. 物件的寬高：一開始是固定尺寸，可以點擊下拉選單就可以選擇其他非固定尺寸。
2. 佈局方向：垂直排列、橫向排列、折行。
3. 間距：內容物件之間的距離，而且是等距距離。
4. 內距：Auto layout 的上下、左右內距（padding）。
5. 對齊：內容物件的對齊方式。
   我們以卡片為例：
   

• 自動調整大小（Resizing）
  要做到 Resizing，主要是在於 Auto layout 內容的佈局設定，要如何設定呢？我們以垂直排列的卡片為例：

1. 選擇靠左對齊，這樣「圖片」、「場館名稱」「場館內容說明⋯⋯」則會齊左。
   
2. 點選「圖片」，在 Layout 面版中，將寬高選擇「Fill container」，圖片就會隨著 Auto layout 的尺寸改變而自動縮放。
   
3. 點選「場館名稱」或「場館內容說明描述⋯⋯」文字元素，在 Layout 面版中，將寬度選擇「Hug contents」，文字就會隨著 Auto layout 的尺寸改變而自動改變位置。
   
   成品：
   

你一定想問：面版裡面的各個屬性到底有什麼不同及用法？我們來看看
Fixed width：固定尺寸，內容不會隨著 Auto layout 改變尺寸而自動縮放或變動。
Hug contents：符合內容的寬度（高度），若 Auto layout 寬度（高度）比內容寬度（高度）還小，內容就會突出去（破版）。
Fill container：符合 Auto layout 的寬度（高度），若 Auto layout 物件寬度（高度）比文字寬度（高度）還小，內容就會折行。若內容不想折行，則可以選擇溢出的文字顯示省略符號「…」。

Add min width：將內容設定最小寬度，若到達最小寬度，Auto layout 物件不再縮小。
Add max width：將內容設定最大寬度，若到達最大寬度，Auto layout 物件不再放大。

以上是 Auto layout 最最最基本的觀念與設定，當然，它的運用很廣，也有很多變化，在學習的過程中會有很多「為什麼會這樣？」「為什麼沒有效？」「為什麼不聽話？」「為什麼OOXX@@」，相信我，這是正常的，也是必經之路，熟能生巧，過來人提一句：多練習準沒錯啦。