ActivityからFragmentを起動させて戻る設定を前回はやってみましたが、Fragmentから別のFragmentへ遷移させる方法を試してみます。
2021.2.1
Fragment から Fragmentへ遷移
FragmentからFragmentへの画面遷移ですが、以下の動画のような動きをさせてみました。
これは、BackStackに状態を保存しながらカウントアップで2つのFragmentを遷移させています。
- ActivityからFragment01を表示
- Fragment01からFragment02へ遷移: 0 (カウンター)
- Fragment02からFragment01へ遷移: 1
- Fragment01からFragment02へ遷移: 2
- …
- Fragment02からFragment01へ遷移: 10
BackStackを使って戻ります
- Fragment01からFragment02へ戻る: 9
- …
- Fragment01からFragment02へ戻る: 1
- Fragment02からFragment01へ戻る: 0
- Fragment01からActivityへ戻る
このような動きができるように設定してみましょう。
BackStack
前回はActivityからボタンタップでFragmentを表示させ、パラメータを渡しました。
今回は2つのFragmentを遷移させますが、基本的なところは同じです。
バックスタックを使って積み上げたスタックを戻る操作にはpopBackStack()を使います。
1 2 3 4 5 6 7 |
// BackStackに積む FragmentManager fragmentManager = getParentFragmentManager(); fragmentManager.addToBackStack(null) // 1つ前に戻る FragmentManager fragmentManager = getParentFragmentManager(); fragmentManager.popBackStack(); |
popBackStack には他にも使い方があります。
ところでpopという意味が?だったのですが
ハッカーの俗語として
データをスタック(stack)から取り出す、リストから削除する
などの意味があるそうです。
サンプルコード
ActivityからFragmentをトランザクションで起動させます。
MainActivity.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//package your.package.name; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (savedInstanceState == null) { FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); // BackStackを設定 fragmentTransaction.addToBackStack(null); // counterをパラメータとして設定 int count = 0; fragmentTransaction.replace(R.id.container, Fragment01.newInstance(count)); fragmentTransaction.commit(); } } } |
Activityから最初に起動するFragmentです。Activityからカウントするためのcounterを渡しています。
Fragment01.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
//package your.package.name; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction; import androidx.annotation.NonNull; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.TextView; public class Fragment01 extends Fragment { private int cnt = 0; static Fragment01 newInstance(int count){ // Fragemnt01 インスタンス生成 Fragment01 fragment01 = new Fragment01(); // Bundle にパラメータを設定 Bundle args = new Bundle(); args.putInt("Counter", count); fragment01.setArguments(args); return fragment01; } // FragmentのViewを生成して返す @Override public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment01, container, false); } @Override public void onViewCreated(@NonNull View view, Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); Bundle args = getArguments(); if(args != null ){ int count = args.getInt("Counter"); String str = "Fragment01: " + count; cnt = count +1; TextView textView = view.findViewById(R.id.textview_01); textView.setText(str); } Button button01 = view.findViewById(R.id.button_01); button01.setOnClickListener( v -> { FragmentManager fragmentManager = getParentFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); // BackStackを設定 fragmentTransaction.addToBackStack(null); fragmentTransaction.replace(R.id.container, Fragment02.newInstance(cnt)); fragmentTransaction.commit(); }); // BackStackで1つ戻す Button pop01 = view.findViewById(R.id.pop_01); pop01.setOnClickListener( v -> { FragmentManager fragmentManager = getParentFragmentManager(); fragmentManager.popBackStack(); }); } } |
Fragment01から遷移するFragment02です。
Fragment02.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
//package your.package.name; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction; import androidx.annotation.NonNull; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.TextView; public class Fragment02 extends Fragment { private int cnt = 0; static Fragment02 newInstance(int count){ // Fragemnt02 インスタンス生成 Fragment02 fragment02 = new Fragment02(); // Bundleにパラメータを設定 Bundle barg = new Bundle(); barg.putInt("Counter", count); fragment02.setArguments(barg); return fragment02; } // FragmentのViewを生成して返す @Override public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment02, container, false); } @Override public void onViewCreated(@NonNull View view, Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); Bundle args = getArguments(); if(args != null ){ int count = args.getInt("Counter"); String str = "Fragment02: " + String.valueOf(count); cnt = count +1; TextView textView = view.findViewById(R.id.textview_02); textView.setText(str); } Button button02 = view.findViewById(R.id.button_02); button02.setOnClickListener( v -> { FragmentManager fragmentManager = getParentFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); // BackStackを設定 fragmentTransaction.addToBackStack(null); fragmentTransaction.replace(R.id.container, Fragment01.newInstance(cnt)); fragmentTransaction.commit(); }); // BackStackで1つ戻す Button pop02 = view.findViewById(R.id.pop_02); pop02.setOnClickListener( v -> { FragmentManager fragmentManager = getParentFragmentManager(); fragmentManager.popBackStack(); }); } } |
Activityのレイアウトです。FrameLayoutのcontainerにFragmentを張り付けます。
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.fragment.app.FragmentContainerView android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Fragmentのレイアウト
fragment01.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#dfe" tools:context=".MainActivity"> <Button android:id="@+id/button_01" android:layout_width="178dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginTop="16dp" android:text="@string/button01" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textview_01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#00f" android:textSize="30sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/pop_01" android:layout_width="178dp" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" android:text="@string/pop01" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
fragment02.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#dfe" tools:context=".MainActivity"> <Button android:id="@+id/button_02" android:layout_width="178dp" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginTop="16dp" android:text="@string/button02" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textview_02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#f0f" android:textSize="30sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/pop_02" android:layout_width="178dp" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginEnd="16dp" android:text="@string/pop02" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
strngs.xml
1 2 3 4 5 6 7 |
<resources> <string name="app_name">YourAppName</string> <string name="button01">Button 01</string> <string name="pop01">Pop 01</string> <string name="button02">Button 02</string> <string name="pop02">Pop 02</string> </resources> |
関連ページ:
- Fragment をHello World から始める
- Fragment コードで記述する
- Activity と Fragment の画面遷移
- Fragment から別の Fragment に画面遷移させてみる
References:
androidx.fragment.app | Android Developers
FragmentTransaction
フラグメント | Android Developers