KotlinでのFragment実装方法生成と切り替え

以前 JavaでのFragment生成方法の記事で、JavaでFragmentを生成するコードの説明をしました。

今回は Kotlin バージョンでFragmentの実装方法を説明します！

・ActivityからFragmentの生成
・FragmentからFragmentの切り替え

以上２点について、とてもシンプルなサンプルコードを使って解説していきます。

画面の生成、遷移以外の機能は最低限に絞っています。

大方理解できている方は必要なところだけかいつまんで見てください！

Contents

1.ActivityからFragmentの生成
2.FragmentからFragmentへの切り替え
3.KotlinでのFrgment実装ソースコード全容

1.ActivityからFragmentの生成

ActivityとFragment のレイアウトxmlファイルの準備

MainActivity.ktではFragment を生成するだけなので、

Fragment を画面いっぱいに表示するための枠だけRelativeLayoutにて用意しておきます。

MainActivity.ktのレイアウト activity_main.xml

<?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">

    <RelativeLayout
        android:id="@+id/fragment_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:orientation="horizontal">

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

一つ目のFragment、FirstFragmentでは、

「テキスト」と2つ目のFragmentに遷移するための「ボタン」だけを用意しておきます。

一つ目のFragment.ktのレイアウト first_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/first_fragment_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/armata"
        android:text="Welcome to First Fragment!"
        android:textColor="#001D74"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.495"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.425" />

    <Button
        android:id="@+id/to_second_fragment_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#00BCD4"
        android:fontFamily="@font/armata"
        android:text="To Second Fragment"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.512"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

ActivityとFragmentのKotlinファイルの準備

Fragment生成のロジックを担う、MainActivity.kt と

画面表示のロジックを担う、FirstFragment.ktのコードを記載します。

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val firstFragment = FirstFragment()
        val fragmentTransaction = supportFragmentManager.beginTransaction()
        fragmentTransaction.add(R.id.fragment_container, firstFragment)
        fragmentTransaction.commit()
    }
}

FirstFragment.kt

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.first_fragment, container, false)
    }
}

ActivityからFrgment生成コードの説明

MainActivity.kt より抜粋

val firstFragment = FirstFragment()
val fragmentTransaction = supportFragmentManager.beginTransaction()
fragmentTransaction.add(R.id.fragment_container, firstFragment)
fragmentTransaction.commit()

コンストラクタを宣言していないクラスでは、

何も引数をとらないデフォルトコンストラクタが生成されます。

new演算子は不要でFirstFragment()のようにデフォルトコンストラクタを呼ぶだけで、

インスタンスを生成することができるようになっています。

Fragmentを生成するためのFragmentTransactionの準備をして、

add()でフラグメントの追加、commit()で反映を行っています。

add()の第一引数には、Fragmentの表示を行う場所のid、第二引数は表示したいFragmentを指定します。

これにより、FirstFragment.javaのonCreateView()がスタートします。

FirstFragment.kt

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
   return 
}

ここら辺の構文は、onCreateViewを記載すると、

AndroidStudioの補完機能で勝手に記載してくれます。

return するものですが、inflateしたレイアウトを返しましょう。

return inflater.inflate(R.layout.first_fragment, container, false)

ちなみにinflateには膨らますという意味があります。

レイアウトを膨らませて使えるようにしているというイメージですね。

実行すると以下のような画面が表示されます。

2.FragmentからFragmentへの切り替え

2つ目のFragment のレイアウトxmlファイルの準備

二つ目のFragment、SecondFragmentでは、

「テキスト」「画像」と、

一つ目のFragmentに遷移するための「Backボタン」だけを用意しておきます。

2つ目のFragment.ktのレイアウト second_fragment.xml

<?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">


    <TextView
        android:id="@+id/textView"
        android:layout_width="340dp"
        android:layout_height="39dp"
        android:layout_centerInParent="true"
        android:fontFamily="@font/armata"
        android:text="Welcome to Second Fragment"
        android:textAlignment="center"
        android:textColor="#001D74"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.492"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.245" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="370dp"
        android:layout_marginTop="188dp"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/welcome_fragment"
        tools:layout_editor_absoluteX="0dp" />

    <Button
        android:id="@+id/back_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#00BCD4"
        android:text="Back"
        android:fontFamily="@font/armata"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.843"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

画面遷移のためにKotlinファイルの準備

画面表示のロジックを担う、SecondFragment.ktのコードを記載します。

SecondFragment.kt

class SecondFragment : Fragment() {

    companion object {
        private const val TAG = "SecondFragment"
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.second_fragment, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val backButton = view.findViewById<Button>(R.id.back_button)
        backButton.setOnClickListener{
            Log.d(TAG, "BackButton pressed!")
            fragmentManager?.popBackStack()
        }
    }
}

一つ目のFragmentの「toSecondButton」ボタンが押下された時に2つ目のFragmentに遷移したいため、

FirstFragment.ktファイルにボタンが押下されたときの処理を追記します。

class FirstFragment : Fragment() {

    companion object {
        private const val TAG = "FirstFragment"
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.first_fragment, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val toSecondButton = view.findViewById<Button>(R.id.to_second_fragment_button)
        toSecondButton.setOnClickListener{
            Log.d(TAG, "toSecondButton pressed!")
            val secondFragment = SecondFragment()
            val fragmentTransaction = fragmentManager?.beginTransaction()
            fragmentTransaction?.addToBackStack(null)
            fragmentTransaction?.replace(R.id.fragment_container, secondFragment)
            fragmentTransaction?.commit()
        }
    }
}

FragmentからFrgmentへ画面切り替えコードの説明

FirstFragment.javaより抜粋

val toSecondButton = view.findViewById<Button>(R.id.to_second_fragment_button)
toSecondButton.setOnClickListener{
    Log.d(TAG, "toSecondButton pressed!")
    val secondFragment = SecondFragment()
    val fragmentTransaction = fragmentManager?.beginTransaction()
    fragmentTransaction?.addToBackStack(null)
    fragmentTransaction?.replace(R.id.fragment_container, secondFragment)
    fragmentTransaction?.commit()
}

KotlinでのButtonとxmlのレイアウトをリンクさせ、

ボタンが押下された時の処理を書いています。

レイアウトに関する初期設定はonViewCreated()内で記載するのが一般的です。

ボタン押下処理については「KotlinでのonClick()実装方法」で説明しています。

ボタン押下を検知して、二つの目のFragmentであるSecondFragmentを生成しています。

fragmentTransaction?.addToBackStack(null)

今表示しているFragment(今回の例だとFirstFragment)を、Fragmentスタックに追加します。

遷移先のFragmentでBackボタンが押下された時に表示したい場合に使います。

引数には、表示したいFragmentが複数ない場合はnullを指定します。

fragmentTransaction?.replace(R.id.fragment_container, secondFragment)

add()は追加でしたが、replace()は

今あるFragmentを取り除いて、引数内のFragmentを新たに追加する

といった意味があります。

SecondFragment.kt より抜粋

val backButton = view.findViewById<Button>(R.id.back_button)
backButton.setOnClickListener{
    Log.d(TAG, "BackButton pressed!")
    fragmentManager?.popBackStack()
}

SecondFragmentでは、Backボタンが押下された時にFragmentを非表示にする処理を実装しています。

fragmentManager?.popBackStack()

Fragmentスタックから現在表示しているFragmentを取り除くことになり、画面遷移が実現します。

Activityのfinish()処理と同じです。

実行すると以下のようになります。

?. と !!. の意味(Null Safety)

fragmentTransactionの後ろに ?. がついていますが、これはfragmentTransactionがnullだったときに、

NullPointerException が発生してしまうことを防ぐために必要となります。

もし ?. をつけないと、

only safe (?.) or non-null asserted (!!.) calls are allowed on a nullable receiver of type FragmentTransaction

というコンパイルエラーが発生して、そもそもアプリを立ち上げることもできません。

エラー文に記載されているように、?. ではなく !!. をつけることでコンパイルエラーを防ぐこともできます。

ただ !!. の使用には注意が必要です。

?.
fragmentTransactionがnullだった際に処理を行わない。
→NullPointerExceptionは発生せず、アプリはクラッシュしない。

!!.
fragmentTransactionがnullだった際でも処理を続行する。
→NullPointerExceptionが発生し、アプリがクラッシュする。

?. と !!. 両者には上記のような違いがあります。

3.KotlinでのFrgment実装ソースコード全容

以上がKotlinでのFragment実装方法でした。

?. やインスタンスの生成でKotlin特有の記載方法はありましたが、

実装の流れは基本的にJavaと変わりません。

最後にサンプルアプリのソースコードを全て記載しておきます。

参考になれば幸いです！

ご精読ありがとうございました！！

activity_main.xml

<?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">

    <RelativeLayout
        android:id="@+id/fragment_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:orientation="horizontal">

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

first_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/first_fragment_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/armata"
        android:text="Welcome to First Fragment!"
        android:textColor="#001D74"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.495"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.425" />

    <Button
        android:id="@+id/to_second_fragment_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#00BCD4"
        android:fontFamily="@font/armata"
        android:text="To Second Fragment"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.512"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

second_fragment.xml

<?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">


    <TextView
        android:id="@+id/textView"
        android:layout_width="340dp"
        android:layout_height="39dp"
        android:layout_centerInParent="true"
        android:fontFamily="@font/armata"
        android:text="Welcome to Second Fragment"
        android:textAlignment="center"
        android:textColor="#001D74"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.492"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.245" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="370dp"
        android:layout_marginTop="188dp"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/welcome_fragment"
        tools:layout_editor_absoluteX="0dp" />

    <Button
        android:id="@+id/back_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#00BCD4"
        android:text="Back"
        android:fontFamily="@font/armata"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.843"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val firstFragment = FirstFragment()
        val fragmentTransaction = supportFragmentManager.beginTransaction()
        fragmentTransaction.add(R.id.fragment_container, firstFragment)
        fragmentTransaction.commit()
    }
}

FirstFragment.kt

import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import androidx.fragment.app.Fragment

class FirstFragment : Fragment() {

    companion object {
        private const val TAG = "FirstFragment"
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.first_fragment, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val toSecondButton = view.findViewById<Button>(R.id.to_second_fragment_button)
        toSecondButton.setOnClickListener{
            Log.d(TAG, "toSecondButton pressed!")
            val secondFragment = SecondFragment()
            val fragmentTransaction = fragmentManager?.beginTransaction()
            fragmentTransaction?.addToBackStack(null)
            fragmentTransaction?.replace(R.id.fragment_container, secondFragment)
            fragmentTransaction?.commit()
        }
    }
}

SecondFragment.kt

class SecondFragment : Fragment() {

    companion object {
        private const val TAG = "SecondFragment"
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.second_fragment, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val backButton = view.findViewById<Button>(R.id.back_button)
        backButton.setOnClickListener{
            Log.d(TAG, "BackButton pressed!")
            fragmentManager?.popBackStack()
        }
    }
}

KotlinでのFragment実装方法生成と切り替え

1.ActivityからFragmentの生成

ActivityとFragment のレイアウトxmlファイルの準備

ActivityとFragmentのKotlinファイルの準備

ActivityからFrgment生成コードの説明

2.FragmentからFragmentへの切り替え

2つ目のFragment のレイアウトxmlファイルの準備

画面遷移のためにKotlinファイルの準備

FragmentからFrgmentへ画面切り替えコードの説明

?. と !!. の意味(Null Safety)

3.KotlinでのFrgment実装ソースコード全容