堆疊視圖

新增一個專案，名稱 StackViewDemo

下載這個教材

解壓縮之後放到 Assets.xcassets (拖曳到 AppIcon 視窗)

點擊 Main.storyboard，將預覽裝置改成 iPhone 11 Pro

加入一個 Vertical Stack View

放入兩個 Label 到 Stack 裡面

把兩個 Label 改成這樣的文字

把第一個 Label 改成 40 點大小，紅色字體

點到 Stack View

把 Alignment 改成 Center

右上角按那把尺，將Ｘ跟Ｙ設定成 33 跟 70

新增一個元件 Image View

Image 的地方選擇 user1

切換到旁邊的尺規，設定為寬100高134

再新增兩個 Image View，分別放入 user2／user3，並且設定一樣的寬高

對這三個user按著 Ctrl 鍵往右拉，會跑出一條線，放開滑鼠就會跑出這個視窗，選擇 Aspect Ratio (約束長寬比)

把這三個圖片按著 Command 選起來

按下右下角的那個往下箭頭，選擇 Stack View

將這個 Stack 設定 Spacing 為 20 稍微拉開圖片間距

接著選取這兩個視圖

一樣選擇右下角的箭頭，選擇 Stack View

目前的結構是這樣

將最新這個 Stack View 的 Alignment 設定為 Fill

接著設定約束條件，按下畫面中的按鈕，設定上方50左右各10

按下 Add 3 Constraints，約束就設定完成了

點擊這個文字

將 Autoshrink 設定為 Minimum Font Size

新增一個 Label 到這個視圖下方

變更文字為 Need help with coding problem? Register!，並將文字設定為置中

新增兩個按鈕到螢幕下方

設定第一個按鈕文字為 Sign up ，背景顏色設定為紅色，字體顏色白色，寬度 200

另外一個按鈕設定為 Log in with Facebook，其餘按照上方的方式設定

把這兩個按鈕選起來

選擇右下方的箭頭，選擇 Stack view

接著選擇 Add new Alignment Constraints，把 Horizontally in Container 打勾，選擇 Add 1 Constraint

並且按下 Add new Constraints，將底部設定為20，按下 Add 1 Constraint

對著按鈕的視圖按著 Ctrl 並且拉動滑鼠並放開，選擇 Width

會跑出一個 Constraints 選擇下面的 Width = 145

將寬度設定為 200

按下模擬器測試一下畫面

選擇下面的 Orientation 把畫面改成橫向

點一下最上層的 Stack View

再點一下上方的藍色線

點一下 Constant 左邊的加號

將 Width 選為 Any 並且按下 Add Variation

將新增出來的 hC 改為 15

再來一樣點擊最外層的視圖

點擊 Alignment 左邊的加號

一樣 Width 選擇 Any，按下 Add Variation

把 hC 改成 Center

點擊 Need… 那個 Label

找到 Hidden 選項，按下左邊的加號

按照畫面上的設定，按下 Add Variation

將 hC 的 Hidden 打勾

如此，橫向的畫面就不會有那個文字顯示出來