#45 iOS Auto Layout 的修練-1-雪地動物圖集

純練習，Auto Layout 置中、對齊、倍率，間距 (#hw16–0)

完成設定後，各種iPhone、iPad尺寸都看看，看起來很OK，都有依螢幕的尺寸自動做相應的調整。

那就開始設定囉！先拉一個大概的位置，開始調整 auto layout 的設定

1. 中心的圖片

先置中，長寬 150

刪掉圖片長寬固定數值，把圖片長寛改成跟螢幕的尺寸的比例值，這樣如果換到 ipad 比較大的尺寸，圖片也會跟著放大，

// winter.centerX = centerX           水平置中
// winter.centerY = centerY           垂直置中
// winter.width = 0.381679 × width    跟著 View 的寬度變動
// winter.height = 0.176056 × height  跟著 View 的高度變動

修改一下命名，加一下編號，比較不會混亂。

2. 第二圈：四個與中心圖片對角對齊的小圖

// winter1.trailing = winter.trailing       右邊對齊
// winter1.width = 0.4 × winter.width       寬縮小 0.4倍
// winter1.height = 0.4 × winter.height     寬縮小 0.4倍
// winter.top = winter1.bottom + 10         與 winter 間距 10

// winter2.top = winter.top               上邊對齊
// winter2.width = 0.4 × winter.width     寬縮小 0.4倍
// winter2.height = 0.4 × winter.height   寬縮小 0.4倍
// winter.leading = winter2.trailing + 10 與 winter 間距 10

// winter3.leading = winter.leading       左邊對齊
// winter3.width = 0.4 × winter.width     寬縮小 0.4倍
// winter3.height = 0.4 × winter.height   寬縮小 0.4倍
// winter3.top = winter.bottom + 10       與 winter 間距 10

// winter4.bottom = winter.bottom         下邊對齊
// winter4.width = 0.4 × winter.width     寬縮小 0.4倍
// winter4.height = 0.4 × winter.height   寬縮小 0.4倍
// winter4.leading = winter.trailing + 10 與 winter 間距 10

3. 第三圈，比第二圈的圖片放大 1.3 倍，中心點對齊第二圈圖片依所在位置的四邊之一

// winter11.centerY = winter1.top
// winter11.width = 1.3 × winter1.width
// winter11.height = 1.3 × winter1.height
// winter1.leading = winter11.trailing + 10

// winter21.centerX = winter2.leading
// winter21.width = 1.3 × winter2.width
// winter21.height = 1.3 × winter2.height  
// winter21.top = winter2.bottom + 10  

// winter31.centerY = winter3.bottom
// winter31.width = 1.3 × winter3.width
// winter31.height = 1.3 × winter3.height   
// winter31.leading = winter3.trailing + 10

// winter41.centerX = winter4.trailing
// winter41.width = 1.3 × winter4.width
// winter41.height = 1.3 × winter4.height
// winter4.top = winter41.bottom + 10  

最後的完成圖

最後在加一張背景圖

// trailing = background.trailing
// background.leading = leading
// bottom = background.bottom
// background.top = top   

最後把動物的圖片都放上去就完成啦。

GitHub - JasonHungApp/phw16-0-myAutolayout

參考

Understanding Auto Layout

Views with Intrinsic Content Size

Swift — 說說 堆疊視圖（ UIStack View ）