KotlinでAndroidのRecyclerViewに無限スクロール（エンドレスリスト）を実装する方法

この記事では、Kotlinを使用してAndroidアプリのRecyclerViewに無限スクロール（エンドレスリスト）を実装する方法を、ステップごとにわかりやすく解説します。リストの末尾に到達すると自動的に次のデータを読み込む、いわゆる「無限スクロール」は、SNSやニュースアプリなど多くのアプリで採用されている重要なUIパターンです。

実装の全体像

今回の実装では、以下の要素を組み合わせます。

• RecyclerViewとLinearLayoutManagerによるリスト表示
• スクロールリスナーによるリスト末尾の検知
• 読み込み中を示すProgressBar付きのフッター項目
• Handlerを使ったデータ追加の遅延処理（サーバー通信を想定）

ステップ1：新規プロジェクトの作成

Android Studioを開き、File → New Projectを選択して、必要な情報を入力し、新しいプロジェクトを作成します。テンプレートには「Empty Activity」を選択しておきましょう。

ステップ2：activity_main.xmlの編集

res/layout/activity_main.xmlに、RecyclerViewを配置するため以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
   xmlns:android="https://schemas.android.com/apk/res/android"
   android:id="@+id/recyclerView"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

ステップ3：MainActivity.ktの実装

src/MainActivity.ktに以下のコードを記述します。ここでは、初期データ10件を生成し、スクロールがリストの最下部に達したタイミングでloadMore()メソッドを呼び出して追加データを読み込みます。

import android.os.Bundle
import android.os.Handler
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
class MainActivity : AppCompatActivity() {
   lateinit var recyclerView: RecyclerView
   lateinit var recyclerViewAdapter: RecyclerViewAdapter
   var rowsArrayList: ArrayList<String> = ArrayList()
   var isLoading = false
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      title = "KotlinApp"
      recyclerView = findViewById(R.id.recyclerView)
      populateData()
      initAdapter()
      initScrollListener()
   }
   private fun initScrollListener() {
      recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
         override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)
            val linearLayoutManager = recyclerView.layoutManager as LinearLayoutManager?
            if (!isLoading) {
               if (linearLayoutManager != null && linearLayoutManager.findLastCompletelyVisibleItemPosition() ==
               rowsArrayList.size - 1) {
                  //bottom of list!
                  loadMore()
                  isLoading = true
               }
            }
         }
      })
   }
   private fun initAdapter() {
      recyclerViewAdapter = RecyclerViewAdapter(rowsArrayList)
      recyclerView.layoutManager = LinearLayoutManager(applicationContext)
      recyclerView.adapter = recyclerViewAdapter
   }
   private fun populateData() {
      for (i in 0..9) {
         rowsArrayList.add("Number $i")
      }
   }
   private fun loadMore() {
      rowsArrayList.add(null.toString())
      recyclerViewAdapter.notifyItemInserted(rowsArrayList.size - 1)
      val handler = Handler()
      handler.postDelayed(Runnable {
         rowsArrayList.removeAt(rowsArrayList.size - 1)
         val scrollPosition = rowsArrayList.size
         recyclerViewAdapter.notifyItemRemoved(scrollPosition)
         var currentSize = scrollPosition
         val nextLimit = currentSize + 10
         while (currentSize - 1 < nextLimit) {
            rowsArrayList.add("Number $currentSize")
            currentSize++
         }
         recyclerViewAdapter.notifyDataSetChanged()
         isLoading = false
      }, 2000)
   }
}

ポイントはisLoadingフラグです。これにより、読み込み中に何度もloadMore()が呼ばれることを防ぎます。また、HandlerのpostDelayed()で2秒の遅延を設けることで、実際のネットワーク通信を模擬しています。

ステップ4：RecyclerViewAdapter.ktの作成

新しいクラスファイル「RecyclerViewAdapter.kt」を作成し、以下のコードを追加します。このアダプターは、通常のデータ行と読み込み中表示（ローディング行）の2種類のビューを扱います。

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ProgressBar
import android.widget.TextView
import androidx.annotation.NonNull
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.ViewHolder
class RecyclerViewAdapter internal constructor(private val itemList: List<String>) :
RecyclerView.Adapter<ViewHolder>() {
   private val viewItemType = 0
   @NonNull
   override fun onCreateViewHolder(
   @NonNull parent: ViewGroup,
   viewType: Int
   ): ViewHolder {
      return if (viewType == viewItemType) {
         val view =
         LayoutInflater.from(parent.context).inflate(R.layout.item_row, parent, false)
         ItemViewHolder(view)
      } else {
         val view = LayoutInflater.from(parent.context)
         .inflate(R.layout.item_loading, parent, false)
         LoadingViewHolder(view)
      }
   }
   override fun onBindViewHolder(@NonNull viewHolder: ViewHolder, position: Int) {
      if (viewHolder is ItemViewHolder) {
         populateItemRows(viewHolder, position)
      } else if (viewHolder is LoadingViewHolder) {
         showLoadingView(viewHolder, position)
      }
   }
   override fun getItemViewType(position: Int): Int {
      return viewItemType
   }
   private inner class ItemViewHolder internal constructor(@NonNull itemView: View) :
   ViewHolder(itemView) {
      internal var tvItem: TextView = itemView.findViewById(R.id.textViewItem)
   }
   private class LoadingViewHolder internal constructor(itemView: View) :
   ViewHolder(itemView) {
      var progressBar: ProgressBar = itemView.findViewById(R.id.progressBar)
   }
   override fun getItemCount(): Int {
      return itemList.size
   }
   private fun showLoadingView(viewHolder: LoadingViewHolder, position: Int) {}
   private fun populateItemRows(viewHolder: ItemViewHolder, position: Int) {
      val item = itemList[position]
      viewHolder.tvItem.text = item
   }
}

ステップ5：item_row.xmlの作成

レイアウトリソースファイル「item_row.xml」を作成し、リストの各行のデザインを定義します。ここではCardViewの中にTextViewを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:app="https://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardElevation="2dp"
   app:cardUseCompatPadding="true">
   <TextView
      android:id="@+id/textViewItem"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="16dp"
      android:textColor="@android:color/holo_blue_bright"
      android:textStyle="bold" />
</androidx.cardview.widget.CardView>

ステップ6：item_loading.xmlの作成

同様に、レイアウトリソースファイル「item_loading.xml」を作成します。このレイアウトは、データ読み込み中にリストの末尾に表示されるProgressBarを定義したものです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
   <ProgressBar
      android:id="@+id/progressBar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:indeterminate="true"
      android:paddingLeft="8dp"
      android:paddingRight="8dp" />
</LinearLayout>

ステップ7：AndroidManifest.xmlの確認

androidManifest.xmlに以下のコードが正しく記述されていることを確認してください。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11">
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>
</manifest>

アプリの実行と動作確認

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続している前提で説明します。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーのRun（実行）アイコンをクリックします。デバイス選択画面で接続したスマートフォンを選択すると、端末にアプリがインストールされ、起動します。

アプリが起動したら、リストを下方向へスクロールしてみてください。リストの最下部に達するとProgressBarが一瞬表示され、その後新しい項目が10件ずつ自動的に追加されていくのが確認できます。これが無限スクロールの基本的な動作です。

まとめ

本記事では、KotlinとRecyclerViewを組み合わせて無限スクロールを実装する方法を紹介しました。実装の鍵となるのは以下の3点です。

• OnScrollListenerでリスト末尾への到達を検知する
• isLoadingフラグで重複読み込みを防止する
• 複数のViewTypeを使って、データ行とローディング表示を切り替える

実際のアプリ開発では、Handlerによる遅延処理の部分をRetrofitやOkHttpなどを使ったAPI通信に置き換えることで、サーバーからページング形式でデータを取得する実装に発展できます。ぜひ本記事のコードをベースに、自分のプロジェクトに応用してみてください。