Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GeometryReaderでSwiftUIのViewをキャプチャする
Search
Sato Takeshi
December 17, 2019
Technology
6
2k
GeometryReaderでSwiftUIのViewをキャプチャする
potatotips #67 (iOS/Android開発Tips共有会)
https://potatotips.connpass.com/event/152899/
登壇資料です。
Sato Takeshi
December 17, 2019
Tweet
Share
More Decks by Sato Takeshi
See All by Sato Takeshi
Xcode 15, Swift 5.9で変わる開発体験
satotakeshi
3
2.3k
Meet passkeys
satotakeshi
2
280
What's new in Vision
satotakeshi
0
970
Swift Concurrency入門
satotakeshi
10
4k
複数端末のつらさを乗り越えてiOS UITestを実行
satotakeshi
1
330
Xcodegenを個人アプリに導入
satotakeshi
3
610
SwiftUIで作る開閉式メニュー
satotakeshi
2
2.6k
swift-snapshot-testingでVisual Testingを効率化
satotakeshi
0
960
SwiftUIのデータ管理
satotakeshi
6
1.7k
Other Decks in Technology
See All in Technology
オブジェクト指向宗教史
tanakahisateru
13
12k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
11k
Vos logs méritent mieux que la config par défaut
lyrixx
2
270
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
160
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
私のRSpecの書き方 / How I write RSpec
tmtms
4
820
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
どう買う?Azure
kuniteru
1
190
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
370
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
290
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
In The Pink: A Labor of Love
frogandcode
137
21k
Git: the NoSQL Database
bkeepers
PRO
421
63k
A designer walks into a library…
pauljervisheath
199
23k
Become a Pro
speakerdeck
PRO
8
4.4k
Adopting Sorbet at Scale
ufuk
66
8.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
The Cult of Friendly URLs
andyhume
72
5.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Transcript
GeometryReaderでSwiftUIの Viewを キャプチャする potatotips #67 佐藤剛士 2019 年
12 月 17日
Who am I • Name • 佐藤剛士(さとうたけし) • Company •
Merpay, Inc.(2019/01 ~) • Role • Software Engineer (iOS) • Account • Twitter: @hatakenokakashi • Facebook: 佐藤剛士 • GitHub: SatoTakeshiX
SwiftUI実践入門を技術書典で配布
SwiftUIでキャプチャはとれる?
Viewのキャプチャをとるのに 必要な情報は?
UIViewでやるなら
Viewのキャプチャをとるのに必要な情報 • View の Bounds( 矩形情報 ) • View の
CALayer
Viewのキャプチャをとるのに必要な情報 • View の Bounds( 矩形情報 ) • View の
CALayer UIViewにはプロパティとし てあるけど SwiftUIのViewにはな い!
どうしよう?
ViewのBounds(矩形情報) -> GeometryReaderで取得 ViewのCALayer -> SwiftUIからUIViewに変換
GeometryReader • SwiftUI で座標情報を取得できる特別な View • 自身のサイズと座標空間を返すクロージャーをプロパティとして保持 • クロージャーの引数 GeometryProxy
に準拠したインスタンスから自身のサイズや RootView の座標情報を取得できる
SwiftUIのorigin座標 • UIKit と同じく左上から始まる • RootView はデフォルトではステータスバーの下から始まる • edgesIgnoringSafeArea をつかうことでステータスバーの上
から計算することも可能
geometry.frame(in: .global)でRootViewの座標情報 • UIKit と同じく左上から始まる
UIViewとSwiftUIの座標情報の取得 フレームワーク 型 プロパティ・メソッド 内容 UIKit UIView frame 親Viewの座標空間 での矩形情報
UIKit UIView bounds 自身の座標空間で の矩形情報 SwiftUI GeometryReader geometry.frame(in: .global) RootViewの座標空 間での矩形情報 SwiftUI GeometryReader geometry.frame(in: .local) 自身の座標空間で の矩形情報
Scrollで動的に座標が変わる
矩形の情報をとれた!
SwiftUIからUIViewに変換
UIHostingControllerを使う
SwiftUIからUIViewに変換
UIViewからキャプチャ
UIViewからキャプチャ
お絵かきアプリをレイアウト
親Viewで Canvasの Rect保持 Canvasにわ たす
CanvasのRectを onAppearで更新 @Bindingなのでプ ロパティ更新で親 にも通知される
保存ボタンタッ プ
EXC_BAD_INSTRUCTIONでアプリが落ちる
Take 2
UIHostingControllerに selfではなくて、 データを渡してCanvas Viewを作る
UIHostingControllerに selfではなくて、 データを渡してViewを作る
キャプチャがとれた!
まとめ:SwiftUIでViewのキャプチャをとるには • GeometryReader で View の矩形情報を取得 • 子 View から親ビューに子の矩形情報を渡す
• SwiftUI から UIView に UIHostingController で変換 ◦ 渡す View は self ではなくその場でインスタンスを作る • UIView の view.layer.render(in: context) でキャプチャ取得
サンプルコード https://github.com/SatoTakeshiX/Swif tUICatalog/tree/master/GeometryRea derSample