學習記錄#120 App 的解鎖畫面(passcode)

還記得小時候第一部卡通獅子王，看完一整個令人驚艷無法忘懷......

這次解鎖畫面主題就決定是獅子王。

範例: LINE 的解鎖畫面。

1.設定密碼圖示

@IBOutlet weak var passImageView2: UIImageView!
@IBOutlet weak var passImageView1: UIImageView!
@IBOutlet weak var passImageView3: UIImageView!
@IBOutlet weak var passImageView4: UIImageView!

2.密碼輸入後的判讀

func checkPassCode(){
if correctPassCode == guessPasscode {
performSegue(withIdentifier: "correctPassCode", sender: self)
} else {
guessPasscode = []
passImageView1.isHidden = true
passImageView2.isHidden = true
passImageView3.isHidden = true
passImageView4.isHidden = true
let alert = UIAlertController(title: "密碼錯誤", message: "輸入的密碼不正確!", preferredStyle: .alert)
let action = UIAlertAction(title: "請重新輸入", style: .default) { (_) in
}
alert.addAction(action)
present(alert, animated: true, completion: nil)
  }
}

3.密碼輸入時的圖片顯示

func passcodeImage(){
if  guessPasscode.count == 0 {
passImageView1.isHidden = true
passImageView2.isHidden = true
passImageView3.isHidden = true
passImageView4.isHidden = true
} else if guessPasscode.count == 1 {
passImageView1.isHidden = false
passImageView2.isHidden = true
passImageView3.isHidden = true
passImageView4.isHidden = true
} else if guessPasscode.count == 2 {
passImageView1.isHidden = false
passImageView2.isHidden = false
passImageView3.isHidden = true
passImageView4.isHidden = true
} else if guessPasscode.count == 3 {
passImageView1.isHidden = false
passImageView2.isHidden = false
passImageView3.isHidden = false
passImageView4.isHidden = true
} else if guessPasscode.count == 4 {
passImageView1.isHidden = false
passImageView2.isHidden = false
passImageView3.isHidden = false
passImageView4.isHidden = false
checkPassCode()
}
}

4.輸入密碼

@IBAction func numberBtn(_ sender: UIButton) {
let button = sender.tag
guessPasscode.append(button)
passcodeImage()
}

5.刪除密碼

@IBAction func deleteBtn(_ sender: UIButton) {
if 0...3 ~= guessPasscode.count {
guessPasscode.removeLast()
passcodeImage()
    }
}

成果

完整程式Github

Chingwenluo/passcode

參考資料:

#120 App 的解鎖畫面(passcode)

#120 App 的解鎖畫面(passcode)

最後來個獅子王經典-主題曲「生生不息Circle Of Life」