仿iOS介面-基本型計算機 App

本來認為計算機的原理是很簡單的,後來開始寫了以後發現不是這樣的呀!才發現要考慮的東西越來越多,其實都是因為使用者的操作,才有這麼多複雜的東西….。

這次只能單純做二次的計算,還無法達到先乘除後加減,等下次有機會學比較多的時候再來改囉。

不過這次的成果有把%和+/-考慮進去,不過一開始要做其實想太多變得很複雜,最後還是參考了其他同學分享的案例。

參考教學

畫面搶先看

下載iOS GUI Sketch

因為想不到什麼好的設計創意,所以只好照著iOS的App來做,這篇文章主要也不是分享外觀設計,而是整體內部程式的邏輯架構思維,所以就看看囉!

將素材Export後加入到Xcode,並將UI製作好放在main.storyboard

main.storyboard畫面配置

在main.storyboard看到的都會是四四方方的形狀,主要是後面都透過參數的方式來變形,不免還是要說是layer.cornerRadius來將每顆按鈕圓角化。

建立連結關聯

將每一個按鍵、Label與ViewController建立連結(IBAction、IBOutlet)

開始撰寫程式

先宣告了兩個數值Double類型,為的就是紀錄使用者點選的第一個值和第二個值,第二個值會覆蓋第一個值,這樣的順序讓使用者可以一直操作下去,有點紀錄結果(第一個值),然後將結果(第一個值)和使用者輸入的值(第二個值)繼續做運算。

然後因為使用者過程會需要點選operatorSignButton就是運算符號的按鍵,所以我們必須要記錄使用者按的是什麼運算符號,這樣輸入第二個值的時候才知道要做什麼事情。

比較特別的還是一個是typeing的布林參數,主要就是若使用者點了運算符號或其他按鈕,代表他已經輸入完畢數值了,這樣程式方面才能知道什麼時候結束、什麼時候要計算。

我覺得我在做的時候總是習慣去紀錄上一個做的動作,所以有一個currentOperatorBtn就是來存按的按鍵,然後因為iOS在點選這些運算符號按鍵時會變色,所以這部分因考量模仿也做上去了。

然後要特別說到我參考的這位同學,他用了一個方法,我覺得非常Cool,就是這段程式碼,也就是物件input在=左邊的時候是set,若物件在=右邊則是get,這實在是太方便了!

接著正當我苦惱,小數點的部分要如何處理,總不能一直都有小數點以符萬一吧,所以我也是從同學們的範例中看到這個function,主要是先將值*到變成整數後判斷尾數,也就是要*多少個0才能夠成整數時,就大概知道幾位數了。

在viewDidLoad做的事情

在這個計算機中,唯一做的事情就是開起來要將Label設定為0,然後順便指定Label顯示字元的極限,若顯示的字元超過寬度要自動縮放字元大小已顯示整個值。

數字鍵點選事件

這個事件必須靠著IBAction來做事,因為數字鍵有10個,所以建議可以全部指向同一個IBAction_func,裡面判斷的就是使用者的行為要不要累加字串,還是歸0,至於 changeColor()是變更運算按鈕的顏色,待會會講到,另外紀錄使用者點選的是數字鍵,不是運算符號按鈕typeOperation = false

運算方法

因為整個過程都不斷的加減乘除,所以建議可以寫一個function來做這件事,之後要變更也非常輕鬆。

運算符號按鍵點下事件

在這個IBAction終究是要偵測使用者前面有沒有輸入值,然而他點了什麼運算符號按鍵,同時計算完成要將值塞回number01當作結果,同時畫面也要做變更,而且還要考慮他有沒有按過=鍵,若使用者沒有執行下個動作就不斷的點選運算符號,同樣的計算式會重做,就會有累加、減、乘、除的效果,然而我偷懶在%按鍵,我則在裡面強迫改變運算,有點算偷吃步的作法,主要就是將畫面值/100再去做顯示。

正負符號按鍵事件

正負按鍵主要的功能就是將畫面的值進行處理,基本上就是將值乘以-1的作法然後再塞回畫面,但因為操作上使用者可能還沒輸入第二個值就去做就會拿到第一個值,所以要判斷使用者的typeing。

變更按鈕顏色

在iOS的計算機中,點選運算按鈕會由橘色底變成白色底,同時tint的顏色也會相反,所以這個方法主要是做這段。

等於按鍵

等於按鍵跟運算符號按鍵大同小異,主要就是將number01、number02的值做處理,所以也是抓取operatorSign來做判斷。

AC清除按鍵

AC就是最簡單的將所有過程都清除,所以這邊就把它恢復原樣,把相關的開關(bool)和optional的值=nil。

成果分享

Github

--

--