前言：
AutoLayout是讓UI適應控制元件自適應裝置尺寸變化的一項關鍵技術。隨著IOS Device的尺寸越來越多，很難再像以前一樣用一些固定的數字來佈置UI。
AutoLayout的實現有兩種方式

• Storyboard
• 程式碼

用Storyboard實現又有三種可選方式

• 藍色參考線來讓XCode自動建立
• 滑鼠拖拽來實現
• XCode中的一些選項按鍵配置

本文的內容包括

• Storyboard上的一些基礎知識
• 基於藍色參考線來建立AutoLayout

下一篇文章會繼續更新用Storyboard來建立AutoLayout，然後會用一篇文章講解下如何使用Code來實現AutoLayout

StoryBoard的一些準備知識

1 不同裝置Storyboard的選擇

當同一個程式同時服務不同尺寸的裝置時候，有時候要配置為不同的Storyboard如圖，在紅色圈的wAny hAny（width Any；height Any）中是選擇storyboard的按鍵。預設情況下是一個Storyboard適用所有裝置。

點選wAny hAny，如下圖。紅色圈圈的部分描述了哪些裝置當前Storyboard。

2 Storyboard上的View預覽。
預覽View對於AutoLayout來說比較重要，因為如果每次都Run－Debug，那麼太費時間了。
開啟輔助編輯視窗。(Command+Option+Enter

XCode自動建立AutoLayout

XCode可以自動建立AutoLayout，為什麼我說要基於藍色參考線呢？是因為，如果不基於藍色參考線，自動建立的Layout很可能和想要的差很多。

用藍色參考線來自動建立的過程
1. 按照藍色參考線放置控制元件

可以看到，在拖動的過程中出現了藍色參考線

1. 讓XCode自動建立
   選中Button，然後按照如圖
   

這樣，效果如下

可以看到，螢幕旋轉，Button始終在右上角。

後續

關於AutoLayout的文章我還會更新兩篇，一篇繼續講解如何用Storyboard上建立，另一篇講解如何用Code實現。