#18 Auto Layout 相關作業

透過五個練習熟悉 auto layout (不使用Stack view及程式)

練習1 : (難度：☆☆)

解法：

1. 每張圖都加上長寬比為2:1的比例
2. 將中間圖檔設定於畫面中央，再加上左圖跟右圖的間距約束

練習2：(難度：☆)

解法：

1. 將第一個按鍵定位於中央，再微調水平位移使其"王"字約於中央位置
2. 加上第一個按鍵和第二個按鍵的間距

練習3：(難度：☆☆☆☆☆)

解法：

1. 需要使其3個按鍵的間隔及和左右邊界間隔都一致，沒有Stack View的協助下，得再新增4個view來充當空白間隔(在此設定橘色背景方便查看)
2. 首先設定3個按鍵跟4個view兩兩之間的間距皆為0
3. 接下來以第一個view為基準下，將其餘3個view都和第一個view作「等寬」、「等高」的約束
4. 再設定第一個view和第一個按鍵的「等高」、「垂直置中」的約束，並且以第一個按鍵為基準下，將其餘2個按鍵都和第一個按鍵都設上「等高」、「垂直置中」的約束
5. 最後將第一個按鍵加上垂直於容器的約束即可

練習4：(難度：☆☆☆)

解法：

1. 將圖片設定長寬皆為200
2. 圖片顯示在 iPhone 螢幕寬度的 1/3 ，高度 2/5 的位置，這句話意謂著「Image.leading = SafeArea.tailing * 1/3」及 「Image.top = SafeArea.bottom * 2/5」，這樣就可以設定起始位置的約束

練習5：(難度：☆☆☆☆)

解法：

1. 要讓上方的紫色 Label 可被拉長，意謂著其Content Hugging Priority的數值要比青色的 Label要來的小才行 (愈高代表Label的愈不能被更動)

青色 Label

紫色 Label

2. 要讓下方青色的 Label 可以壓縮其過長的文字，意謂著其Content Compression Resistance Priority的數值要比紫色的 Label要來的小才行 (愈高代表Label的愈不能被更動)

青色 Label

紫色 Label

參考：

『簡易說明Xcode』Auto Layout練習

GitHub：

GitHub - rjjq/autoLayoutPractices