『iOS APP-14』UIStepper 和數字變字串練習

剛好最近 Model S、Model X 在台灣重新販售，雖然價格也調降了許多，不過還是買不起 ( 笑。
所以就來做一個可以買很多特斯拉的購物 App，滿足自己一下吧～

配置畫面

畫面上面配置 1 個要切換圖片的 UIImageView、 1 個要切換名稱的 Label、 2 個要切換圖片用的 Button，以及 1 個 PageControl 。

畫面下方配置 1 個上下捲動的 ScrollView、 1 個相配的 View、 4 個車款名稱的 Label、4 個車款外型的 UIImageView、4 個車款詳情的 UIImageView、4 個車款價格的 Label、4 個車款用的 UIStepper。

拉 IBOutlet

將配置好的物件拉設 IBOutlet。

@IBOutlet var carImageView: UIImageView!
    @IBOutlet var model3Number: UILabel!
    @IBOutlet var modelYNumber: UILabel!
    @IBOutlet var modelSNumber: UILabel!
    @IBOutlet var modelXNumber: UILabel!
    @IBOutlet var totalPriceLabel: UILabel!
    @IBOutlet var carNumberLabel: UILabel!
    @IBOutlet var carNameLabel: UILabel!
    @IBOutlet var pageControl: UIPageControl!

設置參數

將處理好的照片圖片複製進 Assets 中，並用 Array 存好照片、車名，最後設置等等會用到的變數。

    var index = 0
    
    let carImages = ["Model 3","Model Y","Model S","Model X"]
    let carNames = ["Model 3","Model Y","Model S","Model X"]
    
//車子數量
    var model3Value: Int = 0
    var modelYValue: Int = 0
    var modelSValue: Int = 0
    var modelXValue: Int = 0
    
//車價
    let model3Price = 1754900
    let modelYPrice = 2119900
    let modelSPrice = 2665900
    let modelXPrice = 3105900

設置照片切換

跟前幾篇的作業一樣，透過 index 的值來控制要切換的圖片。
這邊也加入 PageControl 來顯示圖片在第幾張。

//圖片切下一張
    @IBAction func next(_ sender: Any) {
        index = (index + 1) % carImages.count
        carImageView.image = UIImage(named: carImages[index])
        carNameLabel.text = carNames[index]
        pageControl.currentPage = index
    }

//圖片切上一張
    @IBAction func pre(_ sender: Any) {
        index = (index + carImages.count - 1) % carImages.count
        carImageView.image = UIImage(named: carImages[index])
        carNameLabel.text = carNames[index]       
        pageControl.currentPage = index
    }

設置 Stepper

首先，這邊先設置總價格的 func。
為了使總價格容易判讀，上網搜尋到要加入下方參數，來讓數字有逗點。

  //計算總價
        func totalAmount() {
        let model3Total = model3Value * model3Price
        let modelYTotal = modelYValue * modelYPrice
        let modelSTotal = modelSValue * modelSPrice
        let modelXTotal = modelXValue * modelXPrice
        
        let totalPrice = model3Total + modelYTotal + modelSTotal + modelXTotal
        
      //增加逗點
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.maximumFractionDigits = 0
        totalPriceLabel.text = "\(formatter.string(from: NSNumber(value: totalPrice))!)"
    }
    
  //計算購買總車數
        func totalCarNumber() {
        let totalCarNumber = model3Value + modelYValue + modelSValue + modelXValue     
        carNumberLabel.text = "\(totalCarNumber)"
    }

設置 Stepper 時，sender 需選擇 UIStepper 才能將畫面中按『＋』、『 - 』的值回傳至程式中，讓程式依照數值來做動。

//Model3的Stepper   
    @IBAction func model3Stepper(_ sender: UIStepper) {
        model3Value = Int(sender.value)
        model3Number.text = "\(model3Value)"
        totalAmount()
        totalCarNumber()
    }
    
//ModelY的Stepper    
    @IBAction func modelYStepper(_ sender: UIStepper) {
        modelYValue = Int(sender.value)
        modelYNumber.text = "\(modelYValue)"
        totalAmount()
        totalCarNumber()
    }
    
//ModelS的Stepper
    @IBAction func modelSStepper(_ sender: UIStepper) {
        modelSValue = Int(sender.value)
        modelSNumber.text = "\(modelSValue)"
        totalAmount()
        totalCarNumber()
    }

//ModelX的Stepper
    @IBAction func modelXStepper(_ sender: UIStepper) {
        modelXValue = Int(sender.value)
        modelXNumber.text = "\(modelXValue)"
        totalAmount()
        totalCarNumber()
    }

設置重置按鈕

先將剛剛的 Stepper 做 IBOutlet 的連結。
因為要將所有東西重置，所以這邊將每個 Stepper 的 value 設為 0。
跟著 Stepper 數值跑的數量 Label 也設置為 0。

最後畫面上方的總金額、總購買車子數量也都設為 0 即可。

//重置按鈕
    @IBOutlet var model3Stepper: UIStepper!
    @IBOutlet var modelYStepper: UIStepper!
    @IBOutlet var modelSStepper: UIStepper!
    @IBOutlet var modelXStepper: UIStepper!
    
    @IBAction func reset(_ sender: Any) {
        model3Stepper.value = 0
        modelYStepper.value = 0
        modelSStepper.value = 0
        modelXStepper.value = 0
        
        model3Number.text = "0"
        modelYNumber.text = "0"
        modelSNumber.text = "0"
        modelXNumber.text = "0"
        
        totalPriceLabel.text = "0"
        carNumberLabel.text = "0"
    }

完整程式碼

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var carImageView: UIImageView!
    
    @IBOutlet var model3Number: UILabel!
    @IBOutlet var modelYNumber: UILabel!
    @IBOutlet var modelSNumber: UILabel!
    @IBOutlet var modelXNumber: UILabel!
    @IBOutlet var totalPriceLabel: UILabel!
    @IBOutlet var carNumberLabel: UILabel!
    @IBOutlet var carNameLabel: UILabel!
    @IBOutlet var pageControl: UIPageControl!
    
    var index = 0
    
    let carImages = ["Model 3","Model Y","Model S","Model X"]
    let carNames = ["Model 3","Model Y","Model S","Model X"]
    
    var model3Value: Int = 0
    var modelYValue: Int = 0
    var modelSValue: Int = 0
    var modelXValue: Int = 0
    
    let model3Price = 1754900
    let modelYPrice = 2119900
    let modelSPrice = 2665900
    let modelXPrice = 3105900
    
    func totalAmount() {
        let model3Total = model3Value * model3Price
        let modelYTotal = modelYValue * modelYPrice
        let modelSTotal = modelSValue * modelSPrice
        let modelXTotal = modelXValue * modelXPrice
        
        let totalPrice = model3Total + modelYTotal + modelSTotal + modelXTotal
        
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        formatter.maximumFractionDigits = 0
        totalPriceLabel.text = "\(formatter.string(from: NSNumber(value: totalPrice))!)"
    }
    
    func totalCarNumber() {
        let totalCarNumber = model3Value + modelYValue + modelSValue + modelXValue
        
        carNumberLabel.text = "\(totalCarNumber)"
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        carImageView.image = UIImage(named: carImages[index])
        
    }

//圖片切下一張
    @IBAction func next(_ sender: Any) {
        index = (index + 1) % carImages.count
        carImageView.image = UIImage(named: carImages[index])
        carNameLabel.text = carNames[index]
        pageControl.currentPage = index
    }

//圖片切上一張
    @IBAction func pre(_ sender: Any) {
        index = (index + carImages.count - 1) % carImages.count
        carImageView.image = UIImage(named: carImages[index])
        carNameLabel.text = carNames[index]       
        pageControl.currentPage = index
    }
    
    
    
//Model3的Stepper   
    @IBAction func model3Stepper(_ sender: UIStepper) {
        model3Value = Int(sender.value)
        model3Number.text = "\(model3Value)"
        totalAmount()
        totalCarNumber()
    }
    
//ModelY的Stepper    
    @IBAction func modelYStepper(_ sender: UIStepper) {
        modelYValue = Int(sender.value)
        modelYNumber.text = "\(modelYValue)"
        totalAmount()
        totalCarNumber()
    }
    
//ModelS的Stepper
    @IBAction func modelSStepper(_ sender: UIStepper) {
        modelSValue = Int(sender.value)
        modelSNumber.text = "\(modelSValue)"
        totalAmount()
        totalCarNumber()
    }
    

//ModelX的Stepper
    @IBAction func modelXStepper(_ sender: UIStepper) {
        modelXValue = Int(sender.value)
        modelXNumber.text = "\(modelXValue)"
        totalAmount()
        totalCarNumber()
    }
    

//重置按鈕
    @IBOutlet var model3Stepper: UIStepper!
    @IBOutlet var modelYStepper: UIStepper!
    @IBOutlet var modelSStepper: UIStepper!
    @IBOutlet var modelXStepper: UIStepper!
    
    @IBAction func reset(_ sender: Any) {
        model3Stepper.value = 0
        modelYStepper.value = 0
        modelSStepper.value = 0
        modelXStepper.value = 0
        
        model3Number.text = "0"
        modelYNumber.text = "0"
        modelSNumber.text = "0"
        modelXNumber.text = "0"
        
        totalPriceLabel.text = "0"
        carNumberLabel.text = "0"
    }
}