猜數字 - CrazyBomb搭配Autolayout

這遊戲讓我想到當兵時, 放假每次跟一群同梯在火車上玩
輸的彈額頭, 偏偏小弟彈指神功了得, 每每台北站到了每個人都是額頭紅紅抬頭挺胸的出站。

遊戲規則簡單，1人當鬼寫下一個數字, 範圍是1~99，每人依序猜一個數字去夾鬼出的數字，猜中的人即輸。

轉到App上就由亂數取產生爆炸數字，依序輸入數字去縮小範圍，直到採中數字就算輸。比如截圖，輸的人就可以跟乃哥見上一面。

截圖

Gif

AutoLayout

iPhone X, iphone 8+, iphone 4s

希望畫面分成三區, 紫色跟黃色各佔safe area的25%，黑色區塊佔50%

換言之，紫色view的Bottom會是在safe area的1/4處
也就是safe area的Bottom Y軸座標位置會是紫色view的4倍

黃色view除了Top設定緊連著紫色view，這比較沒什麼問題
重點在於黃色Bottm的位置希望會在safe area的1/2處，這樣黃色view才有25%。反之，safe area的Bottom會是黃色view Bottom的兩倍。

KeyPad的Button希望是正方形，而且在不同尺寸都能維持等比例的正方形縮放，且置中在黑色View

Botton想要正方形，先將長寬比例設定成1:1
再將三個Botton用水平StackView裝起來
設定StackView的Spacing，一旦Spacing設定不同，就會影響到Botton的寬度，就會間接把Bottn高度也一併調整。

因為有4個水平StackView要放
所以調整到一個Spacing可以在不同尺寸都能把4個StackView裝進去黑色View中。最後，再把4個Stackview用一個垂直的StackView裝起來，並且讓垂直Stackview置中黑色View。

使用到的元件

1. Label (Label也能切圓角，一樣設定layer.cornerRadius & Clips to bounds)
2. ImageView
3. Button
4. Timer (當輸入數字超出範圍，Label變黃色，1秒後再變回白色，作為提醒用)

程式中常常遇到optional的一些錯誤警告，需要再多點練習才能更熟悉optional。
Autolayout也是需要多練習才會更了解那些錯誤警告是少了什麼條件
又或者如果我是電腦，光這些條件我能知道你東西要擺在哪裡嗎?，從這樣角度思考，或許就對autolayout更有感覺。

kobe721013/CrazyBomb