#15 小費計算器

學習字串轉數字，optional binding，收鍵盤。

最近，練習了越來越多的ios App 開發Code，越來越覺得Apple 真的是一家了不起的公司，對於Steve Jobs更是越加的佩服！是怎麼樣的人生歷練，才有辦法讓他有這樣的一個商業模式？

為了讓更多人可以加入開發者，Apple 設計出了Swift 的程式語言，建立了Xcode 的程式開發軟體，在Book 的App 裡，提供了Develop in Swift 的課程，完全免費（單然，你必須要投資一台Mac 的電腦），只要你想，每個人都可以是開發者！

在“使用Swift開發 探索” 這本書的第一頁，（我把他截圖下來），裡面的一句話讓我找到我的”Why？“

Apple 開發Swift 程式語言，為的是人“人人都應該有機會透過創作來改變世界。”

今天，本著以上的初衷，我來帶各位加入Swift 的奧妙世界！

目標：構建小費計算器 iOS 應用程序，可動態計算不同的小費金額，並計算每個人平均付的金額。

成品

來吧，開始打開Xcode，建立一個新的Project

File > New > Project > App

• Product Name（專案名稱）: tippy01
• Team: 可以設定你的Apple ID，或是公司名
• Organization name: 可以設定公司的網域名或是輸入Apple 預設
• Organization Identifier: 會自動生成獨一無二的ID 識別碼
• Press Next （按Next ）下一步> 選擇你的儲存資料夾 > Create

• Done！新專案就建立好了！

再來，按下左邊的Main 來顯示main storyboard

開始加元件來建構Storyboard，這個App 只會有2種元件

1. UITextField：用來輸入資料
2. UILabel：用來標示和用來顯示結果的Label

來加入Label

按右上角+ ，來加入Label 到Main Storyboard

如法砲製，拉出7個Label。

加入UITextField

再如法砲製，拉出3個UITextField。

再來，把每一個Label 填上文字

計算結果我們先暫時打上文字，讓我們自己知道，最後再刪除。

將每一個元件定位好

下圖為每一個元件的位置圖

先把第一個“消費金額”定位好，再來其他元件就是對於他的相對位置。

調整位置方法如下：

Main Storyboard 就結束了，先用模擬器試試看吧

模擬器就出現了~~~

再來就是進到寫程式部分了

拉@IBOutlet，將UITextField，計算結果的Label 拉@IBOutlet。

按Xcode右上角很多橫線的Adjust Editor Option，然後選擇Assistant。就會出現ViewController 的程式碼頁面。

從左邊消費金額的TextField，按右鍵，拉到右邊class 跟 override 的中間。

然後輸入名稱，amounrPriceText

這樣就完成了

如法炮製，將其他的元件拉好

因為當用戶輸入完之後，我們希望用戶按空白處輸入鍵盤會收起來，這樣才可以看到計算結果。所以要加入元件Tap Gesture Recognizer.

一樣，在Xcode 右上按+ 號，顯示UI Library，搜尋 Tap Gesture Recognizer.然後加到StoryBoard 空白處。

OK，都準備好了，開始寫Code 吧。

開始拉@IBAction

1. 用戶按空白處輸入鍵盤會收起來。

按右鍵，從Tap Gesture Recognizer拉@IBAction 到 Assistant View，最後2個大掛號中間。

然後輸入 finishTyping，type 選UITapGestureRecognizer。按Connect

就把@Ibaction 拉好了。

在這個function 輸入

view.endEditing(true)

這樣，用戶按空白處輸入鍵盤會收起來。

2. TextField 拉 @IBAction

從 消費金額的UITextField，按右鍵拉至Assistant View，然後輸入calcuateAmount，type 選 UITextField，event 選 editing change，這樣才可以邊輸入，就會開始計算了。

再來，將小費% 跟 人數的UITextField 一樣拉@Ibaction 到 calcuateAmount 的@IBAction 裡。

最後，這個@IBAction 會對應到3個UITextField。

剛剛小費% 跟 人數的UITextField 拉@Ibaction 並沒有讓我們選擇Event，所以選擇我們要來改一下，改法如下圖。

介紹 Swift Optional

Swift的問號與驚嘆號：可有可無的 Optional

等一下，我們宣告的常數，會從UItextField 的 text 這個屬性讀取，那Text 這個屬性是String？，就是可有可無的Optional 的屬性，所以我們要先了解。

所以，宣告消費金額的Code 如下

let amountPrice = Double(amountPriceText.text!) ?? 0

let amoutPrice ： 宣告amountPrice 為常數。

Double ：amountPrice 為將字串轉為浮點數

！ ：將amountPrice 強制打開

？？ 0：如果輸入為“ABC” 的話，是沒辦法轉成整數的，所以就會變成0

不過，我們可以將UITextField 的Keyboard Type，指定為NumberPad，這樣就只能輸入數字，就不會出現這個問題。

所以我們幫3個UITextField 都宣告好為浮點數。

let amountPrice = Double(amountPriceText.text!) ?? 0
let tipPercentage = Double(tipPercentageText.text!) ?? 0
let people = Double(peopleText.text!) ?? 0

再來，就是宣告計算結果的公式

let tipsAmount = amountPrice * tipPercentage / 100
let totalAmount = tipsAmount + amountPrice
let payAmount = totalAmount / people

再來，就是讓計算結果顯示在相對應的Label 上。

現在，就必須將浮點數改字串

tipAmountLabel.text = String(format: "$%.0f", tipsAmount)
totalAmountLabel.text = String(format: "$%.0f", totalAmount)
averagePayLabel.text = String(format: "$%.0f", payAmount)

format : “%.0f” : 讓顯示出的數值為沒有小數點。

最後將計算結果3個Label 原本顯示的字刪除，這樣App 開啟的時候就不會有看到字（當然，不刪也可以）。

這樣這個APP就完成了

GitHub：

GitHub - bryan0011/tippy01