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.4k
Meet passkeys
satotakeshi
2
280
What's new in Vision
satotakeshi
0
1k
Swift Concurrency入門
satotakeshi
10
4.1k
複数端末のつらさを乗り越えてiOS UITestを実行
satotakeshi
1
330
Xcodegenを個人アプリに導入
satotakeshi
3
620
SwiftUIで作る開閉式メニュー
satotakeshi
2
2.7k
swift-snapshot-testingでVisual Testingを効率化
satotakeshi
0
980
SwiftUIのデータ管理
satotakeshi
6
1.7k
Other Decks in Technology
See All in Technology
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
430
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
610
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
230
API Gatewayと少し仲良くなってみた!
masuchoku
0
100
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
150
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
820
MapLibreとAmazon Location Service
dayjournal
1
150
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
1
6.7k
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
530
20分で完全に理解するGrafanaダッシュボード
hamadakoji
1
180
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
Featured
See All Featured
Unsuck your backbone
ammeep
663
57k
Git: the NoSQL Database
bkeepers
PRO
422
63k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Code Reviewing Like a Champion
maltzj
514
39k
Rails Girls Zürich Keynote
gr2m
91
13k
Atom: Resistance is Futile
akmur
259
25k
The Mythical Team-Month
searls
216
42k
How STYLIGHT went responsive
nonsquared
92
4.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Designing for humans not robots
tammielis
248
25k
Making Projects Easy
brettharned
108
5.5k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
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