Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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