Swift-簡易計算機App Ver.1
製作簡易計算機App
算算結束Peter的iOS App 程式設計入門快要二週了,課程結束後都處於一直在回頭複習課程的狀態,觀看之前買的Udemy課程外,必須同時搭配Peter的投影片跟書,多管齊下!
但進度普通,記憶力與理解力不佳,遺忘或發現仍未理解某個內容時寧可回頭在重看一次Peter的投影片跟書。
近期剛好學到簡易計算機的部分,所以趁機完成一下Peter眾多作業中的某一份,計算機的功能需改進的內容太多,依照Peter文章列舉的項目,挑了幾項出來先完成第一版的簡易計算機App,項目分別為
採用 Auto Layout、加入小數點
其他功能有
加減乘除、負號、百分比
製作步驟如下:
Step1. 前置作業-計算機樣式
外觀大致依照iOS-11的sketch檔的內容設定Auto Layout,輔助工具Sketch和Zeplin的準備可以參考以下連結,可惜Sketch已超過試用期,所以只好使用先前臨摹存在Zeplin裡的相關資訊。
在Auto Layout設計部分,利用多層Stack view包住的方式設計,botton利用storyboard的keyPath轉為圓形按鈕。
Hint : 圓形按鈕設定後需run App才會看得到
Step2. 修改狀態列的style
由於背景的顏色一開始設為全黑,故在程式碼需使用perferredStatusBarStyle將狀態列改為light
可選的style分別為default、lightContent、darkContent
default與darkContent都顯示為dark的狀態列,適用於淺色背景
反之,lightContent則是顯示為light的狀態列,適用於深色背景
Step3. 建構數字鍵與清除鍵功能
將0~9的數字鍵的tag都設為對應數字,在IBAction內利用sender.tag獲得輸入的數字,並利用判斷使螢幕能顯示個位數以上的數值
清除鍵的功能則是先拉IBAction並將label.text設為0即可
Step4. 建構加減乘除功能
4–1. 先宣告會使用到的變數,修改清除的IBAction,加入宣告的參數,使得按下清除鍵後相關變數也回歸初始狀態
4–2. 分別將加減乘除以及”等於”拉IBAction,並將numbers的IBAction產生的label文內容轉型為Double,以利計算使用
4–3. 建立一個函式,將整數數值顯示成整數狀態,並將小數點取至第八位(無條件捨去)
4–4. 撰寫加減乘除以及”等於”的IBAction程式碼,前者四個程式碼內容大致相同,主要差異在顯示在螢幕上的運算符號、變數operation的內容,相同之處在於將performingMath設為true及將numberOnScreen指派成previousNumberOnScreen
等號則是藉由performingMath是否為true及operation內容來判斷計算的公式,最後須將對應的變數回歸初始值
Step5. 建構負號與百分比功能
Step6. 建構小數點功能
小小心得:
雖然很多地方都是參考網路上資訊,但想辦法理解打出來還挺花時間的!有發現錯誤的地方請多包涵!
第一次使用code medium擴件功能,尚在熟悉中…
待實現功能:
- 連續計算
- 先乘除後加減
- 可先輸入負號再輸入數字
- 倒退(單純第一版不想改版面設計)
參考資料