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
Composeの座標を取得する ~コーチマークにおける活用事例~_DroidKaigi.col...
Search
kako351
March 31, 2023
Technology
2
2.8k
Composeの座標を取得する ~コーチマークにおける活用事例~_DroidKaigi.collect#1
kako351
March 31, 2023
Tweet
Share
More Decks by kako351
See All by kako351
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
1.4k
Paging3のSeparatorsを使って LazyColumnにヘッダーや 別のアイテムを挿入する
kako351
0
690
CircleCIでFlakyなテストを再実行する_potatotips#83
kako351
0
190
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
770
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
1.3k
【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康
kako351
0
2.5k
Other Decks in Technology
See All in Technology
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
460
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
430
ガチな登山用デバイスからこんにちは
halka
1
240
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
180
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
320
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
400
20250913_JAWS_sysad_kobe
takuyay0ne
2
170
Featured
See All Featured
Designing for Performance
lara
610
69k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
We Have a Design System, Now What?
morganepeng
53
7.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Documentation Writing (for coders)
carmenintech
74
5k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Docker and Python
trallard
45
3.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
The Invisible Side of Design
smashingmag
301
51k
Transcript
DroidKaigi.collect{ #1@Tokyo } 2023/03/31 kako351@おいしい健康 Composeの 座標を取得する ~コーチマークにおける活用事例~
自己紹介 kako351 / @kako_351 おいしい健康 Androidエンジニア Androidエンジニア募集中! 仕事 • バイク(ハンターカブ)
• ギター • コーヒー自宅焙煎 趣味 2
本日話す内容 ・事例紹介 ・ライブラリの紹介 - Spotlight / intro-showcase-viewSpotlightを採用! ・Composeの座標を取得する ・座標をSpotlightに渡す ・まとめ
3
事例紹介 4 Compose座標を取得して 何ができるのか活用事例を紹介
実現したいこと コーチマークによるチュートリアル表示。 初めてアプリを使うユーザーに対して機能の役割 を説明します。 ローディング中はコーチマークを表示せず、コン テンツを取得できたタイミングで表示します。 5 コーチマーク形式の チュートリアル
ライブラリで簡単に実装できそう! そう思っていたころが僕にもありました…… 6
コーチマークの対象画面は以下のようになっています ターゲット領域: Compose それ以外の領域: Fragment ターゲット領域にスポットライトを当てて、それ以外 の領域はマスクをかけたい・・・ 7 対象画面の構成 Fragment
Compose
8 Spotlight(https://github.com/TakuSemba/Spotlight) Kotlinのコーチマークライブラリ。指定したAndroidViewまたは座標を指定してス ポットライトを当てることができる。 Intro-showcase-view(https://github.com/canopas/Intro-showcase-view) JetpackComposeで利用可能なコーチマークライブラリ。Modifierに introShowCaseTargetをつけることでスポットライトを当てることができる。 Composeのみで構成されている画面ならこちらが有効そう。 ライブラリ紹介
9 Spotlight(https://github.com/TakuSemba/Spotlight) Kotlinのコーチマークライブラリ。指定したAndroidViewまたは座標を指定して スポットライトを当てることができる。今回の主役。 Intro-showcase-view(https://github.com/canopas/Intro-showcase-view) JetpackComposeで利用可能なコーチマークライブラリ。Modifierに introShowCaseTargetをつけることでスポットライトを当てることができる。 Composeのみで構成されている画面ならこちらが有効そう。 ライブラリ紹介 Composableの座標を渡せばできそう
Spotlightを採用!
Composeの 座標を取得する 10
11 RecommendedMenuCard.kt @Composable fun RecommendedMenuCard( //… ) { Card( modifier
= Modifier, // … }
12 RecommendedMenuCard.kt @Composable fun RecommendedMenuCard( //… ) { Card( modifier
= Modifier.onGloballyPositioned { layoutCoordinates -> // layoutCoordinatesにレイアウトの情報が含まれている }, // … } onGloballyPositionedによって コンポジションされた後のレ イアウト情報を取得
13 Modifier.onGloballyPositioned 呼び出しタイミング コンテンツのグローバル位置が変更された可能性があると呼び出され、呼び出さ れるタイミングは座標が確定するコンポジションの後になります。 呼び出し頻度 LayoutCoordinatesが使用可能な時に最低1回呼び出さ、ウィンドウ内で要素の位 置が変わるたびに呼び出されます。 呼び出されない場合 変更された要素の画面に対する相対位置が変わっても呼び出されるとは限りませ
ん。(どういうことだってばよ・・・) https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/OnGloballyPositionedModifier
14 LayoutCoordinates レイアウトの境界を測定するときに用いるホルダー 拡張関数 • boundsInParent() 親のコンテンツ領域内の子の境界ボックスを返す • boundsInRoot() ルート
コンポーザブル内のこのレイアウトの境界を返す • boundsInWindow() ウィンドウの原点に対するこのレイアウトの境界を返す
15 LayoutCoordinates レイアウトの境界を測定するときに用いるホルダー 拡張関数 • boundsInParent() 親のコンテンツ領域内の子の境界ボックスを返す • boundsInRoot() ルート
コンポーザブル内のこのレイアウトの境界を返す • boundsInWindow() ウィンドウの原点に対するこのレイアウトの境界を返す ウィンドウ上での位置情報・コン テンツサイズが欲しかったのでこ れを採用
16 RecommendedMenuCard.kt Modifier.onGloballyPositioned { layoutCoordinates -> val rect = layoutCoordinates.boundsInWindow()
// Rect.fromLTRB(left = 84.0, top = 701.0, right = 996.0, bottom = 827.0) rect.center // Offset(x = 540.0, y = 764.0) rect.size // Size(width = 912.0, height = 126.0)
17 RecommendedMenuCard.kt Modifier.onGloballyPositioned { layoutCoordinates -> val rect = layoutCoordinates.boundsInWindow()
// Rect.fromLTRB(left = 84.0, top = 701.0, right = 996.0, bottom = 827.0) rect.center // Offset(x = 540.0, y = 764.0) rect.size // Size(width = 912.0, height = 126.0) Rectを返す ウィンドウを原点にした位置 が返ってくる
18 RecommendedMenuCard.kt Modifier.onGloballyPositioned { layoutCoordinates -> val rect = layoutCoordinates.boundsInWindow()
// Rect.fromLTRB(left = 84.0, top = 701.0, right = 996.0, bottom = 827.0) rect.center // Offset(x = 540.0, y = 764.0) rect.size // Size(width = 912.0, height = 126.0) 中央の座標も取得可能 サイズも取得できる
座標をSpotlightに渡す 19
HomeFragment#startSpotLight() 20 // layoutCoordinatesからTargetを作成 Target.Builder() .setAnchor( x = layoutCoordinates.center.x.absoluteValue, y
= layoutCoordinates.center.y.absoluteValue ) .setShape( RoundedRectangle( height = layoutCoordinates.size.height * 1.05f, width = layoutCoordinates.size.width * 1.05f, radius = 25f ) ).build() // Spotlightを作成してTargetを渡す val spotlight = Spotlight.Builder(requireActivity()).setTargets(targets).build() 取得した座標を指定
HomeFragment#startSpotLight() 21 // layoutCoordinatesからTargetを作成 Target.Builder() .setAnchor( x = layoutCoordinates.center.x.absoluteValue, y
= layoutCoordinates.center.y.absoluteValue ) .setShape( RoundedRectangle( height = layoutCoordinates.size.height * 1.05f, width = layoutCoordinates.size.width * 1.05f, radius = 25f ) ).build() // Spotlightを作成してTargetを渡す val spotlight = Spotlight.Builder(requireActivity()).setTargets(targets).build() スポットライトの サイズを指定
コーチマークを表示できました。 Composeの座標やサイズの取得は、 onGloballyPositionedで割と簡単にできました! 22 成果物
まとめ 23
• Modifier.onGloballyPositionedでComposeの座標を取得可能 • 座標以外にもサイズも取得できる • 座標はRectで取得できるのでCompose外に渡すことも可能 24 まとめ 「もっといい方法があるよ!」という場合は優しく教えてくれると嬉しいです!
ご静聴 ありがとう ございました 25 DroidKaigi.collect{ #1@Tokyo } 2023/03/31 kako351@おいしい健康