SwipeRefreshLayout+Recyclerview实现下拉刷新和上拉自动加载

前提:

现在市面上的Android的App只要涉及到网络交互的,几乎都有着上拉刷新的功能。无论是新闻资讯类的简书掘金,还是直播类的斗鱼火猫。网上的各种框架,也多的数不胜数。像我之前用的SwipeToLoadLayout,就是一个很好的下拉刷新框架。不过Google在5.0之后出了SwipeRefreshLayout,个人就很喜欢material design风格的设计。毕竟谷歌自家出的,出生就带光环。哈哈,不闲扯了,下面进入正题。

1.SwipeRefreshLayout用法:

image.png

从源码中可以看到,他本身继承与ViewGroup。所以只需要将他像一般的ViewGroup一样用就好了。

    //xml代码
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swiperefreshlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"        
            android:layout_height="wrap_content"/>

    </android.support.v4.widget.SwipeRefreshLayout>

这里介绍几个SwipeRefreshLayout的代码的基本用法:

        //下拉刷新的圆圈是否显示
        refreshLayout.setRefreshing(false);

        //设置下拉时圆圈的颜色(可以由多种颜色拼成)
        refreshLayout.setColorSchemeResources(android.R.color.holo_blue_light,
                android.R.color.holo_red_light,
                android.R.color.holo_orange_light);

        //设置下拉时圆圈的背景颜色(这里设置成白色)
        refreshLayout.setProgressBackgroundColorSchemeResource(android.R.color.white);

        //设置下拉刷新时的操作
        refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                  //具体操作
                  ·······
            }
        });

这样一个简单的下拉刷新就完成了,简单吧。哈哈。

2.上拉加载:

下面重点来了,谷歌只提供了下拉刷新,但却没有像别的下拉刷新框架一样提供上拉加载的功能。这可怎么办呢,别急。有的观察仔细的朋友可能会发现,现在市面上用SwipeRefreshLayout做下拉刷新的,一般加载的时候都是用的自动加载。不像是传统的下拉刷新框架,会有一个明显的上拉动作。而是滑到一定的位置,就进行自动加载。这样会使用户有着更好的体验,省去了等待上拉加载的时间。

代码:
 private class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
        private final static int TYPE_CONTENT=0;//正常内容
        private final static int TYPE_FOOTER=1;//下拉刷新

        @Override
        public int getItemViewType(int position) {
            if (position==listData.size()){
                return TYPE_FOOTER;
            }
            return TYPE_CONTENT;
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType==TYPE_FOOTER){
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_foot, parent, false);
                return new FootViewHolder(view);
            }
            else {
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_item, parent, false);
                MyViewHolder myViewHolder = new MyViewHolder(view);
                return myViewHolder;
            }
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            if (getItemViewType(position)==TYPE_FOOTER){

            }
            else{
                MyViewHolder viewHolder= (MyViewHolder) holder;
                viewHolder.textView.setText("第" + position + "行");
            }
        }


        @Override
        public int getItemCount() {
            return listData.size()+1;
        }
    }

    private class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;
        public MyViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textItem);
        }
    }

    private class FootViewHolder extends RecyclerView.ViewHolder{
        private ContentLoadingProgressBar progressBar;
        public FootViewHolder(View itemView) {
            super(itemView);
            progressBar=itemView.findViewById(R.id.pb_progress);
        }
    }
分析:

显示部分分成两部分,
一部分是正常的显示内容,
另一部分就是滑到底端的ProgressBar。
所以应该给RecyclerView增加一个progressBar作为footer。当然这里也不一定是progressbar作为footer,具体是什么View可以由你自己定义。

由于手动给RecyclerView增加了一个Footer所以,recyclerview显示的item个数就得+1.

        @Override
        public int getItemCount() {
            return listData.size()+1;//listData是数据源
        }

当recyclerview滑动到最低端时要给他添加一个底部的footer。所以要设置两个viewHolder,一个是正常的内容,另一个是滑动到底端时显示的自定义view

        private final static int TYPE_CONTENT=0;//正常内容
        private final static int TYPE_FOOTER=1;//加载View

        @Override
        public int getItemViewType(int position) {
            if (position==listData.size()){
                return TYPE_FOOTER;//判断滑到最底部时,返回的ViewType为TYPE_CONTENT。
            }
            return TYPE_CONTENT;
        }

recyclerview的onCreateViewHolder中:根据viewType来判断recyclerview应该绑定哪个viewHolder。
这里我们定义两个viewHolder,一个正常加载内容的MyViewHolder(viewTpye==TYPE_CONTENT) ,还有一个当滑动到低端时的FootViewHolder(viewTpye==TYPE_FOOTER) 。

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType==TYPE_FOOTER){
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_foot, parent, false);
                return new FootViewHolder(view);
            }
            else {
                View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_main_item, parent, false);
                MyViewHolder myViewHolder = new MyViewHolder(view);
                return myViewHolder;
            }
        }
自定义ViewHolder的代码
    private class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;
        public MyViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textItem);
        }
    }

    private class FootViewHolder extends RecyclerView.ViewHolder{
        private ContentLoadingProgressBar progressBar;
        public FootViewHolder(View itemView) {
            super(itemView);
            progressBar=itemView.findViewById(R.id.pb_progress);
        }
    }
activity_main_item.xml
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardElevation="2dp"
    android:layout_margin="5dp"
    tools:context="app.com.swiperefreshlayout.activity.MainActivity">
    <TextView
        android:id="@+id/textItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="45dp"
        android:text=""
        android:gravity="center"/>
</android.support.v7.widget.CardView>
activity_main_foot.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.widget.ContentLoadingProgressBar
        android:id="@+id/pb_progress"
        style="?android:attr/progressBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />
</LinearLayout>
剩下的在onBindViewHolder中进行绑定操作就好了
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            if (getItemViewType(position)==TYPE_FOOTER){
                //可以进行操作
            }
            else{
                MyViewHolder viewHolder= (MyViewHolder) holder;
                viewHolder.textView.setText("第" + position + "行");
            }
        }

上拉加载的Listener

下拉刷新时用的SwipeRefreshLayout的OnRefreshListener()接口。
而recyclerview没有上拉加载接口,这里我们可以自己定义一个。

RecyclerView.OnScrollListener()有两个重写方法,一个是onScrolled另一个是onScrollStateChanged我们先来分析一下这两个方法。

onScrollStateChanged:
onScrollStateChanged.png

源码中显示的newState是更新滑动否的状态值。有三个值,
SCROLL_STATE_DRAGGING:拖拽(Recyclerview滑动时返回的状态值)
SCROLL_STATE_SETTLING:停止(Recyclerview停止时返回的状态值,此时手指已经离开屏幕但是recyclerview可能由于惯性依然在滑动)
SCROLL_STATE_IDLE:空闲(Recyclerview空闲时返回的状态值,recyclerview完全停止)

onScrolled:
onScrolled.png

看源码得知,这个方法是recyclerview滑动时调用的方法。dx是水平滑动时的距离,dy是垂直滑动时的距离。

重写OnScrollListener

知道了这两个方法以及参数的作用。我们就要重写滑动接口。
如下图所示:

/**
 * @作者JTL.
 * @日期2017/12/1.
 * @说明:加载更多Listener
 */

public abstract class onLoadMoreListener extends RecyclerView.OnScrollListener {
    private int countItem;
    private int lastItem;
    private boolean isScolled = false;//是否可以滑动
    private RecyclerView.LayoutManager layoutManager;

    /**
     * 加载回调方法
     * @param countItem 总数量
     * @param lastItem  最后显示的position
     */
    protected abstract void onLoading(int countItem, int lastItem);

    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
     /* 测试这三个参数的作用
        if (newState==SCROLL_STATE_IDLE){
            Log.d("test","SCROLL_STATE_IDLE,空闲");
        }
        else if (newState==SCROLL_STATE_DRAGGING){
            Log.d("test","SCROLL_STATE_DRAGGING,拖拽");
        }
        else if (newState==SCROLL_STATE_SETTLING){
            Log.d("test","SCROLL_STATE_SETTLING,固定");
        }
        else{
            Log.d("test","其它");
        }*/
        //拖拽或者惯性滑动时isScolled设置为true
        if (newState == SCROLL_STATE_DRAGGING || newState == SCROLL_STATE_SETTLING) {
            isScolled = true;
        } else {
            isScolled = false;
        }

    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        if (recyclerView.getLayoutManager() instanceof LinearLayoutManager) {
            layoutManager = recyclerView.getLayoutManager();
            countItem = layoutManager.getItemCount();
            lastItem = ((LinearLayoutManager) layoutManager).findLastCompletelyVisibleItemPosition();
        }
        if (isScolled && countItem != lastItem && lastItem == countItem - 1) {
            onLoading(countItem, lastItem);
        }
    }
}

调用onLoadMoreListener:

写完这个类之后,我们就可以直接在Activity中调用了。

        recyclerView.addOnScrollListener(new onLoadMoreListener() {
            @Override
            protected void onLoading(int countItem,int lastItem) {
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        getData("loadMore");
                    }
                },1000);
            }
        });

下面上两张Gif图看下效果


refresh.gif
loadmore.gif

这样一个简单的下拉加载以及上拉自动刷新就ok了。
有问题的希望大家一起讨论。喜欢的点个喜欢也算是给我的一点小动力。感谢,哈哈!

Demo地址:https://github.com/13046434521/loadMoreDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容