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
240
Compose Navigation実装の見通しを良くする
DroidKaigi.collect { #17@Tokyo }で発表したセッションスライドです。
hiro
March 15, 2025
Tweet
Share
More Decks by hiro
See All by hiro
Compose UIテストを使った統合テスト
hiroaki404
0
230
Kotlin/Androidでテスト駆動開発をはじめよう
hiroaki404
1
850
Other Decks in Programming
See All in Programming
Select API from Kotlin Coroutine
jmatsu
1
210
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
Discover Metal 4
rei315
2
110
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
390
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
290
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
5つのアンチパターンから学ぶLT設計
narihara
1
140
エラーって何種類あるの?
kajitack
5
330
PicoRuby on Rails
makicamel
2
120
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Balancing Empowerment & Direction
lara
1
390
Designing for humans not robots
tammielis
253
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Fireside Chat
paigeccino
37
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building Adaptive Systems
keathley
43
2.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing Experiences People Love
moore
142
24k
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実装を⽬指しましょう