猜數字 - CrazyBomb搭配Autolayout
這遊戲讓我想到當兵時, 放假每次跟一群同梯在火車上玩
輸的彈額頭, 偏偏小弟彈指神功了得, 每每台北站到了每個人都是額頭紅紅抬頭挺胸的出站。
遊戲規則簡單,1人當鬼寫下一個數字, 範圍是1~99,每人依序猜一個數字去夾鬼出的數字,猜中的人即輸。
轉到App上就由亂數取產生爆炸數字,依序輸入數字去縮小範圍,直到採中數字就算輸。比如截圖,輸的人就可以跟乃哥見上一面。
截圖
Gif
AutoLayout
希望畫面分成三區, 紫色跟黃色各佔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。
使用到的元件
- Label (Label也能切圓角,一樣設定layer.cornerRadius & Clips to bounds)
- ImageView
- Button
- Timer (當輸入數字超出範圍,Label變黃色,1秒後再變回白色,作為提醒用)
程式中常常遇到optional的一些錯誤警告,需要再多點練習才能更熟悉optional。
Autolayout也是需要多練習才會更了解那些錯誤警告是少了什麼條件
又或者如果我是電腦,光這些條件我能知道你東西要擺在哪裡嗎?,從這樣角度思考,或許就對autolayout更有感覺。