App 的解鎖畫面(passcode)-夏日沙灘

Lydia
彼得潘的 Swift iOS / Flutter App 開發教室
8 min readAug 23, 2020

@IBOutlet@IBAction、Stack View、AutoLayout、Image旋轉、UIAlertController、count運用、switch/caseif/else

這個作業用Stack View整理,設定了那麽多的AutoLayout,終於有點了解在幹嘛了XD。

順便複習旋轉圖片的小功能。

func 改變圖片的方式,就是用之前類似生命靈數用過的概念 『數字的次數』,套入switch/case判斷。關圖片的方式用.isHidden。

import UIKitclass ViewController: UIViewController {@IBOutlet var numaberBtns: [UIButton]!@IBOutlet var imageView: [UIImageView]!@IBOutlet var slippersImageView: [UIImageView]!var password = ""
func changeImage(){switch password.count-1{case 0:imageView[0].image = UIImage(named: "icon1.png")imageView[1].image = UIImage(named: "icon5.png")imageView[2].image = UIImage(named: "icon5.png")imageView[3].image = UIImage(named: "icon5.png")slippersImageView[0].isHidden = falsecase 1:imageView[0].image = UIImage(named: "icon1.png")imageView[1].image = UIImage(named: "icon2.png")imageView[2].image = UIImage(named: "icon5.png")imageView[3].image = UIImage(named: "icon5.png")slippersImageView[0].isHidden = falseslippersImageView[1].isHidden = falsecase 2:imageView[0].image = UIImage(named: "icon1.png")imageView[1].image = UIImage(named: "icon2.png")imageView[2].image = UIImage(named: "icon3.png")imageView[3].image = UIImage(named: "icon5.png")slippersImageView[0].isHidden = falseslippersImageView[1].isHidden = falseslippersImageView[2].isHidden = falsecase 3:imageView[0].image = UIImage(named: "icon1.png")imageView[1].image = UIImage(named: "icon2.png")imageView[2].image = UIImage(named: "icon3.png")imageView[3].image = UIImage(named: "icon4.png")slippersImageView[0].isHidden = falseslippersImageView[1].isHidden = falseslippersImageView[2].isHidden = falseslippersImageView[3].isHidden = falsedefault:clearImage()}}func clearImage(){imageView[0].image = UIImage(named: "icon5.png")imageView[1].image = UIImage(named: "icon5.png")imageView[2].image = UIImage(named: "icon5.png")imageView[3].image = UIImage(named: "icon5.png")slippersImageView[0].isHidden = trueslippersImageView[1].isHidden = trueslippersImageView[2].isHidden = trueslippersImageView[3].isHidden = true}func clearPassword(){password = ""changeImage()}override func viewDidLoad() {super.viewDidLoad()// Do any additional setup after loading the view.clearImage()slippersImageView[0].isHidden = trueslippersImageView[0].transform = CGAffineTransform(rotationAngle: 295)slippersImageView[1].isHidden = trueslippersImageView[1].transform = CGAffineTransform(rotationAngle: 225)slippersImageView[2].isHidden = trueslippersImageView[2].transform = CGAffineTransform(rotationAngle: 294.55)slippersImageView[3].isHidden = trueslippersImageView[3].transform = CGAffineTransform(rotationAngle: 225)}@IBAction func Buttons(_ sender: UIButton) {if let inputPassword = sender.titleLabel?.text {password.append(inputPassword)if password.count < 4{changeImage()}else if password.count == 4{changeImage()if password == "1225"{let alert = UIAlertController(title: "解鎖成功!", message: "YA!", 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: "解鎖失敗!", message: "請再試一次!", preferredStyle: .alert)let action = UIAlertAction(title: "Try again", style: .cancel, handler: nil)alert.addAction(action)present(alert, animated: false, completion: clearPassword)}}}}@IBAction func clearButton(_ sender: UIButton) {password = ""clearImage()}}

GitHub:

範例參考:

素材

--

--