<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]`