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.3k
Paging3のSeparatorsを使って LazyColumnにヘッダーや 別のアイテムを挿入する
kako351
0
670
CircleCIでFlakyなテストを再実行する_potatotips#83
kako351
0
180
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
760
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
1.2k
【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康
kako351
0
2.4k
Other Decks in Technology
See All in Technology
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
190
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.9k
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
330
Recoil脱却の現状と挑戦
kirik
3
460
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
260
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
100
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
320
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
160
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
280
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
240
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
170
Featured
See All Featured
Building an army of robots
kneath
306
45k
Raft: Consensus for Rubyists
vanstee
140
7k
RailsConf 2023
tenderlove
30
1.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
GitHub's CSS Performance
jonrohan
1031
460k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
It's Worth the Effort
3n
185
28k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Music & Morning Musume
bryan
46
6.7k
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@おいしい健康