#23 亂數創作｜你是宮崎駿筆下的哪一個角色？

練習使用兩個controller、頁面資料傳遞

Shelley's iOS App learning notes

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

8 min readDec 6, 2022

原本亂數的作業近乎完成，昨日剛教完如何把頁面資料傳到下一頁，趕緊趁記憶猶新(😵‍💫?)時，把功能加上來囉！

第一版成品如下⬇️
原本還想把結果的圖片與文字說明同時呈現，如測出來是龍貓，簡單說明龍貓的個性，就留給下一版吧~

✏️ 功能呈現

1. 使用 IBOutlet 和 IBAction 實現 App 的功能

2. 畫面上包含text field，slider，switch，label，image view，button，segmented control，date picker等元件，而且程式也有使用這些元件。

3. 使用者輸入文字後，可以將鍵盤收起來，這次使用return收鍵盤

4. 點選switch有亂數功能

5. slider 滑動時要搭配 label 顯示數值

6. 若無點選個性按鈕，則出現提示，須至少按一個才能進行配對

7. 使用IBSegueAction將亂數後的結果傳至下一頁，包含圖片的人物名、圖片

8. 填寫的暱稱也會呈現在結果頁面

9. 運用CAGradientlayer製造漸層顏色

10.運用UIBezierPath 製作斜邊的圖片

✏️程式說明

先將亂數的Array列出，如下，array裡的是圖片

2. 新增按鈕的segue，拉到結果顯示頁後，選show
3. 點選中間的線拉出segue action，這樣按鈕按下後就能將結果傳入下一頁

4. 這次作業的結果傳遞方式，將程式均寫在IBSegue ction裡
- 啟動亂數的按鈕是個性的switch按鈕，設定成可兩個都選，也可擇ㄧ，但不能不選
- 宣告儲存內容的常數與變數

@IBSegueAction func showResultView(_ coder: NSCoder) -> resultViewController? {
// 宣告name，將暱稱的文字存成字串   
     let name = String(nameTextField.text!)
// 兩個array相加，方便後續的亂數設定
     let personalityArray = braveArray + smartArray
// 宣告show，儲存亂數後的結果，array裡的是字串，故show的型別為String
     var show: String = ""
// 若沒有填暱稱，則出現提示，iOS SDK內建的 UIAlertController        
     if name == "" {
         let alert = UIAlertController(title: "填個名字吧！", message: "暱稱就可以囉～", preferredStyle: .alert)
         let okAction = UIAlertAction(title: "OK", style: .default)
         alert.addAction(okAction)
         present(alert, animated: true)
     }
// 判斷亂數的結果，儲存在show        
     if braveSwitch.isOn == true , smartSwitch.isOn == true {
         show = personalityArray.randomElement()!
         print("全開")
     }else if braveSwitch.isOn == true , smartSwitch.isOn == false{
         show = braveArray.randomElement()!
         print("一開")
     }else if braveSwitch.isOn == false , smartSwitch.isOn == true{
         show = smartArray.randomElement()!
         print("二開")
     }else if braveSwitch.isOn == false, smartSwitch.isOn == false {
         let alert = UIAlertController(title: "少了一個步驟！", message: "個性按鈕請擇一", preferredStyle: .alert)
         let okAction = UIAlertAction(title: "OK", style: .default)
         alert.addAction(okAction)
         present(alert, animated: true)
         print("全關")
     }
    
     let controller = resultViewController(coder: coder)
     controller?.resultInfo = ResultInfo(name: name, resultName: "\(show)", pic: "\(show)", intro: "")
     return controller
}

5. slider數值同步lable呈現

slider的最大值設為10

@IBAction func sliderChange(_ sender: UISlider) {
   let confidenceScore = Int(sender.value)
   confidenceSlider.maximumValue = Float(10)
   confidenceLable.text = "\(confidenceScore)"
}

6. 斜邊圖案

新增一個new file 選 cocoa touch，SubClass of 記得選UIImageView
並把斜邊的程式碼寫在裡面