『iOS APP-16』訂購餐點 (if else、Switch)

target

利用製作點餐app，練習if、else的條件式。

process

step 1. 規劃畫面配置 & 拉IBOutlet & 宣告變數

IBOutlet

@IBOutlet var pizzaMenuImageView: UIImageView!
    @IBOutlet var sizeSegmentedControl: UISegmentedControl!
    @IBOutlet var flavorSegmentedControl: UISegmentedControl!
    
    @IBOutlet var pizzaNameLabel: UILabel!
    @IBOutlet var comboLabel: UILabel!
    @IBOutlet var cheeseLabel: UILabel!
    @IBOutlet var pizzaNumberLabel: UILabel!
    @IBOutlet var flavorLabel: UILabel!
    @IBOutlet var orderLabel: UILabel!
    
    @IBOutlet var comboSwitch: UISwitch!
    @IBOutlet var cheeseSwitch: UISwitch!
    @IBOutlet var pizzaNumberStepper: UIStepper!
    
    
    @IBOutlet var orderNameTextField: UITextField!
    @IBOutlet var phoneNumberTextField: UITextField!
    @IBOutlet var remarkTextField: UITextField!
    
    
    @IBOutlet var pageControl: UIPageControl!

變數

    var index = 0

    var size = ""
    var flavor = ""
    var combo = ""
    var cheese = ""
    var number = 0
    
    var orderText = ""
    var phoneNumberText = ""
    
    let pizzaNames = ["","夏威夷披薩","香辣雞球披薩","金沙松阪豬披薩"]
    let pizzaImages = ["0","夏威夷披薩","香辣雞球披薩","金沙松阪豬披薩"]

step 2. 拉IBAction

圖片切換(button)

//下一張圖片
  @IBAction func next(_ sender: Any) {
        index = (index + 1) % pizzaImages.count
        
        pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
        
        pizzaNameLabel.text = pizzaNames[index]
        
        pageControl.currentPage = index
        
    }
    
 //上一張圖片  
    @IBAction func pre(_ sender: Any) {
        index = (index + pizzaImages.count - 1) % pizzaImages.count
        
        pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
        
        pizzaNameLabel.text = pizzaNames[index]
        
        pageControl.currentPage = index
        
    }

選尺寸(segmentedControl)

@IBAction func chooseSize(_ sender: UISegmentedControl) {
        if sizeSegmentedControl.selectedSegmentIndex == 0 {
            size = "7吋"
        }else if sizeSegmentedControl.selectedSegmentIndex == 1 {
            size = "12吋"
        }
    }

選口味(segmentedControl)

選口味後也會因為前面選擇的尺寸 (7"、12") 不同，而顯示的價錢也不同。
所以要使用 if else 的條件式來篩選符合的條件，來執行相對應的程式。

 @IBAction func chooseFlavor(_ sender: UISegmentedControl) {
      //如果選擇夏威夷口味 並且 選擇7吋
        if flavorSegmentedControl.selectedSegmentIndex == 0 && sizeSegmentedControl.selectedSegmentIndex == 0{
            flavor = "夏威夷"
            flavorLabel.text = "140元"
            index = 1
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index

      //如果選擇香辣雞球口味 並且 選擇7吋
        }else if flavorSegmentedControl.selectedSegmentIndex == 1 && sizeSegmentedControl.selectedSegmentIndex == 0 {
            flavor = "香辣雞球"
            flavorLabel.text = "150元"
            index = 2
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index

      //如果選擇金沙松阪豬口味 並且 選擇7吋
        }else if flavorSegmentedControl.selectedSegmentIndex == 2 && sizeSegmentedControl.selectedSegmentIndex == 0{
            flavor = "金沙松阪豬"
            flavorLabel.text = "160元"
            index = 3
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index

      //如果選擇夏威夷口味 並且 選擇12吋
        }else if flavorSegmentedControl.selectedSegmentIndex == 0 && sizeSegmentedControl.selectedSegmentIndex == 1 {
            flavor = "夏威夷"
            flavorLabel.text = "345元"
            index = 1
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index

      //如果選擇夏威夷口味 並且 選擇12吋
        }else if flavorSegmentedControl.selectedSegmentIndex == 1 && sizeSegmentedControl.selectedSegmentIndex == 1 {
            flavor = "香辣雞球"
            flavorLabel.text = "365元"
            index = 2
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index

      //如果選擇夏威夷口味 並且 選擇12吋
        }else if flavorSegmentedControl.selectedSegmentIndex == 2 && sizeSegmentedControl.selectedSegmentIndex == 1{
            flavor = "金沙松阪豬"
            flavorLabel.text = "375元"
            index = 3
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index
        }
        
    }

選套餐(switch)

一樣使用 if else 條件式篩選條件，並利用 combo 變數儲存不同條件下的資訊。

 @IBAction func chooseCombo(_ sender: Any) {
      //如果套餐開關.打開 並且 選擇7吋
        if comboSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 0{
            combo = "套餐"
            comboLabel.text = "+38元"

      //如果套餐開關.打開 並且 選擇12吋
        }else if comboSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 1{
            combo = "套餐"
            comboLabel.text = "+223元"

      //其餘狀況(套餐開關.關閉)
        }else {
            combo = ""
            comboLabel.text = "+0元"
        }
    }

選加量起司(switch)

一樣使用 if else 條件式篩選條件，並利用 cheese 變數儲存不同條件下的資訊。

@IBAction func addCheese(_ sender: Any) {
      //如果起司開關.開啟 並且 選擇7吋
        if cheeseSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 0{
            cheese = "加起司"
            cheeseLabel.text = "+20元"

      //如果起司開關.開啟 並且 選擇12吋
        }else if comboSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 1{
            cheese = "加起司"
            cheeseLabel.text = "+40元"

      //其餘狀況(起司開關.關閉)
        }else {
            cheese = ""
            cheeseLabel.text = "+0元"
        }
    }

數量加減(stepper)

將 stepper 拉 IBAction 出來，sender 選 UIStepper。
用 number 變數儲存畫面 stepper 回傳回來的值。

@IBAction func stepperCount(_ sender: UIStepper) {
            number = Int(sender.value)
            pizzaNumberLabel.text = "\(Int(sender.value))"
        }

加入購物車 與 訂購 (label)

在 Text Field 的 Placeholder 欄位中輸入文字，就能在畫面中 TextField 格中看到淺灰色的文字。

Label 右方欄位中的 Lines ，能依照自己要顯示的行數做調整。

這邊有遇到一個問題，原先為了讀取 TextField 中的資訊，而另外拉了 IBAction 出來，並用變數儲存 UITextField 的資料。(如下)

    @IBAction func orderName(_ sender: UITextField) {
        orderNameText = sender.text!
    }

    @IBAction func orderPhoneNumber(_ sender: UITextField) {
        phoneNumberText = sender.text!
    }

不過這樣會造成在讀取資料時，遇到無法同步更新全部 TextField 的情形。(如下)

所以就請教 Peter 有什麼更好的方法能解決這個問題呢？
Peter 說應該直接將 IBOutlet 的變數讀取進來即可。

最後更新完後就可以同步更新啦！

  //加入購物車
    @IBAction func addToList(_ sender: Any) {  
        orderLabel.text = "\(number)份 \(cheese) \(size)\(flavor)披薩 \(combo)"
    }


  //訂購
    @IBAction func order(_ sender: Any) {
        orderLabel.text = "\(orderNameTextField.text!)先生/小姐，謝謝您的訂購！\n您的電話號碼為: \(phoneNumberTextField.text!)\n您的訂購清單如下:\n\n\(number)份 \(cheese) \(size)\(flavor)披薩 \(combo)"
    }

import UIKit

class ViewController: UIViewController {
    
    
    @IBOutlet var pizzaMenuImageView: UIImageView!
    @IBOutlet var sizeSegmentedControl: UISegmentedControl!
    @IBOutlet var flavorSegmentedControl: UISegmentedControl!
    
    @IBOutlet var pizzaNameLabel: UILabel!
    @IBOutlet var comboLabel: UILabel!
    @IBOutlet var cheeseLabel: UILabel!
    @IBOutlet var pizzaNumberLabel: UILabel!
    @IBOutlet var flavorLabel: UILabel!
    @IBOutlet var orderLabel: UILabel!
    
    @IBOutlet var comboSwitch: UISwitch!
    @IBOutlet var cheeseSwitch: UISwitch!
    @IBOutlet var pizzaNumberStepper: UIStepper!
    
    
    @IBOutlet var orderNameTextField: UITextField!
    @IBOutlet var phoneNumberTextField: UITextField!
    @IBOutlet var remarkTextField: UITextField!
    
    
    @IBOutlet var pageControl: UIPageControl!
    
    var index = 0

    var size = ""
    var flavor = ""
    var combo = ""
    var cheese = ""
    var number = 0
    
    var orderText = ""
    var phoneNumberText = ""
    
    let pizzaNames = ["","夏威夷披薩","香辣雞球披薩","金沙松阪豬披薩"]
    
    let pizzaImages = ["0","夏威夷披薩","香辣雞球披薩","金沙松阪豬披薩"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        comboSwitch.isOn = false
        cheeseSwitch.isOn = false
        comboLabel.text = String("+ 0元")
        cheeseLabel.text = String("+ 0元")
        comboLabel.isHidden = false
        cheeseLabel.isHidden = false
        
        pizzaNameLabel.text = ""
        index = 0
        
        pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
        pizzaNameLabel.text = pizzaNames[index]
        pageControl.currentPage = index
       
        pizzaNumberLabel.text = "0"
        
        
        
        // Do any additional setup after loading the view.
    }
    
   //切換上一張圖片
    @IBAction func next(_ sender: Any) {
        index = (index + 1) % pizzaImages.count
        pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
        pizzaNameLabel.text = pizzaNames[index]       
        pageControl.currentPage = index       
    }

   //切換下一張圖片
    @IBAction func pre(_ sender: Any) {
        index = (index + pizzaImages.count - 1) % pizzaImages.count        
        pizzaMenuImageView.image = UIImage(named: pizzaImages[index])        
        pizzaNameLabel.text = pizzaNames[index]       
        pageControl.currentPage = index        
    }
    

   //選擇尺寸
    @IBAction func chooseSize(_ sender: UISegmentedControl) {
        if sizeSegmentedControl.selectedSegmentIndex == 0 {
            size = "7吋"
        }else if sizeSegmentedControl.selectedSegmentIndex == 1 {
            size = "12吋"
        }
    }



   //選擇口味
    @IBAction func chooseFlavor(_ sender: UISegmentedControl) {
        if flavorSegmentedControl.selectedSegmentIndex == 0 && sizeSegmentedControl.selectedSegmentIndex == 0{
            flavor = "夏威夷"
            flavorLabel.text = "140元"
            index = 1
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index
        }else if flavorSegmentedControl.selectedSegmentIndex == 1 && sizeSegmentedControl.selectedSegmentIndex == 0 {
            flavor = "香辣雞球"
            flavorLabel.text = "150元"
            index = 2
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index
        }else if flavorSegmentedControl.selectedSegmentIndex == 2 && sizeSegmentedControl.selectedSegmentIndex == 0{
            flavor = "金沙松阪豬"
            flavorLabel.text = "160元"
            index = 3
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index
        }else if flavorSegmentedControl.selectedSegmentIndex == 0 && sizeSegmentedControl.selectedSegmentIndex == 1 {
            flavor = "夏威夷"
            flavorLabel.text = "345元"
            index = 1
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index
        }else if flavorSegmentedControl.selectedSegmentIndex == 1 && sizeSegmentedControl.selectedSegmentIndex == 1 {
            flavor = "香辣雞球"
            flavorLabel.text = "365元"
            index = 2
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index
        }else if flavorSegmentedControl.selectedSegmentIndex == 2 && sizeSegmentedControl.selectedSegmentIndex == 1{
            flavor = "金沙松阪豬"
            flavorLabel.text = "375元"
            index = 3
            pizzaMenuImageView.image = UIImage(named: pizzaImages[index])
            pizzaNameLabel.text = pizzaNames[index]
            pageControl.currentPage = index
        }
        
    }

        
   //選擇套餐     
    @IBAction func chooseCombo(_ sender: Any) {
        if comboSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 0{
            combo = "套餐"
            comboLabel.text = "+38元"
        }else if comboSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 1{
            combo = "套餐"
            comboLabel.text = "+223元"
        }else {
            combo = ""
            comboLabel.text = "+0元"
        }
    }
    
   
   //選擇起司加量    
    @IBAction func addCheese(_ sender: Any) {
        if cheeseSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 0{
            cheese = "加起司"
            cheeseLabel.text = "+20元"
        }else if comboSwitch.isOn && sizeSegmentedControl.selectedSegmentIndex == 1{
            cheese = "加起司"
            cheeseLabel.text = "+40元"
        }else {
            cheese = ""
            cheeseLabel.text = "+0元"
        }
    }
    
        
        
   //數量增減      
     @IBAction func stepperCount(_ sender: UIStepper) {
            number = Int(sender.value)
            pizzaNumberLabel.text = "\(Int(sender.value))"
        }
        
        
        
   //加入購物車 
    @IBAction func addToList(_ sender: Any) {
        orderLabel.text = "\(number)份 \(cheese) \(size)\(flavor)披薩 \(combo)"
    }
    
  
    
    
    //訂購
     @IBAction func order(_ sender: Any) {
        orderLabel.text = "\(orderNameTextField.text!)先生/小姐，謝謝您的訂購！\n您的電話號碼為: \(phoneNumberTextField.text!)\n您的訂購清單如下:\n\n\(number)份 \(cheese) \(size)\(flavor)披薩 \(combo)"
        
    }
    
    
        
}