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
270
Compose Navigation実装の見通しを良くする
DroidKaigi.collect { #17@Tokyo }で発表したセッションスライドです。
hiro
March 15, 2025
Tweet
Share
More Decks by hiro
See All by hiro
Compose UIテストを使った統合テスト
hiroaki404
0
260
Kotlin/Androidでテスト駆動開発をはじめよう
hiroaki404
1
900
Other Decks in Programming
See All in Programming
1から理解するWeb Push
dora1998
7
1.9k
Reading Rails 1.0 Source Code
okuramasafumi
0
250
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
速いWebフレームワークを作る
yusukebe
5
1.7k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Design Foundational Data Engineering Observability
sucitw
3
210
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
AIでLINEスタンプを作ってみた
eycjur
1
230
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
testingを眺める
matumoto
1
140
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Faster Mobile Websites
deanohume
309
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Producing Creativity
orderedlist
PRO
347
40k
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実装を⽬指しましょう