#38 選擇題 App、SharpImageView、performSegue ＆ Identifier、UIAlertController

主要功能

1.採用MVC架構

2. SharpImageView 改變圖片邊匡

3. IBAction 搭配 performSegue 與 Identifier 換頁，IBSegueAction 跨頁傳值

4. UIAlertController 跳出提示視窗

主頁面配置

主頁使用多張 imageView 編排，透過 performSegue 跳到下一頁

使用 SharpImageView 功能，改變圖片的四個邊角座標點，做出變化形狀的圖片效果

問答頁面配置

問答頁面的題目、圖片、答案選項、將從 model 讀取，初始化的時候會將題目順序隨機排列，設定目前的題目參數，每次換題目時都呼叫相同方法更新內容

func updateContent(){
//讀取漫畫圖片
comicsImageView.image = UIImage(named: questions[questionIndex].comicsImageName!)
//讀取漫畫名稱
comicsNameLabel.text = questions[questionIndex].comicsName!
//讀取漫畫問題
questionLabel.text = questions[questionIndex].comicsQuestion
print(questions[questionIndex].allAnswer[0])
for index in 0...anserButtons.count-1{
print(index)
anserButtons[index].setTitle(questions[questionIndex].allAnswer[index], for: .normal)
}
//現在是第幾題
questionNumberLabel.text = String(questionIndex + 1)
}

作答完成後點選 NEXT 按鈕，將進入到下一題，遞增問題參數並刷新畫面，把變色的按鈕改回來，判斷是最後一題時跳到分數頁面

@IBAction func nextQuestionAction(_ sender: Any) {
if(questionIndex == 9)
{
//跳頁 結算
performSegue(withIdentifier: "toScoreSegue", sender: nil)
}else
{
questionIndex += 1
self.updateContent()
}
//button變為可互動 改回白色背景
for index in 0...anserButtons.count-1 {
//anserButtons[index].isUserInteractionEnabled = true
anserButtons[index].backgroundColor = .white
}
//開放偵測點擊
buttonBool = true
}

答對題目時分數會+1，正確答案的按鈕顯示為綠色，答錯時選擇的按鈕會變為紅色，如果已經作答過，則會跳出提示視窗，全部題目作答完會將分數傳給結算畫面

//使用 UIAlertController 跳出提示視窗
let controller = UIAlertController(title: "此題已作答過 !!", message: "點選 NEXT 開始下一題吧", preferredStyle: .alert)
let okAction = UIAlertAction(title: "OK", style: .default,handler: nil)
controller.addAction(okAction)
present(controller, animated: true, completion: nil)

分數頁面配置

顯示結算分數，答對一題+10分

改變 transform.rotated 讓 View 旋轉

view1.transform = view1.transform.rotated(by: .pi * 0.05)

成果展示

詳細程式碼請參考GitHub

GitHub

GitHub - croc0909/Q-AApp

參考資料

利用 UIBezierPath 設計特別形狀的圖片 — 比方斜邊 & 愛心

利用 UIBezierPath 設計特別形狀的圖片 — 自定義斜邊

Swift UIKit iOS App 入門測驗 1

#10 期中測驗-選擇題APP

顯示警告訊息和選單的 UIAlertController