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 Navigation実装の見通しを良くする
Search
hiro
March 15, 2025
Programming
0
200
Compose Navigation実装の見通しを良くする
DroidKaigi.collect { #17@Tokyo }で発表したセッションスライドです。
hiro
March 15, 2025
Tweet
Share
More Decks by hiro
See All by hiro
Compose UIテストを使った統合テスト
hiroaki404
0
190
Kotlin/Androidでテスト駆動開発をはじめよう
hiroaki404
1
760
Other Decks in Programming
See All in Programming
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
310
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
180
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
Java 24まとめ / Java 24 summary
kishida
3
500
AIコーディングの理想と現実
tomohisa
22
29k
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
ミリしらMCP勉強会
watany
4
760
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
290
Make Parsers Compatible Using Automata Learning
makenowjust
1
4.6k
Unlock the Potential of Swift Code Generation
rockname
0
250
国漢文混用体からHolloまで
minhee
1
190
Chrome Extension Techniques from Hell
moznion
1
160
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A Tale of Four Properties
chriscoyier
158
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Become a Pro
speakerdeck
PRO
27
5.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Transcript
納庄 宏明 Nosho Hiroaki / hiro Compose Naviga-on実装の⾒通しを良くする 2025/3/14 DroidKaigi.collect
{ #17@Tokyo }
⾃⼰紹介 •Android Engineer •納庄 宏明 Nosho Hiroaki / hiro •最近の個⼈の活動
•OSS制作 •Compose Mul-pla/orm試したり 本⽇のサンプルコード
Naviga&onの実装が雑になってい ませんか?
悪い例
Naviga&onの⾒通しを良くしよう
発表でふれること •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •覚書 •Naviga-on3というライブラリが ⽤意されている?🤔
型安全なNaviga&on
Compose Naviga-on Safe Args •ナビゲーションの型安全機能🚀 •routeや値渡しが型安全になる •不正な画⾯遷移による実⾏時エラーを防ぐ •保守性 ⬆ 可読性
⬆ •Compose Mul3pla;ormでも使える
従来 ルートを⽂字列で指定 argumentsで いろいろ設定 argumentsで いろいろ設定
Safe Args ルートをジェネリクスで指定 フィールドにアクセス 型を定義 値を渡す時
⽐較 従来 Safe Args
•プリミティブ型全般、Enum •Custome Typeを使えば、⾃作クラスも渡せるが、、 •CustomeTypeは乱⽤しないこと •Single Source Of Truthに従っているか?🤔 •画⾯遷移ではidなど最⼩限の情報だけ渡す •Repositoryに情報源を置き、リアクティブに情報を更新
値は何が渡せるのか?
Safe Argsのしくみ •Kotlin Serializa3onを使う •内部ではクラス名の⽂字列を⽣成 •⽂字列指定の⽅法と共存可能💡 •ということは、移⾏も楽 •⼀部の画⾯だけから置き換えられる •Kotlin Serializa3on機能⾊々使える
•⽣成されるルート⽂字列は@SerialNameで修正可能
良いNaviga&on Graphの構成
良いNavigation Graphの構成の観点 •⼀覧性:画⾯構成/画⾯関係の把握しやすさ •検索性:⾒つけやすさ •DRY:コードが重複しない •良くする⽅法を⾒ていきましょう
関連する画⾯を⼀つにまとめる 関数でまとめる グループ化/ 階層化される ⼀連のフローはNested Graphでも可
カプセル化する ルート定義とUI実装を カプセル化 呼び出し側で⼀覧性向上 ※navigate関数もカプセル化しています
ルートの定義を⾒つけやすくする Sealed Interfaceの 内部クラスとして定義 補完から⾒つけやすい
トップバー・ボトムバー
トップバー・ボトムバーをどこに置く? •Naviga3on Graphの外に置くか、中に置くか?🤔 •やり⽅を間違えるとコードの⾒通しが悪くなる •Good/Badを整理しながら1つずつ紹介します Nav Graph TopBar Screen1, Screen2...
Nav Graph Screen1, Screen2... TopBar
①トップバーをNaviga-on Graphの外に置く Good ⬆ • 記述が⼀回なのでシンプル Bad ⬇ • 画⾯ごとにトップバーを出し分けづ
らい(ボタンを変更する等) • 設定クラスを使って出し分ける • 出し分けの種類が増えると設定クラスが⼤ きくなってしまう⬇ • 出し分けが不要なボトムバーに👍 Nav Graph TopBar Screen1, Screen2... 設定クラス title = title = “〇〇画⾯” title =
Good ⬆ • 画⾯ごとの出し分けに柔軟 • 動的にUIを変えやすい (Bad ⬇) • トップバーを固定で出し続けられない
(あまり問題にはならない?) •毎回トップバーの記述が必要 できるだけトップバーの実装を共通化 させる ②トップバーを画⾯の中に置く Nav Graph Screen1, Screen2... TopBar
Good ⬆ • ①②のいいとこどり • 柔軟性を持たせたいときだけ内側の トップバーを使える Bad ⬇ •
アニメーションを調整する必要があ る ③画⾯ごとに外のトップバーを使うか判断する Nav Graph if (useOutsideBar) TopBar Screen1, Screen2... 設定クラス useOutsideBar = true false true 設定クラスは 表⽰・⾮表⽰だけ
Nav Graph ④ボトムバーのある画⾯をNested Naviga-onにする • Good ⬆ • 設定クラス等で隠す必要がない •
2つのNavHostのネストが必要 ※通常のNested Graphでは実現でき ない Bad ⬇ • navControlerが2つあり、使い分けが 必要 • deeplinkの動作に注意 Bottom Bar Nested Graph Screen1, Screen2... Screen3, Screen4... ボトムバーのある画⾯だけ ネストグラフにまとめる
ログ
BackStackをログにとる •デバッグ環境でBackStackを記録 •画⾯遷移の履歴、BackStackの積まれ⽅ •Crashly-csのクラッシュログに送る •Crashly3csに関してはAnaly3csのScreenViewを設定しておくとパ ンくずリストで⾒れる •ただし全画⾯で指定しておく必要がある BirdListView
まとめ
本⽇話したこと •型安全なNaviga3on •良いNaviga3on Graphの構成 •トップバー・ボトムバー •ログ •⾒通しのよいNaviga3on実装を⽬指しましょう