#12 Auto Layout 練習
Auto Layout 的功能是在不同尺寸的 iPHONE iPad 可正常顯示畫面，了解Auto Layout用法後，用實例練習編寫各UI元件，真的，不熟練Auto Layout，還真的要花時間，還好有Stack View功能可以使用，若只有Auto Layout編寫畫面，恐要花更多時間在編寫畫面，以下是5個Auto Layout畫面。
- 三個 image view 水平排列，彼此間距10，距離左右邊界間距20, 等寬，寬高比例 1:2，垂直置中。
實作結果
iphone 12 畫面
iphone 4s 畫面
這個畫面的編輯邏輯是： 要先定位中間的圖片位置，再設置高寬比2:1，接下設兩旁圖片的間距及高寬比2:1即可。constrains 條件如下
2. 個 button 水平置中， button 彼此的間距10，垂直置中。如下圖所示，畫面的中心點將大約落在”王”字。
實作結果，iphone 12 畫面
這個畫面的重點設定是置中線偏移30，如下圖
iphone 4s 畫面
3.三個 button 水平排列，垂直置中，彼此的間距和邊界的間距都一樣大， button 的長度等於內容文字長度。不同 iPhone 尺寸時，間距大小不同 (另一種常見的設計為元件長度一樣，間距固定)
實作結果，iphone 12 畫面
上面 是 iphone 4s 畫面，編輯重點是 Hugging 和 compression…
4.將彼得潘圖片顯示在 iPhone 螢幕寬度的 1/3 ，高度 2/5 的位置，也就是圖片的 (x, y) 座標為 ( iPhone 螢幕寬度的 1/3， iPhone 螢幕高度的 2/5 )。(圖片的寬高請指定為 200 * 200 )
實作結果，iphone 12 畫面
只要依題目指示設定即可
5.實作以下畫面， 2 個 label 水平排列，彼此的間距和邊界的間距都是 10， 文字可填入任何內容。當文字內容不夠塞滿畫面寬度時，如左圖所示，讓紅色 label 拉長，藍色 label 維持文字內容的長度。當文字太多，畫面無法完整呈現時，如右圖所示，讓藍色 label 顯示 …，紅色 label 維持文字內容的長度。 (提示: Content Hugging Priority 和 Content Compression Resistance Priority)
實作結果，iphone 12 畫面
iphone 4s 畫面
設定的條件依題目提示設定，不可能…按鈕設定
抬頭看幾顆星…按鈕設定
作完練習的心得是：知易行難，還是要多多練習。
