Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Android

Cách triển khai danh sách vô hạn (Endless List) với RecyclerView trên Android

Giới thiệu

Endless List (Infinite Scroll / Pagination) là pattern tải dữ liệu thêm khi người dùng cuộn gần cuối danh sách. Bài viết hướng dẫn triển khai với RecyclerView, LinearLayoutManager và OnScrollListener.

Các bước thực hiện

Bước 1: Tạo dự án và thêm dependency

Android Studio → File → New Project → Empty Activity.

Thêm vào build.gradle (Module: app):

dependencies {
    implementation 'androidx.recyclerview:recyclerview:1.3.2'
    implementation 'androidx.cardview:cardview:1.0.0'
    // Phiên bản cũ: com.android.support:recyclerview-v7:28.0.0
}

Bước 2: Layout chính (res/layout/activity_main.xml)

<?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>

Bước 3: Item Layout (res/layout/item_row.xml)

<?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>

Bước 4: Loading Item Layout (res/layout/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:orientation="vertical"
    android:padding="16dp"
    android:gravity="center">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true" />
</LinearLayout>

Bước 5: Adapter đa loại ViewType (RecyclerViewAdapter.java)

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 androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
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;
    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 holder, int position) {
        if (holder instanceof ItemViewHolder) {
            populateItemRows((ItemViewHolder) holder, position);
        } else if (holder instanceof LoadingViewHolder) {
            showLoadingView((LoadingViewHolder) holder, position);
        }
    }

    @Override
    public int getItemCount() {
        return mItemList == null ? 0 : mItemList.size();
    }

    @Override
    public int getItemViewType(int position) {
        return mItemList.get(position) == null ? VIEW_TYPE_LOADING : VIEW_TYPE_ITEM;
    }

    // ViewHolder cho item thường
    private static class ItemViewHolder extends RecyclerView.ViewHolder {
        TextView tvItem;
        ItemViewHolder(@NonNull View itemView) {
            super(itemView);
            tvItem = itemView.findViewById(R.id.textViewItem);
        }
    }

    // ViewHolder cho loading
    private static class LoadingViewHolder extends RecyclerView.ViewHolder {
        ProgressBar progressBar;
        LoadingViewHolder(@NonNull View itemView) {
            super(itemView);
            progressBar = itemView.findViewById(R.id.progressBar);
        }
    }

    private void showLoadingView(LoadingViewHolder holder, int position) {
        // ProgressBar tự chạy (indeterminate)
    }

    private void populateItemRows(ItemViewHolder holder, int position) {
        String item = mItemList.get(position);
        holder.tvItem.setText(item);
    }
}

Bước 6: MainActivity.java (Logic pagination)

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 android.os.Looper;
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();
    }

    // Dữ liệu ban đầu
    private void populateData() {
        for (int i = 0; i < 10; i++) {
            rowsArrayList.add("Số " + i);
        }
    }

    private void initAdapter() {
        recyclerViewAdapter = new RecyclerViewAdapter(rowsArrayList);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(recyclerViewAdapter);
    }

    private void initScrollListener() {
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
                if (layoutManager == null || isLoading) return;

                int visibleItemCount = layoutManager.getChildCount();
                int totalItemCount = layoutManager.getItemCount();
                int firstVisibleItemPosition = layoutManager.findFirstVisibleItemPosition();

                // Kiểm tra cuộn gần cuối (còn 2 item)
                if ((visibleItemCount + firstVisibleItemPosition) >= totalItemCount - 2
                        && firstVisibleItemPosition >= 0) {
                    loadMore();
                }
            }
        });
    }

    private void loadMore() {
        isLoading = true;
        // Thêm item null để hiển thị loading
        rowsArrayList.add(null);
        recyclerViewAdapter.notifyItemInserted(rowsArrayList.size() - 1);

        // Giả lập load network (2 giây)
        new Handler(Looper.getMainLooper()).postDelayed(() -> {
            // Xóa loading item
            rowsArrayList.remove(rowsArrayList.size() - 1);
            int scrollPosition = rowsArrayList.size();
            recyclerViewAdapter.notifyItemRemoved(scrollPosition);

            // Thêm 10 item mới
            int currentSize = scrollPosition;
            int nextLimit = currentSize + 10;
            while (currentSize < nextLimit) {
                rowsArrayList.add("Số " + currentSize);
                currentSize++;
            }
            recyclerViewAdapter.notifyDataSetChanged();
            isLoading = false;
        }, 2000);
    }
}

Bước 7: Manifest

<?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>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Cuộn xuống cuối danh sách → hiện ProgressBar → load thêm 10 item.

Cách triển khai danh sách vô hạn (Endless List) với RecyclerView trên Android

Cải tiến cho Production

1. Tránh notifyDataSetChanged() - dùng DiffUtil

// Thay vì notifyDataSetChanged()
DiffUtil.DiffResult diffResult = DiffUtil.calculateDiff(new DiffUtil.Callback() {
    @Override public int getOldListSize() { return oldList.size(); }
    @Override public int getNewListSize() { return newList.size(); }
    @Override public boolean areItemsTheSame(int oldPos, int newPos) {
        return oldList.get(oldPos).equals(newList.get(newPos));
    }
    @Override public boolean areContentsTheSame(int oldPos, int newPos) {
        return oldList.get(oldPos).equals(newList.get(newPos));
    }
});
diffResult.dispatchUpdatesTo(adapter);

2. Paging 3 Library (Khuyến nghị Google)

dependencies {
    implementation "androidx.paging:paging-runtime:3.2.1"
    implementation "androidx.paging:paging-rxjava3:3.2.1" // RxJava
}

// PagingSource + Pager + Flow/LiveData -> submitData(lifecycle, adapter)

Ưu điểm: Tự động load, cache, retry, error handling, placeholder, separator, prefetch.

3. Xử lý lỗi & Retry

// Thêm item error view type
// Khi load thất bại: thay loading item bằng error item có nút "Thử lại"

4. Trạng thái rỗng (Empty State)

recyclerView.setAdapter(adapter);
if (list.isEmpty()) showEmptyView();

Tóm tắt logic phát hiện cuối danh sách

// Cách 1: findLastCompletelyVisibleItemPosition (đơn giản)
if (layoutManager.findLastCompletelyVisibleItemPosition() == totalItemCount - 1) {
    loadMore();
}

// Cách 2: Tính toán chính xác hơn (trên)
int threshold = 2; // Load khi còn 2 item
if ((visibleItemCount + firstVisibleItemPosition) >= totalItemCount - threshold) {
    loadMore();
}