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. 建構小數點功能

成品

--

--