TabLayout上でのFragmentManagerとBackstackの管理方法 / How to manage FragmentManager and Backstack on TabLayout

Yappli Tech Conference 2023 登壇資料

connpass:
https://yappli.connpass.com/event/295001/

セッション動画（YouTube:）
https://youtu.be/TqEQ7e09cUE?si=B7TXcEy_RuHEunBm

Transcript

1. TabLayout 上での FragmentManagerと BackStackの管理 方 法
2. Speaker プロダクト開発本部 開発1部 Android グループ Android エンジニア 張 哲于 • 張哲于、ニックネーム「てつ」 • Android 歴約10年 (1.6から) • 仕事のモチベーションは、困っている 人 に 自 分も 欲しいものを作って届けること • 現在発信 力 を 高 める努 力 をしている
3. 01 02 03 TabLayout の画 面 遷移でよく挙げられる要望 各要望の実装法とデモ実演 実装の注意点
4. 0 1 TabLayout の画 面 遷移でよく挙げられる要望 アプリ内に 入 れたい機能が多い！ 詳細ページや他の機能に遷移するルートが欲しい！ これは作れるの？
5. ブレイクダウン 1 . ページの遷移と戻る 2 . 最初のページに戻る 3 . 一 個前のタブに戻る 4 . タブ内容の状態を維持する 5 . ページとタブの戻る動作が併存できる 0 1 TabLayout の画 面 遷移でよく挙げられる要望 タブ タブ タブ ページ
6. • Index: 0, Id: 0246787931 • Index: 1, Id: 234788107 • Index: 2, Id: 125561020 • Index: 3, Id: 14409808 1 Demo 02 各要望の実装法とデモ実演 - ページの遷移と戻る Fragment
7. 1. ページの遷移と戻る - FragmentTransaction add() と replace()
8. 1. ページの遷移と戻る - FragmentTransaction A B C D .add(A) .add(B) .add(D) A B C D D .replace(D) A B C
9. 1. ページの遷移と戻る - FragmentTransaction FragmentTransaction. addToBackStack() と FragmentManager. popBackStack()
10. 2 1. ページの遷移と戻る - FragmentTransaction Stack Index 0 Index 2 Index 1 Stack Index 0 Index 1 Index 2 add 実装
11. 3 1. ページの遷移と戻る - FragmentTransaction pop Stack Index 0 Index 2 Index 1 Stack Index 0 Index 1 実装（続き）
12. • Index: 0, Id: 156988707 • Index: 1, Id: 101360987 • Index: 2, Id: 100894719 • Index: 3, id: 208129123 1 Demo 02 各要望の実装法とデモ実演 - 最初のページに戻る Fragment
13. 2 2. 最初のページに戻る - FragmentManager pop all Stack Index 0 Index 2 Index 1 Stack 実装
14. 2. 最初のページに戻る - FragmentManager ページ Fragment タブ Fragment FragmentManager FragmentManager FragmentActivity .supportFragmentManager .childFragmentManager .parentFragmentManager .parentFragmentManager 3 実装（続き）
15. • EMPTY (0) • CHILD (1) • KEEP (2) • CHILD (1) • KEEP (2) • EMPTY (0) 1 Demo 02 各要望の実装法とデモ実演 - タブの遷移と戻る Fragment
16. 3. タブの遷移と戻る - FragmentManager ページ Fragment タブ Fragment FragmentManager FragmentManager FragmentActivity .supportFragmentManager .childFragmentManager .parentFragmentManager .parentFragmentManager 2 実装
17. • 入力 内容: 1234 • 回転前 → 回転後 • SaveState: なし → 1234 • ページ戻る • SaveState: なし 1 Demo 02 各要望の実装法とデモ実演 - タブ内容の状態を維持する Fragment
18. 4. タブ内容の状態を維持する バックスタックに追加 構成の変更 （画 面 回転など） プロセス ライフサイクルの終了 変数 ✓ ✘ ✘ ✘ ViewState ✓ ✓ ✓ ✘ SaveState ✘ ✓ ✓ ✘ 2 データの状況
19. A B C ViewModel ViewState SaveState • 自身 の状態を管理する役割 • IDがあれば 自 動的に状態を保持する • カスタムビューの場合、他の実装が必要 • フラグメント動的状態を管理する役割 • Framgentライフサイクルでアクセス • ビジネスロジック、画 面 レベルの状態ホルダー • 画 面 の回転など構成が変更されたときの対応 手 段 • セーブステイトはSavedStateHandleで対応可能 4. タブ内容の状態を維持する
20. • EMPTY (0) index: 0 • CHILD (1) index: 0 • CHILD (1) index: 1 • CHILD (1) index: 2 • KEEP (2) index: 0 • CHILD (1) index: 2 →όοΫΞΫγϣϯ • CHILD (1) index: 1 1 Demo 02 各要望の実装法とデモ実演 - ページとタブの戻る動作が併存できる Fragment
21. Stack 5. ページとタブの戻る動作が併存できる ϖʔδ Stack (Child) Index 0 Index 1 Index 2 ϖʔδ Stack (Empty) ϖʔδ Stack (Keep) ϖʔδ Stack (Child) Index 0 Index 1 Index 2 2 BackStack
22. 5. ページとタブの戻る動作が併存できる 3 実装
23. ஫ҙ఺ • Memory Leak が発 生 しやすい • Lifecycle よる不整合 03 実装の注意点
24. 1 2 3 その他 なりやすい対象 検出 手 段 • ViewBinding • Receiver • ライブラリ：LeakCanary • WeakReferenceの利 用 1 . Memory Leak
25. • Activity と Fragment 内に追加する順番 • 例： • Activity側 → onCreate() • Fragment側 → onCreateView() 1 Lifecycle 2 . Lifecycle OnBackPressedDispatcher
26. • Component Scope • @ActivityScoped • @FragmentScoped 1 Lifecycle 2 . Lifecycle Dagger Hilt
27. https://github.com/iyotetsuya/TabLayout- Demo ソースコード
28. 参考資料 •https://developer.android.com/guide/fragments/ •https://m3.material.io/components/tabs/overview
29. ご清聴ありがとうございました