はじめに

こんにちは、エンジニアのkeitaMaxです。

今回は前回作成したFragmentをもう一つ作成して、Fragment間の遷移(切り替え)をやろうと思います。

前回の記事

実装方法

MainActivityにフラグメントを切り替える関数を作成し、それを各フラグメントから呼んで、画面遷移(切り替え)をおこなようと思います。

Fragment作成

Fragmentをもう一つ作成しました。名前をExampleTwoFragmentとしました。

ExampleTwoFragment


class ExampleTwoFragment : Fragment() {

    private var _binding: FragmentExampleTwoBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleTwoBinding.inflate(inflater, container, false)
        return binding.root
    }
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

    }
    override fun onResume() {
        super.onResume()
    }

    override fun onPause() {
        super.onPause()
    }

    override fun onDestroy() {
        super.onDestroy()
    }

fragment_example_two

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    tools:context=".ExampleTwoFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@color/white"
        android:text="フラグメント2" />

</FrameLayout>

Fragmentの置き換え処理の作成

MainActivityにreplaceFragmentという関数を用意しました。

MainActivity

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        if (savedInstanceState == null) {
            supportFragmentManager.commit {
                setReorderingAllowed(true)
                add(binding.fragmentContainerView.id, ExampleFragment())
            }
        }
    }
    public fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.commit {
            setReorderingAllowed(true)
            replace(binding.fragmentContainerView.id,fragment)
        }
    }
}

replaceFragmentの引数に次に表示したいフラグメントをいれて呼び出すように作成しました。

Fragment側の修正

ExampleFragmentからボタンが押された時にreplaceFragmentを呼び出すような処理を書いていきます。

ExampleFragment

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        activity = context as? MainActivity
        binding.button.setOnClickListener{
            activity?.replaceFragment(ExampleTwoFragment())
        }
    }

onViewCreatedを上のように修正しました。

実際に遷移するか試す

実際に起動して確かめてみます。

初期画面は以下になります。

ここから、下のフラグメント２へとかかれているボタンを押します。

すると上のように遷移することができました。

おまけ　バックボタンについて

このままだと、フラグメント２の状態でバックボタンを押すとアプリが終了してしまいます。

これをバックボタンを押した時に一つ目の画面に戻れるようにするには、以下のようにaddToBackStackを追加する必要があります。

MainActivity

    public fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.commit {
            setReorderingAllowed(true)
            replace(binding.fragmentContainerView.id, fragment)
            addToBackStack("name") // 追加
        }
    }

これをすると、ボックボタンを押したら一つ前に表示されていたフラグメントの画面を表示することができます。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考

次の記事