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
2.3k
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
まさかのバグ!SwiftUIプレビューでハマった国際化対応の落とし穴
satotakeshi
0
340
Swift愛好会 の 思い出
satotakeshi
0
100
Xcode 15, Swift 5.9で変わる開発体験
satotakeshi
3
3k
Meet passkeys
satotakeshi
2
370
What's new in Vision
satotakeshi
0
1.8k
Swift Concurrency入門
satotakeshi
11
5.4k
複数端末のつらさを乗り越えてiOS UITestを実行
satotakeshi
1
430
Xcodegenを個人アプリに導入
satotakeshi
3
830
SwiftUIで作る開閉式メニュー
satotakeshi
2
3.1k
Other Decks in Technology
See All in Technology
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.5k
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
140
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
910
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
140
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
270
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
0
300
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
240
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
350
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Navigating Team Friction
lara
190
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
GitHub's CSS Performance
jonrohan
1032
470k
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