[iOS] 使用Swift 開發科學計算機App (1)

使用工具版本 Xcode7 

程式語言 Swift

一般的計算機需要利用括號才能正確的做到先乘除後加減

這次練習開發的是可以直接支援先乘除後加減的計算機 APP

Main.storyboard ：主要的介面 Story board

LaunchScreen.storyboard 用來呈現 launch screen 時短暫跳出來的畫面

將上方的畫面工具列如上圖這樣設定

然後可以看到Code

我們點選storyboard 上面的 label 按住 control 往 Code 區拉 

 出現這個對話框，採用這些設定值

上方這些系統自動產生的Code目前不需要，先刪掉

現在我們可以很乾淨的看到，計算機顯示區域以及他的 Code

按住 option 點擊 code 可出現 Document

接著我們要開始拉計算機上面的數字按鈕

按鈕的Connection 屬性就不是純粹顯示的 Outlet，而是要選 Action 

Type 選 UIButton

名字的部分是取這個按鈕按下去會執行的 Method 

所以我們命名為 appedDigit

也就是這個按鈕一按下去後，會把這個按鈕上面的文字 Append 到顯示區域目前字串的後面

接著我們實作 AppendDigit 方法的內容

由於負責顯示區域的字串 display 是 optional 類型 也就是他如果沒有值的話，就會 nil

我們要使用 ! 來拆開包裝 將其從optional的字串變成普通的字串才能使用

以上是目前 appendDigit  function 的內容

可以看到，我們如果只是單純地按下按鈕，把它的文字加到目前字串的後面

那按下7兩次後，原本的 0 還在的情況下，7會直接 append 在後面，出現 077

這與我們預期只要出現的 77 不一樣！ 

必須做個機制來處理掉這個情況

於是乎～ 我們宣告一了一個變數 叫做 inTyping ，負責來記錄目前的狀態是否是使用者正在輸入的狀態，如果是的話，就直接將字串 append 在目前要顯示的字串後面

如果不是正在輸入的狀態，就直接把使用者輸入的字顯示出來，並且將狀態改成 true 代表 "正在輸入"的狀態

接著我們用複製貼上的方法，把其他數字的按鈕在介面上排一排

除了數字以外，我們還需要 return 圖示的按鈕

iOS 有內建的圖示可以用

可以去 Edit -> Emoji & Symbols 裡面找

選好 return 按鈕後，我們一樣點選它，並且按住 control 鍵，拖曳到 code 區域

並且如上圖設定一下這個按鈕的屬性

要注意的是

• Connection 設定成 Action

• Argument 設定成 None 即可

這裏的 method name 我們叫它 enter

以上就是目前所有的Code

可以看到 enter 方法裡面

首先將  inTyping 的狀態改為 false

然後透過 displayValue 把介面上顯示結果的字串轉成Double

再append到名為 operanStack 的Double array 中

最後印出結果在console中顯示看看是否正確

完成以上步驟後，按下執行

發現出現以上的問題

這個問題的原因是因為，介面上的 Button 都是複製貼上來的

但是當我複製貼上的時候，會聯同 Button 的 Connection 一起複製進來

導致 return 圖示的按鈕按下的時候，也會執行 appendDigit 方法造成錯誤！

要解決這樣的問題的做法很簡單

如上圖所示， return 圖示的按鈕上點選右鍵，可以看到屬性欄位中

Touch Up in... 這裏連結到的 Function 是哪個

我們將多連結到的 AppendDigit 方法刪除，只留下他連結到 enter 方法就好

即可解決此問題

順便也來檢查一下，數字按鈕所連結到的方法是否正確為 appendDigit()

將滑鼠移到 appendDigit 方法宣告那行 code 的左邊圓點上，他會變成 + 的符號，

並且會在Storyboard上把連結到這個方法的所有 Button 用藍色背景顯示出來！

同樣的方法可以用來檢查 return 鍵

看看這 enter 方法是否有正確地連結到 Storyboard 上的按鈕！

(下回待續...)