【Kotlin】RecyclerView+Fragmentで画面遷移を実装する際に気をつけるべき点

Kotlin+RecyclerView+FragmentでAndroid用アプリを開発している方向け。

どうやってrecyclerViewで画面遷移を実装すれば良いのか分からない人の役に立てば幸いです。

この記事は以下のような方を対象者としています。

Kotlinでアプリ開発を行なっている方
RecyclerViewとFragmentで一覧画面を作っている方
一覧画面->詳細画面の実装が分からない方向け

前置き: 僕のアプリ開発での副業について
#

これまで僕は合計30個ほど個人で作ったAndroidアプリをリリースしました。そのほとんどはツール系やゲーム系アプリです。 (開発言語はJava, C#です。)

これまで30個ほどアプリを開発しましたが、副収入としては合計で1,000円くらいしか年間利益が出ていません。

僕のアプリ開発の失敗談、なぜiOSアプリではなくAndroidアプリ開発がおすすめなのかについて

詳しくは別記事でも開設予定です。

画面遷移のロジックはどこで処理する？
#

RecyclerView+Fragmentで画面遷移を行う場合にはAdapterのonBindViewHolder内に画面遷移の処理を作る必要があります。

このonBindViewHolderはリストアイテムごとのデータ情報を保持する役割を持ちます。

そのためリストアイテムをクリックした際の挙動等もこのonBindViewHolder内で実装できます。

こちらがAdapter.ktのコード例です。

処理詳細についてはおって説明していきます。

class Adapter (var context: Context, var arrayList: ArrayList<DataList>) : RecyclerView.Adapter<Adapter.ItemHolder>() {

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemHolder {

        val itemHolder = LayoutInflater.from(parent.context).inflate(R.layout.list_item, parent, false)

        return ItemHolder(itemHolder)

    }

    override fun getItemCount(): Int {

        return arrayList.size

    }

 override fun onBindViewHolder(holder: ItemHolder, position: Int) {

        holder.itemView.setOnClickListener(object : View.OnClickListener {

            override fun onClick(v: View?) {

                val activity = v!!.context as AppCompatActivity

                val detail = Detail()

                //list->detailにactivity上に表示されているfragmentを切り替える
                activity.supportFragmentManager.beginTransaction().replace(R.id.container,detail).addToBackStack(null).commit()

            }

        })

    }
}

各アイテムリストのクリックを検知するならItemHolder.itemViewを使う
#

RecyclerViewはアイテム一覧画面を作るために使われます。

その際にリスト画面上のアイテムをクリックしたらアイテム詳細画面へ遷移する挙動を実装するためにはItemHolderを使います。

このItemHolder.itemViewにsetOnClickListenerを設定することでリスト画面上のアイテムをクリックした際の挙動を設定できます。

 override fun onBindViewHolder(holder: ItemHolder, position: Int) {

        holder.itemView.setOnClickListener(object : View.OnClickListener {

            override fun onClick(v: View?) {
                //ここにアイテムをクリックした際の挙動を記載
            }

        })
        

    }
}

Kotlin+RecyclerView+Fragmentで実装する際の注意点
#

KotlinでRecyclerViewとFragmentを使って画面遷移を実装する場合以下の2点に注意してください。

ポイント

画面遷移はActivityではなくAdapter上で行う
activity.supportFragmentManager.beginTransaction().replace()関数の引数に注意！

画面遷移はActivityではなくAdapter上で行う
#

FragmentはActivityの上で動作します。

Activityの上でListFragmentとDetailFragmentの表示を切り替えるイメージです。

Fragmentの切り替えを行うにはAdapter上で画面切り替えの処理を書く必要があります。

なぜならアイテムクリック検知がAdapter上でしかできないからです。

そのためAdapter.kt内でクリック検知->DetailFragmentへ画面遷移のロジックを実装する必要があります。

画面遷移を行うreplace()関数の引数に注意！
#

Fragmentで画面遷移を行う場合はactivityとDetailFragment（遷移先Fragment）をsetOnClickLister内で定義する必要があります。

そしてsupportFragmentManagerを使う必要があります。

まずは下記コードをご覧ください。

 override fun onBindViewHolder(holder: ItemHolder, position: Int) {

        holder.itemView.setOnClickListener(object : View.OnClickListener {

            override fun onClick(v: View?) {
                //ここにアイテムをクリックした際の挙動を記載
                // activityを取得
                val activity = v!!.context as AppCompatActivity

                // DetailFragmentを取得
                val detail = Detail()

                //list->detailにactivity上に表示されているfragmentを切り替える
                activity.supportFragmentManager.beginTransaction().replace(R.id.container,detail).addToBackStack(null).commit()
            }

        })
        

    }
}

画面遷移で使われるコードの解説
#

まずactivity上でfragmentは動作するため取得したactivityからsupportFragmentManagerにアクセスします。

次にfragment間での遷移処理を行うための関数beginTransaction()にアクセスします。

続いてreplace()関数は現在表示されているFragmentのxmlファイルを削除し、遷移先のFragmentを追加するという処理になります。

つまり、引数として渡す値は以下の通りでなければいけません。（ここめっちゃ重要です。）

                //list->detailにactivity上に表示されているfragmentを切り替える
                activity.supportFragmentManager.beginTransaction().replace(リスト画面のxmlのid,遷移先のFragment).addToBackStack(null).commit()

.addToBackStack(null)はandroid端末のバックボタンを押した際に前の画面に戻すために必要な処理です。

.commit()でfragment切り替えの処理を実行します。

ちなみにリスト画面のxmlのidとは以下のような感じです。

注意するのはreplace()関数の第一引数で渡すのはlayoutではなくidなところです。

<?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=".Detail"

    android:id="@+id/ここを任意のIDにする"

    android:padding="10dp"

    >


</androidx.constraintlayout.widget.ConstraintLayout>