Swift|26 植物購物 App

把購物app結合我平常的嗜好-植物🌳

運用：UIStepper、IBAction、 IBOutlet、Scroll View水平捲動和分頁、Label、Button、Image View、數字變字串

成果

設定Scroll View

把會用到的物件設定好，商品選單放在Scroll View裡。
將View 先拉出 Exit 之外方便編輯，編輯完成再將 View 拉回 Scroll View 裡，拉進去之後，座標會在奇怪的位置，重新設定 View 的 X 和 Y，可以看到View出現在 scroll view 上。細節如下：

設定 content size，實現水平捲動，上下捲動和分頁的 scroll view

將View 先拉出 Exit 之外方便編輯

編輯完成再將 View 拉回 Scroll View 裡

拉IBAction、 IBOutlet

將各個產品數量、產品價格、總價的Label和Stepper拉上 IBOutlet

//數量
@IBOutlet weak var CatusQtyTextField: UILabel!
@IBOutlet weak var SnackQtyTextField: UILabel!
@IBOutlet weak var FigQtyTextField: UILabel!
@IBOutlet weak var SucculentQtyTextField: UILabel!
@IBOutlet weak var AnthuQtyTextField: UILabel!
@IBOutlet weak var AglaoQtyTextField: UILabel!
//價格
@IBOutlet weak var CatusPriceTextField: UILabel!
@IBOutlet weak var SnackPriceTextField: UILabel!
@IBOutlet weak var FigPriceTextField: UILabel!
@IBOutlet weak var SucculentPriceTextField: UILabel!
@IBOutlet weak var AnthuPriceTextField: UILabel!
@IBOutlet weak var AglaoPriceTextField: UILabel!
//Stepper
@IBOutlet weak var CatusStepper: UIStepper!
@IBOutlet weak var SnackStepper: UIStepper!
@IBOutlet weak var FigStepper: UIStepper!
@IBOutlet weak var SucculentStepper: UIStepper!
@IBOutlet weak var AnthuStepper: UIStepper!
@IBOutlet weak var AglaoStepper: UIStepper!
@IBOutlet weak var totalLabel: UILabel!

將每個產品的Stepper連上同一個IBAction，Stepper的數值傳到顯示產品數量的Text Field (QtyTextField) 裡。

再連一個IBAction，點Ｘ圖示的Button可以清空購物車。

@IBAction func changeQty(_ sender: UIStepper) {
itemCatus = Int(CatusStepper.value)
itemSnack = Int(SnackStepper.value)
itemFig = Int(FigStepper.value)
itemSucculent = Int(SucculentStepper.value)
itemAnthu = Int(AnthuStepper.value)
itemAglao = Int(AglaoStepper.value)
CatusQtyTextField.text = String(itemCatus)
SnackQtyTextField.text = String(itemSnack)
FigQtyTextField.text = String(itemFig)
SucculentQtyTextField.text = String(itemSucculent)
AnthuQtyTextField.text = String(itemAnthu)
AglaoQtyTextField.text = String(itemAglao)
calculate()
}
//清除購物車 將數值歸零
@IBAction func clearAll(_ sender: UIButton) {
CatusStepper.value = 0
SnackStepper.value = 0
FigStepper.value = 0
SucculentStepper.value = 0
AnthuStepper.value = 0
AglaoStepper.value = 0
CatusQtyTextField.text = "0"
SnackQtyTextField.text = "0"
FigQtyTextField.text = "0"
SucculentQtyTextField.text = "0"
AnthuQtyTextField.text = "0"
AglaoQtyTextField.text = "0"
totalLabel.text = "0"
}

建立儲存數量的變數

var itemCatus:Int = 0
var itemSnack:Int = 0
var itemFig:Int = 0
var itemSucculent:Int = 0
var itemAnthu:Int = 0
var itemAglao:Int = 0

設定顯示價格

把商品價格放到viewDidLoad裡

override func viewDidLoad() {
super.viewDidLoad()
CatusPriceTextField.text = "99"
SnackPriceTextField.text = "999"
FigPriceTextField.text = "1299"
SucculentPriceTextField.text = "599"
AnthuPriceTextField.text = "880"
AglaoPriceTextField.text = "499"
}

計算金額的公式

因為金額是新台幣，沒有小數點，所以用Int來轉字串，如果有小數點可以用Float來轉。

func calculate(){
//字串轉數字
let CatusPrice = Int(CatusPriceTextField.text!)!
let SnackPrice = Int(SnackPriceTextField.text!)!
let FigPrice = Int(FigPriceTextField.text!)!
let SucculentPrice = Int(SucculentPriceTextField.text!)!
let AnthuPrice = Int(AnthuPriceTextField.text!)!
let AglaoPrice = Int(AglaoPriceTextField.text!)!
//統計 金額x數量
let sum = CatusPrice * Int(itemCatus) + SnackPrice * Int(itemSnack) + FigPrice * Int(itemFig) + SucculentPrice * Int(itemSucculent) + AnthuPrice * Int(itemAnthu) + AglaoPrice * Int(itemAglao)
totalLabel.text = "\(sum)"
}

全部結帳金額顯示

將這個計算公式的function calculate()加入@IBAction func changeQty(_ sender: UIStepper) {}內，點擊Stepper時可以同時改變購物車的金額。

totalLabel.text = "\(sum)"

參考資料

#51 防疫生鮮購物 App — UIStepper 和數字變字串

#11 瘋狂購物 App — UIStepper 和數字變字串練習

GitHub

GitHub - ting3242006/shoppingApp