フラグメントをスワイプで切り替え
〜 Android Studio の使い方 13 〜
2023-07-11 作成 福島
TOP > androidstudio > pageslide

使用ツール

    Android Studio Flamingo | 2022.2.1 Patch 2  

1. 通常のプロジェクトを作成する。

ここではスワイプ (画面をなぞる) で画面を切り替えるので、画面の存在するプロジェクトを作成する。
「Empty Activity」「Empty Views Activity」等のプロジェクトが対象。
「No Activity」でも構わないが、Default Activity の追加が必要になるので、ここでは割愛する。(選択しない)

2. 画面を用意

2-1. メイン画面 (activity_main.xml) を変更する。
2-1-1. デフォルトで作成される TextView ("Hello World!") を削除する。

2-1-2. ViewPager2 を設置する。
デザイン画面で Palette - Containers から ViewPager2 を activity_main にドラッグする。

項目内容備考
idViewPager2プログラムから R.id.ViewPager2 として参照される。
layout_widthmatch_parent画面いっぱいに広げる。
(分かってる人は広げなくてもいい)
layout_heightmatch_parent
2-2. Fragment を作成する。
サンプルとして、同じものを 3 つ作成する。(3 ペア = 6 ファイル)

2-2-1. Fragment (ソース、レイアウトのペア) を作成する。
2-2-1-1. Fragment_0.java を作成する。
MainActivity.java を右クリックし New - Fragment - Fragment (Blank) を選択する。

項目内容備考
Fragment NameFragment_0Fragment_0 ～ 2 とする。
Fragment Layout Namefragment_0自動入力されるので記入しない。
Source Languageデフォルトのままとする。
2-2-1-2. fragment_0.xml を確認する。
上記 2-2-1-1 の作業により、自動的にフラグメント画面が作成されるので、これを確認する。
パスレイアウトファイル備考
app > res > layout >fragment_0.xmlfragment_0 ～ 2.xml となる。
2-2-2. 上記 2-2-1 を繰り返して 3 つのペア (ファイル数は 6) を作成する。
Java ソースファイル名レイアウトファイル名 (自動生成)
Fragment_0.javafragment_0.xml
Fragment_1.javafragment_1.xml
Fragment_2.javafragment_2.xml
2-3. Fragment 画面のテキストの ID 付与とテキストの書き換え。
上記 2-2 で作成したレイアウトファイルを編集し、自動的に作成された TextView へ ID 付与との表示文字列の変更を行う。
パスレイアウトファイルIDTextView の内容備考
app > res > layout >fragment_0.xmltvFragment0Fragment 0ID はプログラムから R.id.tvFragmentN として参照される。
内容については、画面が判別できる文字列なら何を設定しても良い。
(下記 5 を実施するなら内容を変更しなくても良い)
fragment_1.xmltvFragment1Fragment 1
fragment_2.xmltvFragment2Fragment 2

3. フラグメントのアダプタを作成

FragmentStateAdapter の派生クラスを作成する。

3-1. ソースファイルを作成する。
MainActivity.java を右クリックし、New - Java Class を選択する。
項目内容備考
NameFragmentSlideAdapterFragmentSlideAdapter.java (下記 3-2 の枠組みだけ) が生成される。
3-2. ソースファイルを編集する。
FragmentSlideAdapter.java
public class FragmentSlideAdapter {
}

  ↓↓ 大量に行を追加 ↓↓

public class FragmentSlideAdapter extends FragmentStateAdapter {

    private static final int FRAGMENT_MAX = 3;

    private final Fragment[] fragments;
    private final String[]   messages;

    public FragmentSlideAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);

        fragments = new Fragment[]{
                new Fragment_0(),
                new Fragment_1(),
                new Fragment_2(),
        };

        messages = new String[]{    // Fragment_0～2 へ渡すデータ
                null,
                null,
                null,
        };
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {

        if(position == 0) {
            // Fragment_0 へ文字列を渡す
            // キー "param1" は Fragment_0.java で定義された ARG_PARAM1 の値を使っている
            Bundle bundle = new Bundle();
            bundle.putString("param1", messages[0]);
            fragments[position].setArguments(bundle);
        }

        return fragments[position];
    }

    @Override
    public int getItemCount() { return FRAGMENT_MAX; }

    // MainActivity から文字列を受け取る
    public void setString(int position, String string) {
        messages[position] = string;
    }
}

4. MainActivity.java を編集

MainActivity.java
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        // FragmentSlideAdapter を確保
        FragmentSlideAdapter fragmentSlideAdapter;
        fragmentSlideAdapter = new FragmentSlideAdapter(this);

        // MainActivity の ViewPager2 に fragmentSlideAdapter を割り当てる
        ViewPager2 viewPager2 = findViewById(R.id.ViewPager2);
        viewPager2.setAdapter(fragmentSlideAdapter);

        // fragmentSlideAdapter を経由して Fragment_0 へ文字列を渡す
        fragmentSlideAdapter.setString(0, "Hello Fragment 0");



        // フラグメントの再構築はこちら*1 (FragmentSlideAdapter のインスタンスを開放して再登録)
        viewPager2.setAdapter(null);
        fragmentSlideAdapter = new FragmentSlideAdapter(this);
        viewPager2.setAdapter(fragmentSlideAdapter);
        fragmentSlideAdapter.setString(0, "Hello Fragment 0");


    }
}
*1フラグメントの内容を一度に入れ替えるときに使う。

5. Fragment の部品を操作

5-1. Fragment_0.java を編集する。
フラグメントのソースファイルにメソッド onStart() または onResume() を追加する。
また、追加したメソッドから部品を操作できるよう、onCreateView() に細工を施す。
(onCreateView() を修正したくない場合は onStart() の中で getView() を呼び出しても良い)

Fragment_0.java
public class Fragment_0 extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    public Fragment_0() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment Fragment_0.
     */
    // TODO: Rename and change types and number of parameters
    public static Fragment_0 newInstance(String param1, String param2) {
        Fragment_0 fragment = new Fragment_0();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment


        view = inflater.inflate(R.layout.fragment_0, container, false);
        return view;


    }


    View view;

    @Override
    public void onStart() {     // onResume() でも可

        super.onStart();

        if(mParam1 != null) {
            // FragmentSlideAdapter から受け取った文字列を表示する
            // view の代わりに getView() でも可
            TextView tvFragment0 = view.findViewById(R.id.tvFragment0);
            tvFragment0.setText(mParam1);
        }
    }


}
public static final String ARG_PARAM1 = "param1";
に変更すると便利なんだけど、説明の趣旨から外れるので今回はやっていません。
5-2. Fragment_1～2 を編集する。
必要であれば、上記 5-1 と同様に、
  • Fragment_1.java (2 ページ目)
  • Fragment_2.java (3 ページ目)
    • も編集する。