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
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
FastConnect の冗長性
ocise
1
9.6k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
High Performance PHP
cmuench
0
140
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
How STYLIGHT went responsive
nonsquared
98
5.3k
KATA
mclloyd
29
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Optimizing for Happiness
mojombo
376
70k
Making Projects Easy
brettharned
116
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