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

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

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

本記事の対象者

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

目次

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

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

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

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

詳しくは下記の記事で解説しているのでそちらをご覧いただけますと幸いです。😅

【アプリ開発】個人開発での副業は98%が失敗する件

アプリ開発を副業にしようと考えている人向け。 なぜ失敗する可能性が高いのか、どうすれば成功できるのかについて本記事で解説します。

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

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

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

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

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

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

Adapter.kt
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
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を設定することでリスト画面上のアイテムをクリックした際の挙動を設定できます。

Adapter.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
 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を使う必要があります。

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

Adapter.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 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を追加するという処理になります。

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

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

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

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

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

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

fragment_list.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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>
        

さいごに

ここまでお読みいただきありがとうございました。

僕はreplace()関数の引数で詰まって2日ほど時間をかけてしまったので、この記事が世界のどなたかの役に立てば嬉しいです。

僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」どのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃

【コピペOK】HUGOでアフィリエイト用ブログサイトを作ろう

手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。

ある程度自由にカスタマイズできる、かつコマンド一つで 記事の自動生成ができる静的サイトジェネレータ「HUGO」についてまとめました。

また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます

以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌

速習!おすすめプログラミング勉強法【Udemy】

いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。

Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。

ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました

Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくてムーンウォークしながら寝落ちします💃

関連記事

【Udemy】未経験から始める格安プログラミング講座4選

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。

【Udemy】未経験から現場で活躍できるエンジニアになるための実践プログラミング講座5選

プログラミング未経験だけどエンジニアになりたい方向けで記事を書きました。 実際にUdemyを受講してエンジニアになった経験から、実務で必要とされる知識を学べるUdemyのおすすめ講座をこちらの記事でご紹介できれはと思います。 中には無料で受けられる講座もあるので、興味のある方必見です😄

【無料で学べる】Udemyのおすすめフロントエンド講座4選

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。