---
# System prepended metadata

title: '<font color="#8A2BE2">[Udemy IOS Angela]</font> Ch6 Auto Layout and Responsive UIs'
tags: ['[Udemy IOS Angela Yu]']

---

<font color="#8A2BE2">[Udemy IOS Angela]</font> Ch6 Auto Layout and Responsive UIs
===
# Ch6

## 59. 為什麼要Auto Layout
因為沒做的話，一旋轉，換面就破壞了

* Size classes
* Constrain
* Alignment and Pinning
* Containers
* StackViews

## 60. Size Classes Explain


| Column 1 | Column 2 |  |
| -------- | -------- | -------- |
| ![](https://i.imgur.com/L46eSaX.png)     | ![](https://i.imgur.com/rXUTvPk.png)     |      |


```swift=
Command + R 重新run一次模擬器
```

## 61. Setting Constraints and working with the Safe Area
![](https://i.imgur.com/RgwiWzU.png)

![](https://i.imgur.com/DxCIeac.png)


右邊trailing變成Superview
![](https://i.imgur.com/0RtHCqV.png)

上方要保留不全滿版(改safe area.top)
![](https://i.imgur.com/ynvkBou.png)

## 62. How to use Alignment and Pinning
背景
![](https://i.imgur.com/bg8yqiu.png)

Logo
距離圖片保持30距離
![](https://i.imgur.com/N2Gw9lh.png)
水平至中
![](https://i.imgur.com/oKfJkeP.png)

## 63. Working with Containers and Subviews
背景調整
![](https://i.imgur.com/KYZz77F.png)

使用 Library+ UIView (是一張白底紙)貼上
![](https://i.imgur.com/8cDWIWJ.png)
左側View要再上方，顯示才會是下層
![](https://i.imgur.com/breza7t.png)

方法2 上方欄位 插入view
![](https://i.imgur.com/tJ3UmLI.png)

方法3 右下角 插入view
![](https://i.imgur.com/iL1dflV.png)

![](https://i.imgur.com/Vcp7qf3.png)

幫View命名
![](https://i.imgur.com/N6r7Cbe.png)

![](https://i.imgur.com/jl7QoE0.png)

## 64. Stack Views
方法1
![](https://i.imgur.com/KIyGNdo.png)

方法2
![](https://i.imgur.com/kRQrRhe.png)


Stack View完成 (這一章需要多練習，搭配影片再複習)
![](https://i.imgur.com/0TdOALO.png)

## 65. Auto Layout (Optional) Boss Challenge



| 目標 | 初始橫式 | 初始直式 |
| -------- | -------- | -------- |
| ![](https://i.imgur.com/9zs6WnP.png)| ![](https://i.imgur.com/NYwwSfT.png) |![](https://i.imgur.com/hYjvSbE.png)|


我完成的 (應該要平均放大填滿，即完成)
![](https://i.imgur.com/4GYXR85.png)
![](https://i.imgur.com/LqE0Uob.png)

參考解答後
![](https://i.imgur.com/X9f2pP6.png)
![](https://i.imgur.com/ZY7ebYm.png)

解題過程
水平 Stack View 每一行
![](https://i.imgur.com/NQvie72.png)

垂直的Stack View 每一列
![](https://i.imgur.com/pon97Ys.png)

垂直的Stack View 間距0 
![](https://i.imgur.com/AjEwSC8.png)
![](https://i.imgur.com/abYXEp8.png)

Alightment 改 Fill
![](https://i.imgur.com/xoDIAcf.png)

水平Stack View改 Fill Equally
![](https://i.imgur.com/bWoVYWa.png)

右下角兩個改 Stack View
![](https://i.imgur.com/wWFqDg8.png)

最下層 水平 Stack View改 Fill Equally
![](https://i.imgur.com/xBfh0iQ.png)

距離底部有距離 safe area
![](https://i.imgur.com/ewb62dm.png)

數字0 Label 加上 view
![](https://i.imgur.com/0o8mZqA.png)

數字0 Label 加上距離
![](https://i.imgur.com/5yFcBmq.png)

完成
![](https://i.imgur.com/eLCkcCA.png)





###### tags: `[Udemy IOS Angela Yu]`