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

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

登壇資料です。

Transcript

1. GeometryReaderでSwiftUIの
   Viewを

   キャプチャする

   potatotips #67 

   

   佐藤剛士 2019 年 12 月 17日

   

   

   View Slide

2. Who am I

   ● Name

   ● 佐藤剛士(さとうたけし)

   ● Company

   ● Merpay, Inc.(2019/01 ~)

   ● Role

   ● Software Engineer (iOS)

   ● Account

   ● Twitter: @hatakenokakashi

   ● Facebook: 佐藤剛士

   ● GitHub: SatoTakeshiX

   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. UIViewでやるなら
   

   View Slide

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

   View Slide

8. Viewのキャプチャをとるのに必要な情報
   ●
   View
   の
   Bounds(
   矩形情報
   )
   ●
   View
   の
   CALayer
   UIViewにはプロパティとし
   てあるけど
   SwiftUIのViewにはな
   い！
   

   View Slide

9. どうしよう？
   

   View Slide

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

    View Slide

11. GeometryReader
    ●
    SwiftUI
    で座標情報を取得できる特別な
    View
    ● 自身のサイズと座標空間を返すクロージャーをプロパティとして保持
    ● クロージャーの引数
    GeometryProxy
    に準拠したインスタンスから自身のサイズや
    RootView
    の座標情報を取得できる
    

    View Slide

12. SwiftUIのorigin座標
    ●
    UIKit
    と同じく左上から始まる
    ●
    RootView
    はデフォルトではステータスバーの下から始まる
    ●
    edgesIgnoringSafeArea
    をつかうことでステータスバーの上
    から計算することも可能
    

    View Slide

13. geometry.frame(in: .global)でRootViewの座標情報
    ●
    UIKit
    と同じく左上から始まる
    

    View Slide

14. UIViewとSwiftUIの座標情報の取得
    フレームワーク 型 プロパティ・メソッド 内容
    UIKit UIView frame 親Viewの座標空間
    での矩形情報
    UIKit UIView bounds 自身の座標空間で
    の矩形情報
    SwiftUI GeometryReader geometry.frame(in:
    .global)
    RootViewの座標空
    間での矩形情報
    SwiftUI GeometryReader geometry.frame(in:
    .local)
    自身の座標空間で
    の矩形情報
    

    View Slide

15. Scrollで動的に座標が変わる
    

    View Slide

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

    View Slide

17. SwiftUIからUIViewに変換
    

    View Slide

18. UIHostingControllerを使う
    

    View Slide

19. SwiftUIからUIViewに変換
    

    View Slide

20. UIViewからキャプチャ
    

    View Slide

21. UIViewからキャプチャ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. 保存ボタンタッ
    プ
    

    View Slide

26. EXC_BAD_INSTRUCTIONでアプリが落ちる
    

    View Slide

27. Take 2
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. まとめ：SwiftUIでViewのキャプチャをとるには
    ●
    GeometryReader
    で
    View
    の矩形情報を取得
    ● 子
    View
    から親ビューに子の矩形情報を渡す
    ●
    SwiftUI
    から
    UIView
    に
    UIHostingController
    で変換
    ○ 渡す
    View
    は
    self
    ではなくその場でインスタンスを作る
    ●
    UIView
    の
    view.layer.render(in: context)
    でキャプチャ取得
    

    View Slide

32. サンプルコード
    https://github.com/SatoTakeshiX/Swif
    tUICatalog/tree/master/GeometryRea
    derSample
    

    View Slide