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

by Sato Takeshi

Slide 1

Slide 1 text

GeometryReaderでSwiftUIの Viewを  キャプチャする  potatotips #67     佐藤剛士 2019 年 12 月 17日   

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

UIViewでやるなら

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

どうしよう？

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Scrollで動的に座標が変わる

Slide 16

Slide 16 text

矩形の情報をとれた！

Slide 17

Slide 17 text

SwiftUIからUIViewに変換

Slide 18

Slide 18 text

UIHostingControllerを使う

Slide 19

Slide 19 text

SwiftUIからUIViewに変換

Slide 20

Slide 20 text

UIViewからキャプチャ

Slide 21

Slide 21 text

UIViewからキャプチャ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

保存ボタンタップ

Slide 26

Slide 26 text

EXC_BAD_INSTRUCTIONでアプリが落ちる

Slide 27

Slide 27 text

Take 2

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

キャプチャがとれた！

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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