AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

实现 RecyclerView 上拉加载及自动加载

2017-12-09 1345
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 之前在《一步步打造自己的通用上拉加载布局》（如果没有看过，建议先看下这一篇）写到如何实现一个通用的上拉加载布局，本文将基于此进行扩展，实现 RecyclerView 的上拉加载及自动加载。

之前在《一步步打造自己的通用上拉加载布局》（如果没有看过，建议先看下这一篇）写到如何实现一个通用的上拉加载布局，本文将基于此进行扩展，实现 RecyclerView 的上拉加载及自动加载。

在之前的《一步步打造自己的通用上拉加载布局》已经提到，下拉刷新是将获取到的数据替换掉原有的数据，而上拉加载则是将获取到的数据插入到原来数据的末尾与底部提示加载的 View（如FooterView）之间，它们的展现方式的不同，使得上拉出来用于提示加载的 View，对于列表类视图如 ListView 或 RecyclerView 而言，适合作为它们的 FooterView 而不适合封装到我们的上拉布局中。因此，我们需要继承 LoadMoreLayout 并实现对于 RecyclerView 的扩展。

准备工作

由于在 LoadMoreLayout 中已经把上拉的逻辑都封装好，因此这里主要是对 RecyclerView 的 FooterView 及自动加载的封装。在这里，对于带 FooterView 的 Adapter，我是通过包装原有的 Adapter 来实现，这样在使用的时候就不需要把原来的 Adapter 改成我们的上拉加载中的 Adapter，以减少对代码的侵入。这个 Adapter 代码如下。这个类代码可不必细看，它是上拉加载的副产品，不是主要逻辑，于这里贴出只是交底。

/*
 * Copyright (c) 2017. Xi'an iRain IOT Technology service CO., Ltd (ShenZhen). All Rights Reserved.
 */
package com.githang.recycleradapter;

import android.support.v7.widget.RecyclerView;
import android.view.ViewGroup;

/**
 * @author Geek_Soledad (msdx.android@qq.com)
 * @since 2017-05-03 0.1
 */
public abstract class HiRecyclerAdapter extends RecyclerView.Adapter {
    /**
     * 由于RecyclerView的灵活性，可能会出现不同的Adapter的嵌套，而因此可能导致viewType重复。
     * 因此在这里尝试为每个Adapter定义一个区间，而避免它们的重复问题。
     */
    public static final int TYPE_SECTION = 2 << 10;

    /**
     * 从2<<20开始，留足够的type值给content使用。
     */
    private static final int HEADER_OFFSET = TYPE_SECTION << 10;
    private static final int FOOTER_OFFSET = HEADER_OFFSET + TYPE_SECTION;

    private int mHeaderCount;
    private int mContentCount;
    private int mFooterCount;

    private RecyclerView.Adapter mWrapperAdapter;
    private RecyclerView.AdapterDataObserver mDataObserver;

    public HiRecyclerAdapter(RecyclerView.Adapter wrapperAdapter) {
        mWrapperAdapter = wrapperAdapter;
        mDataObserver = new RecyclerView.AdapterDataObserver() {
            @Override
            public void onChanged() {
                notifyDataSetChanged();
            }

            @Override
            public void onItemRangeChanged(int positionStart, int itemCount) {
                notifyItemRangeChanged(positionStart + mHeaderCount, itemCount);
            }

            @Override
            public void onItemRangeChanged(int positionStart, int itemCount, Object payload) {
                notifyItemRangeChanged(positionStart + mHeaderCount, itemCount, payload);
            }

            @Override
            public void onItemRangeInserted(int positionStart, int itemCount) {
                notifyItemRangeInserted(positionStart + mHeaderCount, itemCount);
            }

            @Override
            public void onItemRangeRemoved(int positionStart, int itemCount) {
                notifyItemRangeRemoved(positionStart + mHeaderCount, itemCount);
            }

            @Override
            public void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) {
                notifyItemMoved(fromPosition + mHeaderCount, toPosition + mHeaderCount);
            }
        };
        mWrapperAdapter.registerAdapterDataObserver(mDataObserver);
    }

    public RecyclerView.Adapter getWrapperAdapter() {
        return mWrapperAdapter;
    }

    public int getContentPosition(int position) {
        return position - mHeaderCount;
    }

    @Override
    public final RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType >= HEADER_OFFSET && viewType < HEADER_OFFSET + TYPE_SECTION) {
            return onCreateHeaderHolder(parent, viewType - HEADER_OFFSET);
        } else if (viewType >= FOOTER_OFFSET && viewType < FOOTER_OFFSET + TYPE_SECTION) {
            return onCreateFooterHolder(parent, viewType - FOOTER_OFFSET);
        } else {
            return mWrapperAdapter.onCreateViewHolder(parent, viewType);
        }
    }

    /**
     * Called when RecyclerView needs a new header {@link RecyclerView.ViewHolder} of the given type to
     * represent an item.
     *
     * @param parent   The ViewGroup into which the new View will be added after it is bound to
     *                 an adapter position.
     * @param viewType The view type of the new View.
     * @return A new ViewHolder that holds a View of the given view type.
     */
    protected abstract RecyclerView.ViewHolder onCreateHeaderHolder(ViewGroup parent, int viewType);

    /**
     * Called when RecyclerView needs a new footer {@link RecyclerView.ViewHolder} of the given type to
     * represent an item.
     *
     * @param parent   The ViewGroup into which the new View will be added after it is bound to
     *                 an adapter position.
     * @param viewType The view type of the new View.
     * @return A new ViewHolder that holds a View of the given view type.
     */
    protected abstract RecyclerView.ViewHolder onCreateFooterHolder(ViewGroup parent, int viewType);

    @Override
    public final void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (position < mHeaderCount) {
            onBindHeaderHolder(holder, position);
        } else if (position < mHeaderCount + mContentCount) {
            mWrapperAdapter.onBindViewHolder(holder, position - mHeaderCount);
        } else {
            onBindFooterHolder(holder, position - mHeaderCount - mContentCount);
        }
    }

    /**
     * Called by RecyclerView to display the header at the specified position. This method should
     * update the contents of the {@link RecyclerView.ViewHolder#itemView} to reflect the header
     * item at the given position.
     *
     * @param holder   The ViewHolder which should be updated to represent the contents of the
     *                 item at the given position in the data set.
     * @param position The position of the item within the adapter's data set.
     */
    protected abstract void onBindHeaderHolder(RecyclerView.ViewHolder holder, int position);

    /**
     * Called by RecyclerView to display the footer at the specified position. This method should
     * update the contents of the {@link RecyclerView.ViewHolder#itemView} to reflect the footer
     * item at the given position.
     *
     * @param holder   The ViewHolder which should be updated to represent the contents of the
     *                 item at the given position in the data set.
     * @param position The position of the item within the adapter's data set.
     */
    protected abstract void onBindFooterHolder(RecyclerView.ViewHolder holder, int position);

    public int getHeaderCount() {
        return 0;
    }

    public final int getContentCount() {
        return mWrapperAdapter.getItemCount();
    }

    public int getFooterCount() {
        return 0;
    }

    @Override
    public final int getItemCount() {
        mHeaderCount = getHeaderCount();
        mContentCount = mWrapperAdapter.getItemCount();
        mFooterCount = getFooterCount();
        return mHeaderCount + mContentCount + mFooterCount;
    }

    @Override
    public final int getItemViewType(int position) {
        if (position < mHeaderCount) {
            return validateViewType(getHeaderViewType(position)) + HEADER_OFFSET;
        } else if (position < mHeaderCount + mContentCount) {
            return validateViewType(mWrapperAdapter.getItemViewType(position - mHeaderCount));
        } else {
            return validateViewType(getFooterViewType(position - mHeaderCount - mContentCount)) + FOOTER_OFFSET;
        }
    }

    private int validateViewType(int viewType) {
        if (viewType < 0 || viewType >= TYPE_SECTION) {
            throw new IllegalStateException("viewType must be between 0 and " + TYPE_SECTION);
        }
        return viewType;
    }

    protected int getHeaderViewType(int position) {
        return 0;
    }

    protected int getFooterViewType(int position) {
        return 0;
    }

    public void notifyFooterInsert(int positionStart) {
        notifyItemInserted(mHeaderCount + mContentCount + positionStart);
    }

    public void notifyFooterRemoved(int positionStart) {
        notifyItemRemoved(mHeaderCount + mContentCount + positionStart);
    }
}

接下来，继承自这个 Adapter，实现对 FooterView 添加，代码如下：

/*
 * Copyright (c) 2017. Xi'an iRain IOT Technology service CO., Ltd (ShenZhen). All Rights Reserved.
 */
package com.githang.hiloadmore.recyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;

import com.githang.recycleradapter.HiRecyclerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * @author Geek_Soledad (msdx.android@qq.com)
 * @since 2017-05-03 0.1
 */
public class FooterRecyclerAdapter extends HiRecyclerAdapter {

    private List<View> mFooterViews = new ArrayList<>();

    public FooterRecyclerAdapter(RecyclerView.Adapter wrapperAdapter) {
        super(wrapperAdapter);
    }

    @Override
    protected RecyclerView.ViewHolder onCreateHeaderHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    protected RecyclerView.ViewHolder onCreateFooterHolder(ViewGroup parent, int viewType) {
        return new FooterViewHolder(mFooterViews.get(viewType));
    }

    @Override
    protected void onBindHeaderHolder(RecyclerView.ViewHolder holder, int position) {
    }

    @Override
    protected void onBindFooterHolder(RecyclerView.ViewHolder holder, int position) {
    }

    @Override
    protected int getFooterViewType(int position) {
        return position;
    }

    @Override
    public int getFooterCount() {
        return mFooterViews.size();
    }

    void addFooterView(View view) {
        if (!mFooterViews.contains(view)) {
            mFooterViews.add(view);
            notifyFooterInsert(mFooterViews.indexOf(view));
        }
    }

    void removeFooterView(View view) {
        if (mFooterViews.contains(view)) {
            int index = mFooterViews.indexOf(view);
            mFooterViews.remove(view);
            notifyFooterRemoved(index);
        }
    }

    static FooterRecyclerAdapter wrapper(RecyclerView.Adapter adapter) {
        if (adapter instanceof FooterRecyclerAdapter) {
            return (FooterRecyclerAdapter) adapter;
        } else {
            return new FooterRecyclerAdapter(adapter);
        }
    }

    static class FooterViewHolder extends RecyclerView.ViewHolder {

        FooterViewHolder(View itemView) {
            super(itemView);
            RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) itemView.getLayoutParams();
            if (lp == null) {
                lp = new RecyclerView.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                itemView.setLayoutParams(lp);
            }
        }
    }
}

然后，实现一个默认的 FooterView。它的布局文件很简单，就是一个 TextView，如下：

<?xml version="1.0" encoding="utf-8"?>
<TextView
    android:id="@+id/footer_text"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:gravity="center"
    android:textColor="#666"
    android:textSize="12sp"/>

它需要实现 LoadMoreUIHandler 接口，Java 代码如下：

/*
 * Copyright (c) 2017. Xi'an iRain IOT Technology service CO., Ltd (ShenZhen). All Rights Reserved.
 */
package com.githang.hiloadmore.recyclerview;

import android.content.Context;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.githang.hiloadmore.LoadMoreUIHandler;
import com.githang.hiloadmore.R;

/**
 * @author Geek_Soledad (msdx.android@qq.com)
 * @since 2017-05-03 0.1
 */
public class RecyclerFooterView extends FrameLayout implements LoadMoreUIHandler {
    private TextView mText;

    public RecyclerFooterView(@NonNull Context context) {
        super(context);
        LayoutInflater.from(context).inflate(R.layout.hlm_footer_load_more, this, true);
        mText = findViewById(R.id.footer_text);
        mText.setText(R.string.hlm_pull_to_load_more);
    }

    @Override
    public void onPrepare() {
        mText.setText(R.string.hlm_pull_to_load_more);
    }

    @Override
    public void onBegin() {
        mText.setText(R.string.hlm_tip_loading_more);
    }

    @Override
    public void onComplete(boolean hasMore) {
        mText.setText(hasMore ? R.string.hlm_pull_to_load_more : R.string.hlm_tip_load_finish);
    }

    @Override
    public void onPositionChange(int offsetY, int offsetToLoadMore) {
        if (Math.abs(offsetY) > offsetToLoadMore) {
            mText.setText(R.string.hlm_release_to_load_more);
        } else {
            mText.setText(R.string.hlm_pull_to_load_more);
        }
    }
}

上拉加载的 FooterView 扩展

前面这些，都只是对 FooterView 显示的准备工作。最后，才是对 LoadMoreLayout 实现支持 RecyclerView 的扩展。如果你不需要这个FooterView，那么直接使用 LoadMoreLayout 也是可以的。当然，这里的扩展过程也很简单，继承 LoadMoreLayout，然后重写 protected void onFinishInflate() 方法，限定子 View 只能是 RecyclerView，再定义一个设置 FooterView 的方法，如此即可，代码如下：

/*
 * Copyright (c) 2017. Xi'an iRain IOT Technology service CO., Ltd (ShenZhen). All Rights Reserved.
 */
package com.githang.hiloadmore.recyclerview;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.View;

import com.githang.hiloadmore.LoadMoreLayout;

/**
 * RecyclerView的上拉加载以及自动加载实现。
 *
 * @author Geek_Soledad (msdx.android@qq.com)
 * @since 2017-05-03 0.1
 */
public class LoadMoreRecyclerViewContainer extends LoadMoreLayout {
    private View mFooterView;

    public LoadMoreRecyclerViewContainer(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        View content = getContentView();
        if (!(content instanceof RecyclerView)) {
            throw new IllegalStateException("LoadMoreRecyclerViewContainer only support RecyclerView");
        }
    }

    public void setFooterView(final View footer) {
        final RecyclerView recyclerView = (RecyclerView) getContentView();
        final FooterRecyclerAdapter adapter = FooterRecyclerAdapter.wrapper(recyclerView.getAdapter());
        if (mFooterView != null && mFooterView != footer) {
            adapter.removeFooterView(mFooterView);
        }
        adapter.addFooterView(footer);
        mFooterView = footer;
        recyclerView.setAdapter(adapter);
        footer.post(new Runnable() {
            @Override
            public void run() {
                int height = footer.getHeight();
                if (height > 0) {
                    setOffsetYToLoadMore(height);
                }
            }
        });
    }
}

这就完成了上拉加载的扩展。

实现自动加载

接下来实现自动加载，这个也很简单，思路就是监听 RecyclerView 的滚动，如果到达底部，则主动触发上拉加载。这里只需要定义一个表示是否需要自动加载的成员变量，添加其 setter 方法，然后修改上面重写的 protected void onFinishInflate() 方法，给 RecyclerView 加一个监听器即可，如下：


    private View mFooterView;

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        View content = getContentView();
        if (content instanceof RecyclerView) {
            ((RecyclerView) content).addOnScrollListener(new RecyclerView.OnScrollListener() {

                private LinearLayoutManager mLinearLayoutManager;

                @Override
                public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                    if (!mAutoLoadMore || !hasMore()) {
                        return;
                    }
                    if (mLinearLayoutManager == null) {
                        RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
                        if (layoutManager instanceof LinearLayoutManager) {
                            mLinearLayoutManager = (LinearLayoutManager) layoutManager;
                        }
                    }
                    if (mLinearLayoutManager == null) {
                        return;
                    }

                    if ((mLinearLayoutManager.getItemCount() - recyclerView.getChildCount())
                            <= mLinearLayoutManager.findFirstVisibleItemPosition()) {
                        triggerToLoadMore();
                    }
                }
            });
        } else {
            throw new IllegalStateException("LoadMoreRecyclerViewContainer only support RecyclerView");
        }
    }

    public void setAutoLoadMore(boolean autoLoadMore) {
        mAutoLoadMore = autoLoadMore;
    }

这样就扩展完成了。

使用示例

以上代码已提交至 Github 上的 hi-loadmore 项目，并且已发布至 bintray。使用方式如下：

首先添加 Gradle 依赖：

    compile 'com.githang:hi-loadmore:0.1.1'
    // OR
    implementation 'com.githang:hi-loadmore:0.1.1'

然后在布局中使用 LoadMoreRecyclerViewContainer作为 RecyclerView 的父布局。接下来在 Java 代码中添加配置：


        RecyclerFooterView footerView = new RecyclerFooterView(this);
        mLoadMoreLayout.setFooterView(footerView);
        mLoadMoreLayout.setLoadMoreUIHandler(footerView);
        mLoadMoreLayout.setHasMore(true);

然后设置触发了上拉加载后的处理：

        mLoadMoreLayout.setLoadMoreHandler(new LoadMoreHandler() {
            @Override
            public void onLoadMore() {
                // 在这里请求数据
            }
        });

最后看下运行结果：
RecyclerView 上拉加载

项目地址：https://github.com/msdx/hi-loadmore

文章标签：
Android开发
物联网
Java
数据格式
XML
浩码农
目录
相关文章
编程的平行世界
|
缓存
Flutter ListView懒加载（滑动不加载，停止滑动加载）
前言：为了更好的减小网络的带宽，使得列表更加流畅，我们需要了解懒加载，也称延迟加载。关于上一章的登录界面，各位属实难为我了，我也在求ui小姐姐，各位点点赞给我点动力吧~
编程的平行世界
1195 0
1420077999672667
|
UED
利用RecyclerView实现无限轮播广告条2
利用RecyclerView实现无限轮播广告条
1420077999672667
121 0
1420077999672667
|
API
利用RecyclerView实现无限轮播广告条1
利用RecyclerView实现无限轮播广告条
1420077999672667
273 0
tinyvvampirepudge
ScrollView和HorizontalScrollView无法设置点击事件的源码解析
最近的开发过程中，发现存在ScrollView和HorizontalScrollView无法设置点击事件的现象。 我们知道，通常在设置点击事件时，位于View树上方的子View的OnClickListener，会优先于父View的OnClickListener执行。 开发过程中我们会经常使用类似的方式来给布局设置点击事件，比如给ListView的Item背景设置OnClickListener，用于点击item空白区域的跳转操作；然后再给item内部的子元素分别设置OnClickListener用于各自不同的点击操作。
tinyvvampirepudge
489 0
不良使
|
Android开发
同一页面实现recycleView三种布局【recycleView + adapter】
同一页面实现recycleView三种布局【recycleView + adapter】
不良使
159 0
BennuC
|
API
为RecyclerView添加下拉刷新功能
在之前的文章中，我们实现了带有header和footer功能的WrapRecyclerView。 现今App中列表的下拉刷新和上拉加载已经是一种习惯了，这两个操作也确实方便很多。 为RecyclerView添加这个功能可以通过多种方法，这里我选用了一种简单的做法。基于pulltorefresh这个库。
BennuC
190 0
老朱教授
|
缓存 C# Windows
C# ListView双缓存代码，解决闪屏问题
老朱教授
1899 0
余二五
|
Android开发
Android第二十三期 - 256k的ListView下拉刷新和滚动加载数据
余二五
868 0
余二五
|
Android开发
Android项目：使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法，监听listview滚动方向
余二五
1681 0
技术小胖子
|
Java
Fresco对Listview等快速滑动时停止加载
技术小胖子
1587 0

热门文章

最新文章

  • 1
    基于区块链的机器学习模型创建方案
  • 2
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
  • 3
    首届Global VR Hackathon完结 全球前三甲诞生
  • 4
    我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
  • 5
    iptables
  • 6
    DevExpress 10.2.4系列-ASPxListBox根据列值不同设置不同图标
  • 7
    jquery的load加载js页面到指定div中
  • 8
    分享平时工作中那些给力的shell命令（更新版）
  • 9
    如何在ubuntu下用SVN commit
  • 10
    hdu 1800 Flying to the Mars
  • 1
    HelloMeme：开源的面部表情与姿态迁移框架，将视频中的人物表情迁移到静态图像中生成动态视频
    103
  • 2
    VSI-Bench：李飞飞谢赛宁团队推出视觉空间智能基准测试集，旨在评估多模态大语言模型在空间认知和理解方面的能力
    32
  • 3
    CLEAR：新加坡国立大学推出线性注意力机制，使8K图像的生成速度提升6.3倍，显著减少了计算量和时间延迟
    35
  • 4
    Kheish：开源的多智能体开发框架，通过 YAML 配置工作流和多个 Agent 共同协作解决复杂任务
    41
  • 5
    Bamba-9B：基于 Mamba2 架构的仅解码语言模型，旨在提高大型语言模型在推理时的效率
    37
  • 6
    DisPose：清华北大等多所高校联合推出基于人物图像增强视频生成技术，实现对人物动画的准确控制和一致性
    43
  • 7
    InvSR：开源图像超分辨率生成模型，提升分辨率，修复老旧照片为超清图像
    41
  • 8
    Univer：开源全栈 AI 办公工具，支持 Word、Excel、PPT 等文档处理和多人实时协作
    31
  • 9
    《人工智能：驱散新材料数据噪声与填补缺失值的曙光》
    32
  • 10
    《人工智能：解锁新材料最佳掺杂元素及比例的密码》
    23

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks售前咨询