Today Preview

今天要講Image Picker
但滿巧的，SwiftUI跟Fluter一樣：原生並沒有提供Image Picker???(But iOS16就有了.....)
所以我們必須透過以前的UIKit來達成這功能
因此，今天的重點其實是談談SwiftUI專案怎麼使用UIKit

首先
UIKit跟畫面有關的Class有兩個
UIView跟UIViewController(就是MVC的V跟C)
想要召喚他們的話必須用protocol UIViewRepresentable 或 UIViewControllerRepresentable包起來

1.

鮮蚵先刻一個Avatar的畫面
結果在這邊還花了一點功夫才調出我想要的畫面


大家可以比較一下上述四種情形的成因

2.

今天會實作兩種不同的UIViewController
UIImagePickerController 跟 PHPickerViewController
UIImagePickerController可以拿相機或相簿/相片當作圖片來源
後來推出一個新的PHPickerViewController
所以是說UIImagePickerController的相簿/相片已經棄用了啦
(不過已經過了N年...)

Avatar點了之後會彈出選單
可以選擇要用哪種picker及其來源
然後當selectedImage(UIImage)變化後
就把它轉成currentImage(Image)

3.

首先先來實作PHPickerViewController

1. 先建立個conform UIViewControllerRepresentable的struct
2. 有兩個function是必須實作的
   就是makeUIViewController 跟 updateUIViewController
   makeUIViewController就是建立並提供我們想要包的ViewController
   updateUIViewController則是當state改變時我們要不要更新
   以這個例子我們並不需要，所以留空
3. 建立一個叫Coordinator的類別
   當作PhotoPicker的代理人(Delegate)
   身為代理人就必須幫委託人做一些事
   就是didFinishPicking這個func
   從這個func我們可以得到image然後回傳給委託人
   
   iOS真的很喜歡搞同名異式= =很confus
   寫Flutter都不會這樣⚠️⚠️⚠️
4. 這時我們就可以用makeCoordinator來召喚代理人
   
   如果沒有先完成第三步建立Coordinator
   這時偷打makeCoordinator會發現沒有型別可以回傳
   
5. 最後我們就可以回到makeUIViewController
   把coordinator介紹給PHPickerViewController
   讓他幫我們完成工作

4.

這裡是UIImagePickerController的實作
照抄上一章就好哈哈
但挑照片的操作介面竟然跟PHPickerViewController完全一樣(至少savedPhotosAlbum幫我選到"相簿"segment嘛)
記得以前是不太一樣的(可能跟iOS版本有關)

5.

對了對了
如果有要拍照，記得要在info裡添加：向user要求相機授權
不然會閃退喔^.<

Tomorrow Preview

跨界學習系列文章

Android版：iOS Developer Learning Android. Lesson 12 - ImageView + ImagePicker (想知道如何把歪掉的照片調正嗎？)
Flutter版：iOS Developer Learning Flutter. Lesson23 ImagePicker

https://github.com/mark33699/FDLS