SwiftUIでカメラから画像を取得する

53e2d354b3299d64a54af680865516d5?s=47 Sato Takeshi
January 21, 2020

 SwiftUIでカメラから画像を取得する

try! Swift Tokyo 2020 Meetup!!
https://tryswifttokyo.connpass.com/event/160481/

の登壇資料です

53e2d354b3299d64a54af680865516d5?s=128

Sato Takeshi

January 21, 2020
Tweet

Transcript

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

    2020 年 1 月 21日
 

  2. Who am I
 • Name
 • 佐藤剛士(さとうたけし)
 • Company
 •

    Merpay, Inc.(2019/01 ~)
 • Role
 • Software Engineer (iOS)
 • Account
 • Twitter: @hatakenokakashi
 • Facebook: 佐藤剛士
 • GitHub: SatoTakeshiX

  3. SwiftUIでImagePickerを使う方法

  4. デモアプリ

  5. デモアプリの仕様 • 画像がない場合は「画像がありません」のラ ベルを表示 • 「画像登録」ボタンタップでアクションシートを 表示 • 端末がカメラ利用可能なら「 写真を撮る」ボタ

    ン、フォトライブラリー利用可能なら「アルバム から選択」ボタンを表示 • ImagePickerViewController で画像を取得す る • 取得した画像を真ん中に表示する
  6. レイアウト

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

  8. CameraButton

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

    を操作する
  10. CustomToolBar

  11. EmptyImageView

  12. UIコンポーネントの配置

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

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

  15. レイアウト全体

  16. ロジック

  17. デモアプリの仕様 • 画像がない場合は「画像がありません」のラ ベルを表示 • 「画像登録」ボタンタップでアクションシートを 表示 • 端末がカメラ利用可能なら「 写真を撮る」ボタ

    ン、フォトライブラリー利用可能なら「アルバム から選択」ボタンを表示 • ImagePickerViewController で画像を取得す る • 取得した画像を真ん中に表示する
  18. MVVMでSwiftUI

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

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

  21. HomeViewModelソース

  22. HomeViewModelソース

  23. PassthroughSubject • Combine フレームワークの概念 ◦ Publisher ▪ 時間経過によって一連の値を配信するプロトコル ◦ Subject

    ▪ Publisher の一つ ▪ send メソッドで外部から値を配信するプロトコル • PassthroughSubject は Subject の一種 • subscriber に値を配信する • subscribe する前に配信された値は捨てられる • RxSwift でいう PublishSubject
  24. @Published • @Published 属性をつけてプロパティを公開すると Publisher が作られる • プロパティの値が変更されるたびにイベントが発行されるようになる • Publisher

    にアクセスするには $ 演算子が必要 • プロパティ更新すれば自動で ( 今回は View 側 ) に通知される
  25. HomeView actionSheet/sheetイベント発火

  26. SwiftUIとImagePicekrの連携

  27. SwiftUIとImagePicekrの連携

  28. UIViewControllerRepresentable • View Controller を SwiftUI と連携するためのプロトコル • func makeUIViewController(context:)

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

  30. まとめ • SwiftUI で UIImagePickerController との連携方法を解説 • コンポーネントを組み合わせて配置するときは ZStack が便利

    • PassthroughSubjectでイベントの発火とステータスの更新をバインド • UIViewControllerRepresentableのmakeCoordinatorはDelegateがあるUIKitクラ スとSwiftUIをつなげる存在
  31. サンプルコード https://github.com/SatoTakeshiX/Swif tUICatalog/tree/master/CameraSampl e

  32. 参考文献 • 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