AndroidのRecyclerViewによる「読み込みさらに表示」「無限スクロール」
このチュートリアルでは、AndroidアプリケーションのRecyclerViewにおいて、エンドレススクロールまたは無限スクロールを実装していきます。次のセットの行がDB/サーバーから取得され、ローディングアイコンが表示される間に、無限スクロールはFacebookやTwitterなどの多くのアプリケーションでよく見られます。先に進む前に、このチュートリアルを参照することをおすすめします。
AndroidのRecyclerViewで、さらに読み込む
次のアイテムセットが取得される間、RecyclerViewの下部にローディングアイコンを表示するために、RecyclerViewアダプターで複数のビュータイプを使用する必要があります。これはどのように実装されますか？通常、シンプルなRecyclerViewでは、データ構造からアダプターに要素をロードします。RecyclerViewの下部にローディングアイコンビューを表示するためには、最初にデータ構造の末尾にNULL要素を追加する必要があります。なぜNULLを使うのでしょうか？その要素を他の要素と異なるものとして区別し、異なるビュータイプの行を表示するためです。NULLを追加した後、アダプターに新しい要素を通知し、次の要素セットを取得します。次の要素セットが取得されたら、NULL要素を削除し、次のセットをデータ構造の下部に追加します。以下の図は、RecyclerViewとそのアダプターで実際に起こることを示しています。
RecyclerViewの末尾までスクロールしたことを検出するためには、RecyclerViewにOnScrollListener()を実装する必要があります。
十分な話し合いです。腕を振ります。次のセクションでは、RecyclerViewでEndless Scrollingをデモンストレーションします。文字列のリストを作成し、ハンドラを使用して一定の遅延後に次のリストを読み込みます。
プロジェクトの構造
コード
以下に、activity_main.xmlレイアウトのコードが記載されています。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
以下のように、RecyclerViewの行のレイアウトはitem_row.xmlファイルで定義されています。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.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="8dp"
app:cardUseCompatPadding="true">
<TextView
android:id="@+id/tvItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Item X" />
</android.support.v7.widget.CardView>
ローディングビューのレイアウトは、以下に示すitem_loading.xmlファイルに定義されています。
<?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="wrap_content"
android:layout_margin="8dp"
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>
以下にRecyclerViewAdapter.javaクラスのコードが示されています。
package com.scdev.androidrecyclerviewloadmore;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ProgressBar;
import android.widget.TextView;
import java.util.List;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private final int VIEW_TYPE_ITEM = 0;
private final int VIEW_TYPE_LOADING = 1;
public List<String> mItemList;
public 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();
}
/**
* The following method decides the type of ViewHolder to display in the RecyclerView
*
* @param position
* @return
*/
@Override
public int getItemViewType(int position) {
return mItemList.get(position) == null ? VIEW_TYPE_LOADING : VIEW_TYPE_ITEM;
}
private class ItemViewHolder extends RecyclerView.ViewHolder {
TextView tvItem;
public ItemViewHolder(@NonNull View itemView) {
super(itemView);
tvItem = itemView.findViewById(R.id.tvItem);
}
}
private class LoadingViewHolder extends RecyclerView.ViewHolder {
ProgressBar progressBar;
public LoadingViewHolder(@NonNull View itemView) {
super(itemView);
progressBar = itemView.findViewById(R.id.progressBar);
}
}
private void showLoadingView(LoadingViewHolder viewHolder, int position) {
//ProgressBar would be displayed
}
private void populateItemRows(ItemViewHolder viewHolder, int position) {
String item = mItemList.get(position);
viewHolder.tvItem.setText(item);
}
}
getItemViewType（アイテムのビュータイプをチェックする場所）は、リストの各要素をチェックする箇所です。要素がNULLである場合、ビュータイプを1に設定します。それ以外の場合は0にします。 onCreateViewHolder内でViewタイプに基づいてViewHolderをインスタンス化します。 onBindViewHolder内では、ViewHolderインスタンスのタイプをチェックし、該当する行を表示します。上記のアダプターをインスタンス化するMainActivity.javaクラスを見てみましょう。
package com.scdev.androidrecyclerviewloadmore;
import android.os.Handler;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
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() {
int i = 0;
while (i < 10) {
rowsArrayList.add("Item " + i);
i++;
}
}
private void initAdapter() {
recyclerViewAdapter = new RecyclerViewAdapter(rowsArrayList);
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("Item " + currentSize);
currentSize++;
}
recyclerViewAdapter.notifyDataSetChanged();
isLoading = false;
}
}, 2000);
}
}
上記のコードにおいて、initScrollListenerは最も重要なメソッドです。そこではRecyclerViewのスクロール状態をチェックし、一番下のアイテムが表示されている場合はローディングビューを表示し、次のリストを表示します。アプリケーションの出力結果は以下の通りです。これでこのチュートリアルは終了です。プロジェクトは以下のリンクからダウンロードできます。
AndroidRecyclerViewLoadMoreを日本語で自然に言い換えると、「AndroidのRecyclerViewの追加読み込み機能」となります。
GitHubのプロジェクトのリンク