#21 小費計算App

David Chiu

Published in

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

Oct 5, 2022

目的：學習字串轉數字，optional binding，收鍵盤。

這次的作業比較沒這麼複雜，主要就是練習字串轉數字和熟悉之前比較少用的UI元件，程式碼不多，所以想說讓畫面豐富一點，就做了一點動畫，畫面也沒什麼靈感，在網站上隨便找找素材，不小心弄的太少女😂😂

學習重點

型別轉換，字串轉數字
UIStepper運用
透過手勢收起鍵盤
CABasicAnimation播放動畫
if-else判斷

型別轉換

將TextField裡的文字包入Double() ，代表把文字轉成浮點數，記得要加optional確保裡面的值不是nil

var totalMoney:Double = 0
var people:Double = 0totalMoney = Double(moneyTextField.text!)!
people = Double(peopleTextField.text!)!

UIStepper

Value: 當前的值
Minimum: 最小值
Maximum: 最大值
Step: 一次增加或減少多少值

@IBAction func stepper(_ sender: UIStepper) {
        peopleTextField.text = "\(Int(sender.value))"
    }

收起鍵盤

透過手勢實現輕觸畫面將鍵盤收起，從元件庫拉Tap Gesture Recognizer元件到ViewController，拉一個IBAction，在裡面輸入view.endEditing(true)

@IBAction func closeKeyboard(_ sender: Any) {
        view.endEditing(true)
    }

CABasicAnimation播放動畫

CABasicAnimation可以實現多種效果，let animation = CABasicAnimation(keyPath: “opacity”) ，opacity 為閃爍效果

fromValue: 動畫的起始值
toValue: 動畫的結束值
duration: 動畫持續時間

let animation = CABasicAnimation(keyPath: "opacity")
            animation.fromValue = 1
            animation.toValue = 0
            animation.duration = 3
            animateImageView.layer.add(animation, forKey: nil)

結束動畫

將設定動畫的程式碼放進CATransaction.begin() 和CATransaction.commit() 之間，利用 CATransaction.setCompletionBlock 設定動畫結束時執行的程式

            CATransaction.begin()
            CATransaction.setCompletionBlock {
                animateImageView.removeFromSuperview()
                self.resultLabel.isHidden = false
            }
            CATransaction.commit()

完整程式碼

Demo

#21 小費計算App

Written by David Chiu