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.collect#1
Search
kako351
March 31, 2023
Technology
2
1.6k
Composeの座標を取得する ~コーチマークにおける活用事例~_DroidKaigi.collect#1
kako351
March 31, 2023
Tweet
Share
More Decks by kako351
See All by kako351
Paging3のSeparatorsを使って LazyColumnにヘッダーや 別のアイテムを挿入する
kako351
0
240
CircleCIでFlakyなテストを再実行する_potatotips#83
kako351
0
110
ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2
kako351
1
450
チームで導入する Jetpack Compose あの素晴らしいLTをもう一度.ver
kako351
1
820
【DevFest & ADS JP 22】チームで導入するJetpackCompose@おいしい健康
kako351
0
1.2k
Other Decks in Technology
See All in Technology
開発パフォーマンスを最大化するための開発体制
ham0215
2
360
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
220
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
560
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
JSON攻略法.pdf
miyakemito
8
5k
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
lycorptech_jp
PRO
1
110
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
350
Building Dashboards as a Hobby
egmc
0
120
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
650
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
510
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
How to train your dragon (web standard)
notwaldorf
73
5.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Building Your Own Lightsaber
phodgson
99
5.7k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Writing Fast Ruby
sferik
621
60k
How GitHub (no longer) Works
holman
304
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
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@おいしい健康