練習：實作App解鎖畫面

這是彼得潘iOS開發課程的作業。

先上結果：

基本UI

• 背景是我拿著剛買的iPad Air（興奮），用autodesk sketchbook亂畫的XDD
• 四格密碼分別是四個ImageView，我是設定highlighted的時候用不同的SF Symbols（circle跟circle.fill），跟iOS內建預設的解鎖畫面一樣，這樣寫程式只要調是不是highlighted就好
• 四格密碼的部分有用到stack view，alignment: center，Distribution: Fill Equally，然後再去定義寬、高跟手機頂端的Constraints

Code

直接貼上來：

var PassWordTyped = ""
@IBOutlet weak var FirstPassword: UIImageView!
@IBOutlet weak var SecondPassword: UIImageView!
@IBOutlet weak var ThirdPassword: UIImageView!
@IBOutlet weak var FourthPassword: UIImageView!
// 打入1~0密碼
@IBAction func typeinpassword(_ sender: UIButton) {
  if let Inputtext = sender.titleLabel?.text,
     PassWordTyped.count < 4{
     PassWordTyped.append(Inputtext)
     print(PassWordTyped)
     ShowPasswordCount()
  }
}
// 按刪除鍵
@IBAction func deletepassword(_ sender: UIButton) {
  if PassWordTyped.count >= 1 {
     PassWordTyped = String(PassWordTyped.dropLast(1))
     print(PassWordTyped)
     ShowPasswordCount()
  }
}
// 四格密碼顯示的調整
func ShowPasswordCount(){
  if PassWordTyped.count == 0{
     FirstPassword.isHighlighted = false
     SecondPassword.isHighlighted = false
     ThirdPassword.isHighlighted = false
     FourthPassword.isHighlighted = false
  }else if PassWordTyped.count == 1{
     FirstPassword.isHighlighted = true
     SecondPassword.isHighlighted = false
     ThirdPassword.isHighlighted = false
     FourthPassword.isHighlighted = false
  }else if PassWordTyped.count == 2{
     FirstPassword.isHighlighted = true
     SecondPassword.isHighlighted = true
     ThirdPassword.isHighlighted = false
     FourthPassword.isHighlighted = false
  }else if PassWordTyped.count == 3{
     FirstPassword.isHighlighted = true
     SecondPassword.isHighlighted = true
     ThirdPassword.isHighlighted = true
     FourthPassword.isHighlighted = false
  }else if PassWordTyped.count == 4{
     FirstPassword.isHighlighted = true
     SecondPassword.isHighlighted = true
     ThirdPassword.isHighlighted = true
     FourthPassword.isHighlighted = true
     CorrectorWrong()
  }
}
// 把所有打過的密碼，跟四格密碼顯示，都刪掉
func ClearPassword(){
     FirstPassword.isHighlighted = false
     SecondPassword.isHighlighted = false
     ThirdPassword.isHighlighted = false
     FourthPassword.isHighlighted = false
     PassWordTyped = ""
  }
// 打入四個密碼後，檢查是否是對的，假設正確密碼是0258
func CorrectorWrong (){
  if PassWordTyped == "0258"{
     let alert = UIAlertController(title: "Correct!", message: "Good Job!", preferredStyle: .alert)
     let action = UIAlertAction(title: "OK!", style: .cancel, handler: nil)
     alert.addAction(action)
     present(alert, animated: false, completion: ClearPassword)
  }else{
     let alert = UIAlertController(title: "Wrong!", message: "Give it another try!", preferredStyle: .alert)
     let action = UIAlertAction(title: "Try again", style: .cancel, handler: nil)
     alert.addAction(action)
     present(alert, animated: false, completion: ClearPassword) 
  }
}

• 輸入密碼跟刪除密碼，都有做防止打太多或刪太多的機制，也就是限制不能打超過4位、刪到低於0位，雖然說droplast()這個方法好像本身字數刪到0的時候再執行也不會怎麼樣
• 此外，上述的機制有用到昨天學到的”if…, …“的語法，就是逗號兩邊的兩個條件同時滿足才會往下跑
• 我覺得四格密碼顯示那邊可能有更好的做法，但是我暫時想不到，只能一個一個Outlet去調isHilighted的true或false
• 按了四個密碼後，我用了之前學過的UIAlertController、UIAlertAction等方法，來跳出輸入對或錯的訊息，並且無論密碼對錯，在完成後都去調動ClearPassword這個function，去清掉密碼的記憶跟顯示

Github

A-Tan5/Password-Unlock