SwiftUIで
 カメラから画像を取得する
 try! Swift Tokyo 2020 Meetup!! 
 
 佐藤剛士 2020 年 1 月 21日
 


Who am I
 ● Name
 ● 佐藤剛士(さとうたけし)
 ● Company
 ● Merpay, Inc.(2019/01 ~)
 ● Role
 ● Software Engineer (iOS)
 ● Account
 ● Twitter: @hatakenokakashi
 ● Facebook: 佐藤剛士
 ● GitHub: SatoTakeshiX


SwiftUIでImagePickerを使う方法

デモアプリ

デモアプリの仕様 ● 画像がない場合は「画像がありません」のラ ベルを表示 ● 「画像登録」ボタンタップでアクションシートを 表示 ● 端末がカメラ利用可能なら「 写真を撮る」ボタ ン、フォトライブラリー利用可能なら「アルバム から選択」ボタンを表示 ● ImagePickerViewController で画像を取得す る ● 取得した画像を真ん中に表示する

レイアウト

デモアプリのUIコンポーネント CameraButton CustomToolBar EmptyImageView Image

CameraButton

Tips:Buttonのタップ領域を広げたいとき Button 自体の Frame を操作するのではなくて ,Button の View の Frame を操作する

CustomToolBar

EmptyImageView

UIコンポーネントの配置

ZStackで配置する ZStack は子 View をオーバーレイで重ねる View コンポーネントの配置に便利

CustomToolBarの配置 ※ edgesIgnoringSafeArea で画面下まで表示する Spacer CustomToolBar

レイアウト全体

ロジック

デモアプリの仕様 ● 画像がない場合は「画像がありません」のラ ベルを表示 ● 「画像登録」ボタンタップでアクションシートを 表示 ● 端末がカメラ利用可能なら「 写真を撮る」ボタ ン、フォトライブラリー利用可能なら「アルバム から選択」ボタンを表示 ● ImagePickerViewController で画像を取得す る ● 取得した画像を真ん中に表示する

MVVMでSwiftUI

ボタンタップのシーケンス図

アクションシートのシーケンス図

HomeViewModelソース

HomeViewModelソース

PassthroughSubject ● Combine フレームワークの概念 ○ Publisher ■ 時間経過によって一連の値を配信するプロトコル ○ Subject ■ Publisher の一つ ■ send メソッドで外部から値を配信するプロトコル ● PassthroughSubject は Subject の一種 ● subscriber に値を配信する ● subscribe する前に配信された値は捨てられる ● RxSwift でいう PublishSubject

@Published ● @Published 属性をつけてプロパティを公開すると Publisher が作られる ● プロパティの値が変更されるたびにイベントが発行されるようになる ● Publisher にアクセスするには $ 演算子が必要 ● プロパティ更新すれば自動で ( 今回は View 側 ) に通知される

HomeView actionSheet/sheetイベント発火

SwiftUIとImagePicekrの連携

SwiftUIとImagePicekrの連携

UIViewControllerRepresentable ● View Controller を SwiftUI と連携するためのプロトコル ● func makeUIViewController(context:) ○ View Controllerを作成するメソッド ● func updateUIViewController(_ :, context) ○ ステートが変更されたら呼ばれるメソッド（今回は @Bindingプロパティが更新されたら呼ばれる） ● func makeCoordinator() ○ このメソッド実装して任意のインスタンスを返すと、 makeUIViewController、 updateUIViewControllerのcontextからこのインスタンスが取得できる ○ Delegate先のインスタンスを返すことで DelegateのあるUIKitクラスでもSwiftUIと連携できる

Coodinator

まとめ ● SwiftUI で UIImagePickerController との連携方法を解説 ● コンポーネントを組み合わせて配置するときは ZStack が便利 ● PassthroughSubjectでイベントの発火とステータスの更新をバインド ● UIViewControllerRepresentableのmakeCoordinatorはDelegateがあるUIKitクラ スとSwiftUIをつなげる存在

サンプルコード https://github.com/SatoTakeshiX/Swif tUICatalog/tree/master/CameraSampl e

参考文献 ● PassthroughSubject ○ https://developer.apple.com/documentation/combine/passthroughsubject ● Learn & Master ⚔ the Basics of Combine in 5 Minutes ○ https://medium.com/ios-os-x-development/learn-master-%EF%B8%8F-th e-basics-of-combine-in-5-minutes-639421268219