Android RecyclerView滚动加载更多功能实现求助（Firebase数据源）

Hey there! Let's get that load-more functionality working for your RecyclerView. I'll walk you through the key changes needed in your adapter, adding scroll detection, and setting up Firebase pagination to fetch 10 items at a time.

Step 1: Update Your MarkerAdapter to Support Load-More State #

First, we need to modify your adapter to handle two types of items: regular Marker items and a "loading more" footer. Here's how to adjust your code:

Add Constants for View Types #

Add these at the top of your MarkerAdapter class:

private static final int VIEW_TYPE_MARKER = 0;
private static final int VIEW_TYPE_LOADING = 1;
private boolean isLoading = false;

Modify getItemViewType #

Override this method to return the correct view type based on position:

@Override
public int getItemViewType(int position) {
    return position == mMarkerList.size() ? VIEW_TYPE_LOADING : VIEW_TYPE_MARKER;
}

Update getItemCount #

We need to add an extra item for the loading footer when we're in a loading state:

@Override
public int getItemCount() {
    return mMarkerList.size() + (isLoading ? 1 : 0);
}

Add a Method to Toggle Loading State #

This will let us show/hide the loading footer:

public void setLoading(boolean loading) {
    isLoading = loading;
    notifyItemChanged(mMarkerList.size()); // Notify the footer item change
}

Add a Method to Append New Markers (Instead of Refreshing) #

Your existing refreshMarkers clears all data—we need a way to add new items to the list:

public void addMarkers(List<Marker> markers) {
    int startPosition = mMarkerList.size();
    mMarkerList.addAll(markers);
    notifyItemRangeInserted(startPosition, markers.size());
}

Update onCreateViewHolder to Inflate Loading Footer #

Modify the method to inflate a different layout for the loading state (you'll need to create a simple layout item_loading.xml with a ProgressBar or "Loading more..." text):

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (viewType == VIEW_TYPE_LOADING) {
        View loadingView = mLayoutInflater.inflate(R.layout.item_loading, parent, false);
        return new LoadingViewHolder(loadingView);
    } else {
        View itemMarker = mLayoutInflater.inflate(R.layout.item_marker, parent, false);
        return new MarkerViewHolder(itemMarker);
    }
}

Create Separate ViewHolders #

Split your existing ViewHolder into two: one for markers, one for loading:

// Marker ViewHolder (your original ViewHolder, renamed)
public class MarkerViewHolder extends RecyclerView.ViewHolder {
    private final ImageView mImageView;
    private final TextView mNameTextView;
    private final TextView mAuthorTextView;
    private Marker mMarker;

    public MarkerViewHolder(View itemView) {
        super(itemView);
        mImageView = itemView.findViewById(R.id.photo_image_view);
        mNameTextView = itemView.findViewById(R.id.text_view_name);
        mAuthorTextView = itemView.findViewById(R.id.text_view_author);

        itemView.setOnClickListener(v -> {
            if (mOnItemClickListener != null){
                mOnItemClickListener.onItemClick(mMarker);
            }
        });
    }

    void bindMarker(Marker marker) {
        mMarker = marker;
        mNameTextView.setText(mMarker.getName());
        mAuthorTextView.setText(mMarker.getAuthor());
        Picasso.with(mImageView.getContext())
                .load(mMarker.getImage().getUrl())
                .placeholder(R.color.grey_400)
                .resize(1100, 1100)
                .into(mImageView);
        cacheMarkers(getAdapterPosition()); // Use adapter position instead of hardcoded index
    }

    // Keep your loadImageFromStorage and cacheMarkers methods here, adjust to use getAdapterPosition()
}

// Loading ViewHolder
public class LoadingViewHolder extends RecyclerView.ViewHolder {
    public LoadingViewHolder(View itemView) {
        super(itemView);
        // If your item_loading has a ProgressBar, initialize it here if needed
    }
}

Update onBindViewHolder #

Adjust this method to handle both view types:

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (holder instanceof MarkerViewHolder) {
        Marker marker = mMarkerList.get(position);
        ((MarkerViewHolder) holder).bindMarker(marker);
    }
    // No action needed for LoadingViewHolder—it just shows the loading state
}

Step 2: Add Scroll Listener to RecyclerView #

In your Activity/Fragment where you set up the RecyclerView, add an OnScrollListener to detect when the user scrolls to the bottom:

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();
        
        // Check if we've reached the end of the list and not already loading
        if (!markerAdapter.isLoading && layoutManager != null) {
            int visibleItemCount = layoutManager.getChildCount();
            int totalItemCount = layoutManager.getItemCount();
            int firstVisibleItemPosition = layoutManager.findFirstVisibleItemPosition();
            
            if ((visibleItemCount + firstVisibleItemPosition) >= totalItemCount
                && firstVisibleItemPosition >= 0) {
                // Trigger load more
                loadMoreMarkers();
            }
        }
    }
});

Step 3: Implement Firebase Pagination #

You'll need to track the last loaded document (Marker) to fetch the next batch of 10 items. Here's how to set this up:

Initialize Firebase Query #

In your Activity/Fragment, declare variables to track the last snapshot and the base query:

private Query markerQuery;
private DocumentSnapshot lastVisible;
private static final int PAGE_SIZE = 10;

Initial Data Load #

Load the first 10 items when your screen starts:

private void loadInitialMarkers() {
    markerQuery = FirebaseFirestore.getInstance()
            .collection("markers") // Replace with your actual collection name
            .limit(PAGE_SIZE);

    markerQuery.get().addOnSuccessListener(queryDocumentSnapshots -> {
        if (!queryDocumentSnapshots.isEmpty()) {
            lastVisible = queryDocumentSnapshots.getDocuments().get(queryDocumentSnapshots.size() - 1);
            List<Marker> markers = queryDocumentSnapshots.toObjects(Marker.class);
            markerAdapter.refreshMarkers(markers);
        }
    }).addOnFailureListener(e -> {
        // Handle error
        Log.e("Firebase", "Failed to load initial markers", e);
    });
}

Load More Data #

Implement the loadMoreMarkers method triggered by the scroll listener:

private void loadMoreMarkers() {
    if (lastVisible == null) return;

    markerAdapter.setLoading(true);

    Query nextQuery = FirebaseFirestore.getInstance()
            .collection("markers")
            .startAfter(lastVisible)
            .limit(PAGE_SIZE);

    nextQuery.get().addOnSuccessListener(queryDocumentSnapshots -> {
        markerAdapter.setLoading(false);
        if (!queryDocumentSnapshots.isEmpty()) {
            lastVisible = queryDocumentSnapshots.getDocuments().get(queryDocumentSnapshots.size() - 1);
            List<Marker> newMarkers = queryDocumentSnapshots.toObjects(Marker.class);
            markerAdapter.addMarkers(newMarkers);
        } else {
            // No more data—optionally hide the loading footer permanently here
        }
    }).addOnFailureListener(e -> {
        markerAdapter.setLoading(false);
        Log.e("Firebase", "Failed to load more markers", e);
    });
}

Step 4: Create the Loading Footer Layout #

Create res/layout/item_loading.xml with a simple loading indicator:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="16dp">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Loading more..."/>

</LinearLayout>

Key Notes #

• Ensure your Marker class has a no-arg constructor and uses Firestore annotations (like @DocumentId) if needed for proper deserialization.
• Adjust the Firestore collection name to match your actual database structure.
• The loadImageFromStorage method in your original adapter uses a hardcoded index—consider using the marker's unique ID instead of position, since positions change when adding new items.

内容的提问来源于stack exchange，提问作者Max Yablonskyi