#5 Auto Layout 練習

目的: 熟悉 Auto Layout。

說明: 以下題目皆可從 Storyboard 設定 Auto Layout 條件實現，不需要用到 Stack View。有興趣多練習的朋友，也可製作多個版本，比方另外嘗試搭配 Stack View，或是從程式設定 Auto Layout。

1. 三個 image view 水平排列，彼此間距10，距離左右邊界間距20, 等寬，寬高比例 1:2，垂直置中。

2. 2 個 button 水平置中， button 彼此的間距10，垂直置中。如下圖所示，畫面的中心點將大約落在”王”字。

3. 三個 button 水平排列，垂直置中，彼此的間距和邊界的間距都一樣大， button 的長度等於內容文字長度。不同 iPhone 尺寸時，間距大小不同 (另一種常見的設計為元件長度一樣，間距固定)

4. 將彼得潘圖片顯示在 iPhone 螢幕寬度的 1/3 ，高度 2/5 的位置，也就是圖片的 (x, y) 座標為 ( iPhone 螢幕寬度的 1/3， iPhone 螢幕高度的 2/5 )。(圖片的寬高請指定為 200 * 200 )

5. 實作以下畫面， 2 個 label 水平排列，彼此的間距和邊界的間距都是 10， 文字可填入任何內容。當文字內容不夠塞滿畫面寬度時，如左圖所示，讓紅色 label 拉長，藍色 label 維持文字內容的長度。當文字太多，畫面無法完整呈現時，如右圖所示，讓藍色 label 顯示 …，紅色 label 維持文字內容的長度。 (提示: Content Hugging Priority 和 Content Compression Resistance Priority)

作品集

作業#51 — Auto Layout + stack view練習