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.6k
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
1k
Paging3のSeparatorsを使って LazyColumnにヘッダーや 別のアイテムを挿入する
kako351
0
610
CircleCIでFlakyなテストを再実行する_potatotips#83
kako351
0
170
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
730
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
1.2k
【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康
kako351
0
2k
Other Decks in Technology
See All in Technology
名単体テスト 禁断の傀儡(モック)
iwamot
PRO
1
330
Design for Failure - リージョンとAZについて
yuki_ink
0
130
encoding/json v2を予習しよう!
yuyu_hf
PRO
1
230
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
1
680
TypeScriptで実践するクリーンアーキテクチャ ― WebからもCLIからも使えるアプリ設計 / CClean Architecture with Typescript Application
panda_program
6
680
Cline&CursorによるAIコーディング徹底活用―Live Vibe Coding付き
pharma_x_tech
2
430
Docker Compose で手軽に手元環境を実現する / Simplifying Local Environments with Docker Compose #CinemaDeLT
nabeo
0
280
計装を見直してアプリケーションパフォーマンスを改善させた話
donkomura
2
190
人間性を捧げる生成AI時代の技術選定
yo4raw
2
1.1k
Microsoft Fabric のライセンスについて
ryomaru0825
2
3.5k
Streamlit in Snowflakeで加速する不動産テック企業のデータ活用 @Snowflake WESTユーザー会
yuto16
1
140
スイッチのBMC、つかってますか?
sonic
0
470
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
What's in a price? How to price your products and services
michaelherold
245
12k
Into the Great Unknown - MozCon
thekraken
38
1.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
29
950
A better future with KSS
kneath
239
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Language of Interfaces
destraynor
158
25k
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@おいしい健康