Android
 Computer >> コンピューター >  >> プログラミング >> Android

【Android】RecyclerViewで無限スクロール（無限リスト）を実装する方法を徹底解説

はじめに

本記事では、AndroidアプリでRecyclerViewを使って無限リスト（エンドレススクロール）を実装する方法を、サンプルコード付きでステップごとに解説します。リストの最下部までスクロールすると自動的に次のデータが読み込まれるこの仕組みは、SNSやニュース系アプリなどで広く採用されている定番のUIパターンです。

今回実装する主な要素は以下のとおりです。

  • スクロール位置の検出による追加データ読み込みのトリガー処理
  • 読み込み中に表示するプログレスバー（LoadingViewHolder）
  • 複数のViewTypeを持つRecyclerView.Adapterの実装

手順1：プロジェクトの作成と依存関係の追加

まず、Android Studioで新規プロジェクトを作成します。メニューから「File → New Project」を選択し、必要な項目を入力してプロジェクトを生成してください。

続いて、build.gradle（Module: app）に以下の依存関係を追加します。

implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'

手順2：activity_main.xml の編集

res/layout/activity_main.xml に以下のコードを記述します。RecyclerViewを1つ配置したシンプルな構成です。

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

手順3：MainActivity.java の実装

src/MainActivity.java に以下のコードを追加します。ポイントは initScrollListener() メソッドです。RecyclerViewにスクロールリスナーを登録し、最後のアイテムが完全に表示されたタイミングで loadMore() を呼び出して追加データを読み込みます。

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.os.Handler;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    RecyclerViewAdapter recyclerViewAdapter;
    ArrayList<String>rowsArrayList = new ArrayList<>();
    boolean isLoading = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = findViewById(R.id.recyclerView);
        populateData();
        initAdapter();
        initScrollListener();
    }
    private void populateData() {
        for (int i = 0; i < 10; i++) {
            rowsArrayList.add("Number " + i);
        }
    }
    private void initAdapter() {
        recyclerViewAdapter = new RecyclerViewAdapter(rowsArrayList);
        recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
        recyclerView.setAdapter(recyclerViewAdapter);
    }
    private void initScrollListener() {
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }
            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                LinearLayoutManager linearLayoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
                if (!isLoading) {
                    if (linearLayoutManager != null && linearLayoutManager.findLastCompletelyVisibleItemPosition() == rowsArrayList.size() - 1) {
                        //bottom of list!
                        loadMore();
                        isLoading = true;
                    }
                }
            }
        });
    }
    private void loadMore() {
        rowsArrayList.add(null);
        recyclerViewAdapter.notifyItemInserted(rowsArrayList.size() - 1);
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                rowsArrayList.remove(rowsArrayList.size() - 1);
                int scrollPosition = rowsArrayList.size();
                recyclerViewAdapter.notifyItemRemoved(scrollPosition);
                int currentSize = scrollPosition;
                int nextLimit = currentSize + 10;
                while (currentSize - 1 < nextLimit) {
                    rowsArrayList.add("Number " + currentSize);
                    currentSize++;
                }
                recyclerViewAdapter.notifyDataSetChanged();
                isLoading = false;
            }
        }, 2000);
    }
}

手順4：RecyclerViewAdapter の作成

新しいJavaクラス（RecyclerViewAdapter.java）を作成し、以下のコードを記述します。このアダプターでは getItemViewType() をオーバーライドし、リストの要素がnullの場合は「ローディング中」のViewTypeを、それ以外の場合は通常アイテムのViewTypeを返すことで、読み込み中表示とデータ行を切り替えています。

package app.com.sample;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ProgressBar;
import android.widget.TextView;
import java.util.List;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
public class RecyclerViewAdapter extends
RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final int VIEW_TYPE_ITEM = 0;
    private List<String> mItemList;
    RecyclerViewAdapter(List<String> itemList) {
        mItemList = itemList;
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if (viewType == VIEW_TYPE_ITEM) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row, parent, false);
            return new ItemViewHolder(view);
        } else {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_loading, parent, false);
            return new LoadingViewHolder(view);
        }
    }
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
        if (viewHolder instanceof ItemViewHolder) {
            populateItemRows((ItemViewHolder) viewHolder, position);
        }
        else if (viewHolder instanceof LoadingViewHolder) {
            showLoadingView((LoadingViewHolder) viewHolder, position);
        }
    }
    @Override
    public int getItemCount() {
        return mItemList == null ? 0 : mItemList.size();
    }
    @Override
    public int getItemViewType(int position) {
        int VIEW_TYPE_LOADING = 1;
        return mItemList.get(position) == null ? VIEW_TYPE_LOADING :
        VIEW_TYPE_ITEM;
    }
    private class ItemViewHolder extends RecyclerView.ViewHolder {
        TextView tvItem;
        ItemViewHolder(@NonNull View itemView) {
            super(itemView);
            tvItem = itemView.findViewById(R.id.textViewItem);
        }
    }
    private class LoadingViewHolder extends RecyclerView.ViewHolder {
        ProgressBar progressBar;
        LoadingViewHolder(@NonNull View itemView) {
            super(itemView);
            progressBar = itemView.findViewById(R.id.progressBar);
        }
    }
    private void showLoadingView(LoadingViewHolder viewHolder, int position) {
    }
    private void populateItemRows(ItemViewHolder viewHolder, int position) {
        String item = mItemList.get(position);
        viewHolder.tvItem.setText(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" />
</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="app.com.sample">
    <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」アイコンをクリックします。接続済みのモバイルデバイスを選択して実行すると、端末に以下のような初期画面が表示されます。

【Android】RecyclerViewで無限スクロール（無限リスト）を実装する方法を徹底解説

動作の仕組みまとめ

今回の無限スクロール実装の流れを整理すると、以下のようになります。

  1. ユーザーがリストをスクロールすると、onScrolled() 内で最後のアイテムが完全に表示されたかどうかを判定
  2. loadMore() が呼ばれ、リスト末尾にnull（ローディング用プレースホルダー）を追加してプログレスバーを表示
  3. Handler.postDelayed() により2秒待機した後、ダミーデータ10件を追加してローディング表示を除去
  4. isLoading フラグによって、読み込み中の重複呼び出しを防止

この仕組みを応用すれば、Handlerによるダミー処理の部分をAPIからのページング取得に置き換えるだけで、実際のデータを使った無限スクロールも簡単に実現できます。

  1. AndroidでSearchViewを使ってRecyclerViewをフィルタリングする方法を解説

    この記事では、AndroidアプリにおいてSearchViewを使用してRecyclerViewの表示内容をリアルタイムに絞り込む（フィルタリングする）方法を、実際のコード例とともに段階的に解説します。全体の流れ実装のポイントは以下の通りです。RecyclerViewに表示するデータリストを準備するアダプターにFilterableインターフェースを実装するメニューに配置したSearchViewの入力イベントを受け取り、フィルターを呼び出すステップ1：新規プロジェクトの作成まず、Android Studioで新しいプロジェクトを作成します。「File」→「New Project」を選択し、必要な

  2. 【Android】データベースとRecyclerViewを連携させる方法を実装例つきで解説

    この記事では、AndroidアプリでRecyclerViewとデータベース（SQLite）を連携させて使用する方法を、実際のサンプルコードとともに解説します。連絡先の登録・表示・編集・削除ができるシンプルなアプリを題材に、実装手順をステップごとに見ていきましょう。ステップ1：プロジェクトの作成と依存関係の追加まず、Android Studioで新しいプロジェクトを作成します。メニューから「File → New Project」を選択し、必要事項を入力してプロジェクトを作成してください。続いて、build.gradle（Module: app）に以下の依存関係を追加します。implementat