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

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. ご清聴ありがとうございました