＃瘋狂購物APP (UIStepper 和數字變字串練習)

YEN HUNG CHENG

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

9 min readNov 24, 2021

功能展示

利用 UIBlurEffect 製作模糊背景
利用 UIViewPropertyAnimator 產生動畫
利用 IBSegueAction 將資料傳輸到下一頁
利用 UIAlertController 產生警示匡
利用 UIStepper 串連 TextField 數值

製作模糊背景

override func viewDidLoad() {
        super.viewDidLoad()
        //創建一個模糊效果
        let blurEffect = UIBlurEffect(style: .light)
        //創建一個乘載模糊效果的視圖
        let blurView = UIVisualEffectView(effect: blurEffect)
        //設定模糊視圖的大小（全頻）
            blurView.frame.size = CGSize(width: view.frame.width, height: view.frame.height)
        //添加模糊視圖到頁面 view 上（模糊視圖下方都會有模糊效果）
        WarningSign.isHidden = true
        self.view.addSubview(blurView)
        self.view.addSubview(NextpageButton)
        self.view.addSubview(EnterLabel)
        self.view.addSubview(BudgetTextField)
        self.view.addSubview(WarningSign)    }

產生文字動畫警示

當 Budget 為 0 時，無法跳至下一頁購物，並產生文字動畫

判斷是否能夠跳入下一頁

override func shouldPerformSegue(withIdentifier identifier: String, sender: Any?) -> Bool {
        if BudgetTextField.text?.isEmpty == false,
           Double(BudgetTextField.text!) ?? 0 > 0 {
            return true
        }else {
            //加入提醒字幕
            WarningSign.isHidden = false
            WarningSign.text = "Please enter your budget"
            
            //加入動畫
            let animator = UIViewPropertyAnimator(duration: 2, dampingRatio: 0.1) {
                self.LabelConstraint.constant = 55
                self.view.layoutIfNeeded()
            }
            animator.startAnimation()
            
            UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 0.1, delay: 0) {
                self.LabelConstraint.constant = 25
                self.view.layoutIfNeeded()
            }
            return false
        }
    }

當沒有輸入預算或是預算等於 0 時，觸發文字動畫，原本 LabelConstraint.constant 會從 25 改變成 55 產生來回抖動的動畫，要完成這個動畫必須先在文字中加入 AutoLayout

將資料傳到下一頁

利用 IBSegueAction 將資料傳到下一頁的 Label ， Label 的文字抓到數值前，會要先將 Double 轉成 String

@IBSegueAction func nextpage(_ coder: NSCoder) -> ProductViewController? {
        let controller = ProductViewController(coder: coder, budget: Double(BudgetTextField.text!) ?? 0)
        return controller
    }

跳出警示匡

當預算小於 0 時，會跳出警示匡，並將原本所選取的所有商品都清除

利用 UIAlertController 產生警告視窗

利用 clear(UIButton.self) 清除所有商品

        //預算小於０時觸發警示窗口，並且清除所有所選商品
        if Double(budgetLabel.text!)! < 0 {
            let alertcontroller = UIAlertController(title: "💸💸💸", message: "Sorry you don't have enough budget", preferredStyle: .alert)
            alertcontroller.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
            present(alertcontroller, animated: true, completion: nil)
            
            clear(UIButton.self)
        }

預算同步

利用 UIStepper 串連 TextField 數值，並且同步更新下方金額

要完成以上同步，有一個很重要的步驟是要讓 UIStepper 與 TextField 做到數值同步，當 TextField 輸入數值收下鍵盤後，必須馬上同步 UIStepper 值

    //數值限制&Stepper同步textfield
    func upperlimit(number: Int) {
        //數值超過999時，textfield設定為999
        if Double(fruitsvegetableTextField[number].text!) ?? 0 > 999 {
            fruitsvegetableTextField[number].text = "999"
        }
        if Double(beverageTextField[number].text!) ?? 0 > 999 {
            beverageTextField[number].text = "999"
        }
        if Double(meatfishTextField[number].text!) ?? 0 > 999 {
            meatfishTextField[number].text = "999"
        }
        fruitsvegetableStepper[number].value = Double(fruitsvegetableTextField[number].text!) ?? 0
        beverageStepper[number].value = Double(beverageTextField[number].text!) ?? 0
        meatfishStepper[number].value = Double(meatfishTextField[number].text!) ?? 0

    }

最後只要會動到商品的數量的地方，都需加上 updateUI() 進行同步