練習筆記46：App 的解鎖畫面(passcode)

隔了將近五個月 終於又生出了一篇作業了🥹

先來把放在待辦清單的解鎖畫面完成～～

先做好輸入密碼的畫面

開始做功能～～

拉好各項需要的IBOutlet

//IBOutlet
    @IBOutlet weak var codePhoto1: UIImageView!
    @IBOutlet weak var codePhoto2: UIImageView!
    @IBOutlet weak var codePhoto3: UIImageView!
    @IBOutlet weak var codePhoto4: UIImageView!
    @IBOutlet weak var mainPicture: UIImageView!

先宣告一個array來設定正確的解鎖密碼

再建立一個空的array來儲存使用者輸入的密碼

在這邊也建立了一個變數buttonCounter 想用來計算點選數字鍵的次數 並在後面的功能設定中作為條件判斷的依據

//正確密碼
    let password = [0,0,0,0]
//記憶已輸入密碼
    var enterPassword = [Int]()
//點選數字鍵次數
    var buttonCounter = 0

接著將數字鍵拉IBAction 並設定點選數字鍵後的功能:

點選一次數字鍵 buttonCounter就會＋1

利用buttonCounter的數值就可以依序顯示輸入密碼的小圖

每按一次數字鍵 會依序顯示小圖

並且將點選的數字加入enterPassword的array

這裡我將每個數字鍵的tag輸入對應的數字

就可以用sender.tag讀取數值 加入enterPassword

數字鍵的tag輸入對應的數字

當buttonCounter為4時就會判斷輸入的數字跟正確密碼相不相符

並跳出對應的訊息

//點選數字鍵
    @IBAction func showPicture(_ sender: UIButton) {
        buttonCounter += 1
        enterPassword.append(sender.tag)
        
        switch buttonCounter{
        case 1:
            codePhoto1.image = UIImage(named: "pocha1")
        case 2:
            codePhoto2.image = UIImage(named: "pocha3")
        case 3:
            codePhoto3.image = UIImage(named: "pocha2")
        case 4:
            codePhoto4.image = UIImage(named: "pocha4")
        default:
            break
        }
        if buttonCounter == 4{
            if enterPassword == password{
                correctMessage()
            }else{
                tryAgainMessage()
                
            
            }}

設定密碼正確與錯誤時的畫面

密碼正確

密碼錯誤

//密碼正確的彈跳視窗
    func correctMessage(){
        mainPicture.image = UIImage(named: "pochaokok")
        let message = UIAlertController(title: "正確", message: "已成功解鎖", preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default)
        message.addAction(action)
        present(message, animated: true)
    }
//密碼錯誤的彈跳視窗
    func tryAgainMessage(){
        mainPicture.image = UIImage(named: "pochaQQ")
        let message = UIAlertController(title: "錯誤", message: "請再試一次", preferredStyle: .alert)
        let action 
= UIAlertAction(title: "try again", style: .default,handler: {(action:UIAlertAction!)-> Void in
            self.reset()})
        message.addAction(action)
        present(message, animated: true)
    }

並設定清除鍵跟back鍵的功能

//畫面重設
    func reset(){
        mainPicture.image = UIImage(named: "40d5-kracxeq8565328")
        buttonCounter = 0
        enterPassword = []
        codePhoto1.image = UIImage(named: "pocha 1-2")
        codePhoto2.image = UIImage(named: "pocha5")
        codePhoto3.image = UIImage(named: "pocha2-2")
        codePhoto4.image = UIImage(named: "pocha4-2")
        
    }
//back鍵
    @IBAction func back(_ sender: UIButton) {
        if buttonCounter >= 1{
            buttonCounter -= 1
            enterPassword.remove(at: buttonCounter)}
        
        switch buttonCounter{
        case 0:
            codePhoto1.image = UIImage(named: "pocha 1-2")
        case 1:
            codePhoto2.image = UIImage(named: "pocha5")
        case 2:
            codePhoto3.image = UIImage(named: "pocha2-2")
        case 3:
            codePhoto4.image = UIImage(named: "pocha4-2")
        default:
            break
        }
        
        
        
    }
//清除鍵
    @IBAction func clearAll(_ sender: UIButton) {
        reset()
    }

完成～～

參考資料:

Episode 35 — if else: 解鎖畫面

我的Github:

GitHub - IRIS-ZZZzzz/pass-code