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.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
まさかのバグ!SwiftUIプレビューでハマった国際化対応の落とし穴
satotakeshi
0
230
Swift愛好会 の 思い出
satotakeshi
0
74
Xcode 15, Swift 5.9で変わる開発体験
satotakeshi
3
2.9k
Meet passkeys
satotakeshi
2
330
What's new in Vision
satotakeshi
0
1.5k
Swift Concurrency入門
satotakeshi
11
4.9k
複数端末のつらさを乗り越えてiOS UITestを実行
satotakeshi
1
380
Xcodegenを個人アプリに導入
satotakeshi
3
740
SwiftUIで作る開閉式メニュー
satotakeshi
2
2.9k
Other Decks in Technology
See All in Technology
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
All you need to know about InnoDB Primary Keys
lefred
0
120
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Facilitating Awesome Meetings
lara
51
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Scaling GitHub
holman
459
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Tale of Four Properties
chriscoyier
158
23k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
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