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

by Yappli Developers

Slide 1

Slide 1 text

TabLayout 上での FragmentManagerと BackStackの管理方法

Slide 2

Slide 2 text

Speaker プロダクト開発本部開発1部 Android グループ Android エンジニア張哲于 • 張哲于、ニックネーム「てつ」 • Android 歴約10年 (1.6から) • 仕事のモチベーションは、困っている人に自分も欲しいものを作って届けること • 現在発信力を高める努力をしている

Slide 3

Slide 3 text

01 02 03 TabLayout の画面遷移でよく挙げられる要望各要望の実装法とデモ実演実装の注意点

Slide 4

Slide 4 text

0 1 TabLayout の画面遷移でよく挙げられる要望アプリ内に入れたい機能が多い！詳細ページや他の機能に遷移するルートが欲しい！これは作れるの？

Slide 5

Slide 5 text

ブレイクダウン 1 . ページの遷移と戻る 2 . 最初のページに戻る 3 . 一個前のタブに戻る 4 . タブ内容の状態を維持する 5 . ページとタブの戻る動作が併存できる 0 1 TabLayout の画面遷移でよく挙げられる要望タブタブタブページ

Slide 6

Slide 6 text

• Index: 0, Id: 0246787931 • Index: 1, Id: 234788107 • Index: 2, Id: 125561020 • Index: 3, Id: 14409808 1 Demo 02 各要望の実装法とデモ実演 - ページの遷移と戻る Fragment

Slide 7

Slide 7 text

1. ページの遷移と戻る - FragmentTransaction add() と replace()

Slide 8

Slide 8 text

1. ページの遷移と戻る - FragmentTransaction A B C D .add(A) .add(B) .add(D) A B C D D .replace(D) A B C

Slide 9

Slide 9 text

1. ページの遷移と戻る - FragmentTransaction FragmentTransaction. addToBackStack() と FragmentManager. popBackStack()

Slide 10

Slide 10 text

2 1. ページの遷移と戻る - FragmentTransaction Stack Index 0 Index 2 Index 1 Stack Index 0 Index 1 Index 2 add 実装

Slide 11

Slide 11 text

3 1. ページの遷移と戻る - FragmentTransaction pop Stack Index 0 Index 2 Index 1 Stack Index 0 Index 1 実装（続き）

Slide 12

Slide 12 text

• Index: 0, Id: 156988707 • Index: 1, Id: 101360987 • Index: 2, Id: 100894719 • Index: 3, id: 208129123 1 Demo 02 各要望の実装法とデモ実演 - 最初のページに戻る Fragment

Slide 13

Slide 13 text

2 2. 最初のページに戻る - FragmentManager pop all Stack Index 0 Index 2 Index 1 Stack 実装

Slide 14

Slide 14 text

2. 最初のページに戻る - FragmentManager ページ Fragment タブ Fragment FragmentManager FragmentManager FragmentActivity .supportFragmentManager .childFragmentManager .parentFragmentManager .parentFragmentManager 3 実装（続き）

Slide 15

Slide 15 text

• EMPTY (0) • CHILD (1) • KEEP (2) • CHILD (1) • KEEP (2) • EMPTY (0) 1 Demo 02 各要望の実装法とデモ実演 - タブの遷移と戻る Fragment

Slide 16

Slide 16 text

3. タブの遷移と戻る - FragmentManager ページ Fragment タブ Fragment FragmentManager FragmentManager FragmentActivity .supportFragmentManager .childFragmentManager .parentFragmentManager .parentFragmentManager 2 実装

Slide 17

Slide 17 text

• 入力内容: 1234 • 回転前 → 回転後 • SaveState: なし → 1234 • ページ戻る • SaveState: なし 1 Demo 02 各要望の実装法とデモ実演 - タブ内容の状態を維持する Fragment

Slide 18

Slide 18 text

4. タブ内容の状態を維持するバックスタックに追加構成の変更（画面回転など）プロセスライフサイクルの終了変数 ✓ ✘ ✘ ✘ ViewState ✓ ✓ ✓ ✘ SaveState ✘ ✓ ✓ ✘ 2 データの状況

Slide 19

Slide 19 text

A B C ViewModel ViewState SaveState • 自身の状態を管理する役割 • IDがあれば自動的に状態を保持する • カスタムビューの場合、他の実装が必要 • フラグメント動的状態を管理する役割 • Framgentライフサイクルでアクセス • ビジネスロジック、画面レベルの状態ホルダー • 画面の回転など構成が変更されたときの対応手段 • セーブステイトはSavedStateHandleで対応可能 4. タブ内容の状態を維持する

Slide 20

Slide 20 text

• 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

Slide 21

Slide 21 text

Stack 5. ページとタブの戻る動作が併存できる ϖʔδ Stack (Child) Index 0 Index 1 Index 2 ϖʔδ Stack (Empty) ϖʔδ Stack (Keep) ϖʔδ Stack (Child) Index 0 Index 1 Index 2 2 BackStack

Slide 22

Slide 22 text

5. ページとタブの戻る動作が併存できる 3 実装

Slide 23

Slide 23 text

஫ҙ఺ • Memory Leak が発生しやすい • Lifecycle よる不整合 03 実装の注意点

Slide 24

Slide 24 text

1 2 3 その他なりやすい対象検出手段 • ViewBinding • Receiver • ライブラリ：LeakCanary • WeakReferenceの利用 1 . Memory Leak

Slide 25

Slide 25 text

• Activity と Fragment 内に追加する順番 • 例： • Activity側 → onCreate() • Fragment側 → onCreateView() 1 Lifecycle 2 . Lifecycle OnBackPressedDispatcher

Slide 26

Slide 26 text

• Component Scope • @ActivityScoped • @FragmentScoped 1 Lifecycle 2 . Lifecycle Dagger Hilt

Slide 27

Slide 27 text

https://github.com/iyotetsuya/TabLayout- Demo ソースコード

Slide 28

Slide 28 text

参考資料 •https://developer.android.com/guide/fragments/ •https://m3.material.io/components/tabs/overview

Slide 29

Slide 29 text

ご清聴ありがとうございました