[iOS] Auto Layout 簡單範例學習

這篇文章是根據iOS開發者網站的Auto Layout教學裡面的範例製作的，大概算是比較清楚的給出官方的步驟吧？該網站寫的比較簡單，也當作是自己學習一次。

前言

在這個範例中我們會製作如同官方文件裡面呈現出來的結果，並加上簡單的說明。

首先，他在一個簡單的View controller中加上一個View container，然後在這裡面添加一個Scroll view和一些簡單的元件，然後在Scroll view中添加一個Text view示範Constraints的效果。

開始

首先開一個新專案，選擇single view application：

然後如同官方文件所述，可以參考裡面的圖片，先加入一個View container，然後在View container裡面添加一個Scoll view，然後在Scroll view內加入一個Text view，再於View container下方加上兩個按鈕，如下圖，注意我有為Scroll view的背景設定顏色，之後好分辨：

Controlling Scroll View Content Size

首先我們先控制Scroll view的大小，你要創建constraints去定義Scroll view的寬與高。

作法是用Control-drag從Scroll view拖曳到自己就放開，選擇width和height，我把：

你可以在裡面的constant設定好寬與高的數值。

你必須確定你創建了所有在Scroll view內的Subviews的constraints。比方說，當定義view的constraints時，如果這個view沒有ntrinsic content size，那你就必須建立包括leading edge constraint在內的各種constraints，像是trailing edge、width/height constraints，不可以漏掉。

Creating Anchored Views Inside a Scroll View

再來要在Scroll裡面放置Views，如同前述，我們要讓Text view處在Scroll view的下方，而且當Scroll view捲動時，text view不會移動，我們會使用Container view，讓Container view擁有scroll view，然後讓Scroll view內的Text view建立跟Container view之間的Constaints。由於我們是將Text view跟Container view定錨，所以Text view的位置不會受到Scroll view的影響。

作法一樣，Control-drag從Text view拖曳到Container view，建立Left/Right/Bottom等三個constraints。

如果這時候你用模擬器測試結果，那你會發現Text view一開始沒出現，記住要建立Text view的Width/Height的Constraints。

最後是建立Buttons的constraints。把Left button與View之間建立Leading的constraint，Right button與View之間建立Trailing的constraint，兩者都與View建立Bottom space to Bottom layout guide的constraints，最後模擬器的結果就會是這樣：

結論

我們建立了哪些Constraints呢？

• Scroll view本身的寬與高(和Container view相同)
• Text view本身的寬與高
• Text view和Container view之間的Left/Right/Bottom
• Button和View之間的 Leading/Trailing/Bottom
• Scroll view和View之間的 Leading/Trailing