Episode 35 — if else: 解鎖畫面
完整操作
圖像生成
按下任何數字鍵會生成圖像，新的圖像會蓋住舊的圖像。圖像都是用 image view，鍵盤都是用 button
@IBOutlet weak var chimmyImageView: UIImageView!
@IBOutlet weak var inputIconImageView1: UIImageView!
@IBOutlet weak var inputIconImageView2: UIImageView!
@IBOutlet weak var inputIconImageView3: UIImageView!
@IBOutlet weak var inputIconImageView4: UIImageView!要建立四個圖片的 IBOutlet
@IBOutlet weak var button1: UIButton!
@IBOutlet weak var button2: UIButton!
@IBOutlet weak var button3: UIButton!
@IBOutlet weak var button4: UIButton!
@IBOutlet weak var button5: UIButton!
@IBOutlet weak var button6: UIButton!
@IBOutlet weak var button7: UIButton!
@IBOutlet weak var button8: UIButton!
@IBOutlet weak var button9: UIButton!
@IBOutlet weak var button0: UIButton!以及數字的 IBOutlet
@IBAction func press(_ sender: UIButton) {
//程式碼 if inputIconImageView1.isHidden == true {
inputIconImageView1.isHidden = false
} else if inputIconImageView2.isHidden == true { inputIconImageView2.isHidden = false
} else if inputIconImageView3.isHidden == true {
//程式碼} else {
//程式碼
}
}
將每個數字鍵連成同一個 IBAction，所以每一次按數字鍵時，用 if else 去檢視每一個 image view 是不是呈現了，不是的話就把圖片叫出來。重點是要按照順序去檢視，不能突然第一張然後跳到第三張。
密碼輸入錯誤
密碼輸入錯誤的話會跳出警吿視窗，且狗狗會生氣，輸入密碼的字樣也會改變。
let correctPassword = [0,0,0,0]var inputPassword = [Int]()var index = 0
這邊我設定正確的密碼為0000且存在矩陣裡，再宣告一個輸入密碼的空白矩陣。宣告一個 index 來檢視這兩個矩陣。
if index <= 4 {
switch sender {
case button0:
inputPassword.append(0)
index += 1
print("\(inputPassword)") case button1:
inputPassword.append(1)
index += 1
print("\(inputPassword)") .....
.....
..... 依此類推
.....
..... case button9:
inputPassword.append(9)
index += 1
print("\(inputPassword)") default:
index += 0
print("0")
}
}
我用 if else 來判斷 index 是否小於四，意思是密碼輸入多少個了，再用 switch 來判斷按鈕按的是哪一個數字。假設按數字1，inputPassword矩陣就要加入 1 這個值代表輸入的是1，然後 index 增加1代表已經輸入一個密碼了。 print(“\(inputPassword)”)只是拿來檢視矩陣是不是真的有存東西。
@IBAction func press(_ sender: UIButton) {
if index <= 4 {
switch sender {
//程式碼
}
} if inputIconImageView1.isHidden == true {
inputIconImageView1.isHidden = false
} else if.... {
//程式碼 } else {
inputIconImageView4.isHidden = false
chimmyImageView.image = UIImage(named: "angryChimmy")
label.text = "You can't enter!"
index = 0
inputPassword = []
displayWrongMessage()
}
}
回到剛剛的圖片生成部分，在最後一個圖片生成時，就代表密碼輸入錯誤。要做的事情分別為，顯示第四個圖片、更換為生氣狗狗圖片、更換輸入密碼字樣、將 index 歸零、將輸入密碼矩陣清空、顯示警告視窗。
跳出警告視窗
輸入錯誤的密碼後會跳出警告視窗，按下 Try again 按鈕即可重新輸入密碼。
func displayWrongMessage(){
let controller = UIAlertController(title: "Wrong Passwords!", message: "", preferredStyle: .alert) let action = UIAlertAction(title: "Try again", style: .default, handler: {(action: UIAlertAction!)->Void in self.hideIcons(isBackButton: false) self.chimmyImageView.image = UIImage(named: "chimmy") self.label.text = "Enter the passwords"
})
controller.addAction(action) present(controller, animated: true, completion: nil)
}
在別的地方宣告一個警告方法，這邊我還沒深入學到，以下為我翻到的解說。
刪除單個數字
按下右下角的叉叉按鈕會依序消除數字
按下左下角的叉叉按鈕會消除全部數字
@IBOutlet weak var backButton: UIButton!
@IBOutlet weak var clearButton: UIButton!各連一個 IBOutlet
func hideIcons(isBackButton: Bool){
if inputPassword.count == 3 {
if isBackButton == true {
inputIconImageView3.isHidden = true
} else {
inputIconImageView1.isHidden = true
inputIconImageView2.isHidden = true
inputIconImageView3.isHidden = true
}
} else if inputPassword.count == 2 {
if isBackButton == true {
inputIconImageView2.isHidden = true
} else {
inputIconImageView1.isHidden = true
inputIconImageView2.isHidden = true
}
} else if inputPassword.count == 1 {
inputIconImageView1.isHidden = true
} else {
inputIconImageView1.isHidden = true
inputIconImageView2.isHidden = true
inputIconImageView3.isHidden = true
inputIconImageView4.isHidden = true
}
}這邊宣告一個如何刪除圖片的方法。
if inputPassword.count == 3 {
if isBackButton == true {
inputIconImageView3.isHidden = true
} else {
inputIconImageView1.isHidden = true
inputIconImageView2.isHidden = true
inputIconImageView3.isHidden = true
}
}以這個為例。如果輸入的密碼有三個，要判斷是要全刪掉還是一個個刪掉。如果是一個個刪掉，那在密碼有三個的情況下只要刪掉第三個，如果是全部，則刪掉第三個以前的圖片。
@IBAction func erase(_ sender: UIButton) {
switch sender {
case backButton:
if index > 0 {
hideIcons(isBackButton: true)
inputPassword.remove(at: index-1)
index -= 1
}
case clearButton:
if index > 0 {
hideIcons(isBackButton: false)
index -= inputPassword.count
inputPassword = []
}
default:
index += 0
}
}將兩個按鈕連成同一個 IBAction。如果按的是 backButton，判斷 index 是否大於 0 (即輸入密碼數量)。是的話使用 hideIcons 方法且參數 isBackButton 為是(true)，就會依序刪除。 因為刪除一個密碼，輸入密碼矩陣要少一個值，且密碼數量要減一個。依此類推。
輸入正確的密碼
輸入四個 0 後會直接跳出內容，想知道內容怎麼來的可以點下面連節。
我把鎖屏 controller view 接到原本的 tab bar controller，可以看到我是從鎖屏那邊的按鍵 0 連過去的。其實我不是用那個按鈕，而是另外新增一個透明按鈕疊在上面。
@IBOutlet weak var enterButton: UIButton!透明按鈕連成個IBOutlet
@IBAction func press(_ sender: UIButton) {
if index <= 4 {
switch sender {
//程式碼
}
}
if inputIconImageView1.isHidden == true {
inputIconImageView1.isHidden = false
} else if inputIconImageView2.isHidden == true { inputIconImageView2.isHidden = false
} else if inputIconImageView3.isHidden == true { inputIconImageView3.isHidden = false
for num in 0...inputPassword.count-1 {
if correctPassword[num] == inputPassword[num] {
index -= 1
if index == 0 {
enterButton.isHidden = false
}
}
}
} else {
//程式碼
}
}
回到數字按鈕的生成圖片那邊，假如第三個圖片要出現了(即輸入到第三個密碼)，這邊就開始判斷第三個以前的密碼是否正確。我用 for 從第一個密碼檢視到第三個，如果每一次正確密碼矩陣的值跟輸入密碼矩陣的值相同，讓index 減一。再判斷 index 是否為零，是的話就顯示透明按鈕。
所以最後一次如果選 0 ，其實是按到那個透明按鈕。那如果按到其他數字，就會顯示密碼錯誤。但這樣的做法是以已經知道最後一個密碼是什麼為前提，如果每次都要更換密碼，那又是另外一回事了。
