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
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
150
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
340
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
450
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
240
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
380
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
380
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.7k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
540
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Optimizing for Happiness
mojombo
379
70k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
KATA
mclloyd
32
14k
Music & Morning Musume
bryan
46
6.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
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@おいしい健康