GeometryReaderでSwiftUIのViewをキャプチャする

53e2d354b3299d64a54af680865516d5?s=47 Sato Takeshi
December 17, 2019

 GeometryReaderでSwiftUIのViewをキャプチャする

potatotips #67 (iOS/Android開発Tips共有会) https://potatotips.connpass.com/event/152899/

登壇資料です。

53e2d354b3299d64a54af680865516d5?s=128

Sato Takeshi

December 17, 2019
Tweet

Transcript

  1. GeometryReaderでSwiftUIの Viewを
 キャプチャする
 potatotips #67 
 
 佐藤剛士 2019 年

    12 月 17日
 

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

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

  3. SwiftUI実践入門を技術書典で配布

  4. SwiftUIでキャプチャはとれる?

  5. Viewのキャプチャをとるのに 必要な情報は?

  6. UIViewでやるなら

  7. Viewのキャプチャをとるのに必要な情報 • View の Bounds( 矩形情報 ) • View の

    CALayer
  8. Viewのキャプチャをとるのに必要な情報 • View の Bounds( 矩形情報 ) • View の

    CALayer UIViewにはプロパティとし てあるけど SwiftUIのViewにはな い!
  9. どうしよう?

  10. ViewのBounds(矩形情報) -> GeometryReaderで取得 ViewのCALayer -> SwiftUIからUIViewに変換

  11. GeometryReader • SwiftUI で座標情報を取得できる特別な View • 自身のサイズと座標空間を返すクロージャーをプロパティとして保持 • クロージャーの引数 GeometryProxy

    に準拠したインスタンスから自身のサイズや RootView の座標情報を取得できる
  12. SwiftUIのorigin座標 • UIKit と同じく左上から始まる • RootView はデフォルトではステータスバーの下から始まる • edgesIgnoringSafeArea をつかうことでステータスバーの上

    から計算することも可能
  13. geometry.frame(in: .global)でRootViewの座標情報 • UIKit と同じく左上から始まる

  14. UIViewとSwiftUIの座標情報の取得 フレームワーク 型 プロパティ・メソッド 内容 UIKit UIView frame 親Viewの座標空間 での矩形情報

    UIKit UIView bounds 自身の座標空間で の矩形情報 SwiftUI GeometryReader geometry.frame(in: .global) RootViewの座標空 間での矩形情報 SwiftUI GeometryReader geometry.frame(in: .local) 自身の座標空間で の矩形情報
  15. Scrollで動的に座標が変わる

  16. 矩形の情報をとれた!

  17. SwiftUIからUIViewに変換

  18. UIHostingControllerを使う

  19. SwiftUIからUIViewに変換

  20. UIViewからキャプチャ

  21. UIViewからキャプチャ

  22. お絵かきアプリをレイアウト

  23. 親Viewで Canvasの Rect保持 Canvasにわ たす

  24. CanvasのRectを onAppearで更新 @Bindingなのでプ ロパティ更新で親 にも通知される

  25. 保存ボタンタッ プ

  26. EXC_BAD_INSTRUCTIONでアプリが落ちる

  27. Take 2

  28. UIHostingControllerに selfではなくて、 データを渡してCanvas Viewを作る

  29. UIHostingControllerに selfではなくて、 データを渡してViewを作る

  30. キャプチャがとれた!

  31. まとめ:SwiftUIでViewのキャプチャをとるには • GeometryReader で View の矩形情報を取得 • 子 View から親ビューに子の矩形情報を渡す

    • SwiftUI から UIView に UIHostingController で変換 ◦ 渡す View は self ではなくその場でインスタンスを作る • UIView の view.layer.render(in: context) でキャプチャ取得
  32. サンプルコード https://github.com/SatoTakeshiX/Swif tUICatalog/tree/master/GeometryRea derSample