12 UIStepper 和數字變字串練習-嚕狗嚕貓APP
Published in
11 min readMay 10, 2023
平常就很喜歡就很喜歡在手機滑貓貓狗狗的影片,今天就來自肥作一個吸貓吸狗APP。
這次APP我卡很久,感謝彼得老師大大不厭其煩的幫我看問題。
心得:
- 在複製不同產品UIstepper的時候,沒有把其他產品的變數刪乾淨,所以數字計算異常。
- 這個APP是超過一天以上製作的,所以不小心把一個元件連上兩個action,結果也是APP大爆炸一波。
以下是操作畫面:
附上github
今天練習項目:
一、學習 UIStepper 和將數字變成畫面上的文字(字串)。
二、直式scroll view
三、清空鈕
四、照片圓角
說明:
一、製作UIStepper畫面
因為我是使用直式scroll view,我在view還沒放進scroll view的時候我就開始設計我的畫面,作好再放進scroll view裡面。
scroll view和照片圓角的操作可以參考彼得大大的文章:
做好畫面後,開始拉程式囉!我們以柴柴為例,柴柴有價格lable、購買數量lable、以及進行數量增減的UIStepper,另外設定起始數量為0。
//設定柴犬價格outlet
@IBOutlet weak var shibaPrice: UILabel!
//設定柴犬數量outlet
@IBOutlet weak var shibaQOutlet: UILabel!
//設定柴犬數量增減的UIstepper
@IBOutlet weak var shibaStepper: UIStepper!
//設定柴犬起始數量為0
var shibaQ:Int = 0
另外設定初始價格,
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//價格字串設定
shibaPrice.text = "30"
接下來設定UIStepper Action,使用按鈕後觸發function重新計算累計金額。
這邊我們先將ShibaStepper.value的字串轉為數字shibaQ,以便後續進行數字計算;接下來再柴柴也作相同的處理,轉為數字。
//設定柴犬UIStepper功能
@IBAction func shibaQAction(_ sender: UIStepper) {
//Stepper的item增減
shibaQ = Int(shibaStepper.value)
//數量轉為字串Q顯示
shibaQOutlet.text = String(shibaQ)
let shibaP = Int(shibaPrice.text!)!
//總價格計算
let totalPrice = (shibaQ * shibaP)
//總金額字串
amount.text = "\(totalPrice)"
}
二、 製作清空鈕
先在畫面上新增buttom,並設定action讓數值和累計價格皆歸零。
//設定清空鈕
@IBAction func clear(_ sender: Any) {
//Stepper清空
shibaStepper.value = 0
//數量字串清空
shibaQOutlet.text = "0"
//總金額清空
amount.text = "0"
}
以下是完整程式碼:
//
// ViewController.swift
// 購物APP
//
// Created by Hydee Chen on 2023/5/5.
//
import UIKit
class ViewController: UIViewController {
//設定看板娘Outlet
@IBOutlet weak var barOutlet: UIImageView!
//設定看板娘文字敘述Outlet
@IBOutlet weak var barTextOutlet: UILabel!
//設定小圓點outlet
@IBOutlet weak var pageControlOutlet: UIPageControl!
//設定柴犬價格outlet
@IBOutlet weak var shibaPrice: UILabel!
//設定柴犬數量outlet
@IBOutlet weak var shibaQOutlet: UILabel!
//設定柴犬數量增減的UIstepper
@IBOutlet weak var shibaStepper: UIStepper!
//設定柴犬起始數量為0
var shibaQ:Int = 0
//設定柴犬UIStepper功能
@IBAction func shibaQAction(_ sender: UIStepper) {
//Stepper的item增減
shibaQ = Int(shibaStepper.value)
//數量轉為字串Q顯示
shibaQOutlet.text = String(shibaQ)
let shibaP = Int(shibaPrice.text!)!
let SaP = Int(SaPrice.text!)!
let catP = Int(catPriceOutlet.text!)!
//總價格計算
let totalPrice = (shibaQ * shibaP) + (SaQnumber * SaP) + (cat * catP)
//總金額字串
amount.text = "\(totalPrice)"
}
//設定薩摩耶價格outlet
@IBOutlet weak var SaPrice: UILabel!
//設定薩摩耶數量outlet
@IBOutlet weak var SaQ: UILabel!
//設定薩摩耶數量增減Stepper
@IBOutlet weak var SaStepper: UIStepper!
//薩摩耶起始數量為0
var SaQnumber:Int = 0
//設定薩摩耶UIStepper功能
@IBAction func SaUIStepper(_ sender: UIStepper) {
//Stepper的item增減
SaQnumber = Int(SaStepper.value)
//數量轉為字串Q顯示
SaQ.text = String(SaQnumber)
//數量轉為字串Q顯示
let shibaP = Int(shibaPrice.text!)!
let SaP = Int(SaPrice.text!)!
let catP = Int(catPriceOutlet.text!)!
//總價格計算
let totalPrice = (shibaQ * shibaP) + (SaQnumber * SaP) + (cat * catP)
//總金額字串
amount.text = "\(totalPrice)"
}
//設定賓士貓價格UILable
@IBOutlet weak var catPriceOutlet: UILabel!
//設定賓士貓數量
@IBOutlet weak var catQLable: UILabel!
//設定賓士貓UIStepper
@IBOutlet weak var catStepper: UIStepper!
//賓士貓數量,初始值為0
var cat:Int = 0
//設定賓士貓UIStepper功能
@IBAction func catStepper(_ sender: UIStepper) {
//Stepper的Item增減
cat = Int(catStepper.value)
//數量轉為字串顯示
catQLable.text = String(cat)
//數量轉為字串Q顯示
let shibaP = Int(shibaPrice.text!)!
let SaP = Int(SaPrice.text!)!
let catP = Int(catPriceOutlet.text!)!
//總價格計算
let totalPrice = (shibaQ * shibaP) + (SaQnumber * SaP) + (cat * catP)
//總金額字串
amount.text = "\(totalPrice)"
}
//設定清空鈕
@IBAction func clear(_ sender: Any) {
//Stepper清空
shibaStepper.value = 0
SaStepper.value = 0
catStepper.value = 0
//數量字串清空
shibaQOutlet.text = "0"
SaQ.text = "0"
catQLable.text = "0"
//總金額清空
amount.text = "0"
}
//設定看板娘圖片array
let pictures = ["貓看板", "狗看板", "幼犬看板"]
//設定看板娘圖片敘述array
let eventWording = ["包套吸🐱五折起!", "香香狗狗味六折起", "cute puppy time❤️"]
//設定index
var index = 0
//設定小圓點action
@IBAction func pageControlAction(_ sender: Any) {
index = pageControlOutlet.currentPage
barOutlet.image = UIImage(named: pictures[index])
barTextOutlet.text = eventWording[index]
}
//設定下一頁
@IBAction func next(_ sender: Any) {
index = ( index + 1 ) % pictures.count
barOutlet.image = UIImage(named: pictures[index])
barTextOutlet.text = eventWording[index]
pageControlOutlet.currentPage = index
}
//設定上一頁
@IBAction func pre(_ sender: Any) {
index = ( index + pictures.count - 1 ) % pictures.count
barOutlet.image = UIImage(named: pictures[index])
barTextOutlet.text = eventWording[index]
pageControlOutlet.currentPage = index
}
//設定總金額
@IBOutlet weak var amount: UILabel!
func repeatData (index:Int){
barOutlet.image = UIImage(named: pictures[index])
barTextOutlet.text = eventWording[index]
pageControlOutlet.currentPage = index
}
//製作timer
private var timer:Timer?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//製作timer功能(待補)
/* repeatData(index: 0)
timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { _ in self.repeatData(index: self.pageControlOutlet.currentPage + self.pageControlOutlet.numberOfPages + 1 ) % self.pageControlOutlet.numberOfPages})
*/
//價格字串設定
shibaPrice.text = "30"
SaPrice.text = "40"
catPriceOutlet.text = "35"
}
}