ListView下拉刷新，上拉自动加载更多

下拉刷新，Android中非常普遍的功能。为了方便便重写的ListView来实现下拉刷新，同时添加了上拉自动加载更多的功能。设计最初是参考开源中国的Android客户端源码。先看示例图。

        

图1                                                                                                             图2

        

图3                    
                                                                       
               图4

         

图5                    
                                                                       
          图6

下拉刷新的时动画效果: 图1 ==》 图2 ==》 图3 ==》 图4 ==》 图1。

上拉自动加载更多的效果：图5

图6是示例demo的截图

重写后的listview动画效果来源于添加的头部（header）和尾部（footer），listview提供了addHeaderView和
addFooterView方法来添加header和footer。大家也可以通过修改头部、尾部的xml文件来定义自己的动画效果。

实现原理

1.下拉刷新

通过onTouchEvent判断手势，来改变listview的header。header的状态共4种，自己定义为：

NONE（对应图1）：初始状态

PULL（对应图2）：下拉状态，此时松开会还原到状态NONE，并不进行刷新

RELEASE（对应图3）：同样是下拉状态，但此刻松开会执行刷新，进入状态REFRESHING

REFRESHING（对应图4）：正在执行刷新，刷新结束后进入状态NONE。

header在四种状态切换时不仅改变内部组件，同时改变自身的大小。改变内部组件的体现比如，箭头的朝上或者朝下，文字提示的变化，等待圆圈的显示与
否。大小的改变其实就是高度的改变，NONE时header高度为0,RELEASE时header的高度由你下拉的程度决定。

2.加载更多

在listview滑动停止后，判断listview的最后一个item是否已经显示，如果显示说明listview已经滑动到了最底部，这时便触发加载更多的方法，方法结束根据结果改变footer。

3.回调方法

在类中定义了两个接口OnRefreshListener和OnLoadListener，用来定义和提供加载数据的方法，具体实现则交给它们的实现类去做。

示例代码

AutoListView.java

package com.example.autolistview.widget;

import com.example.autolistview.R;
import com.example.autolistview.utils.Utils;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.AbsListView;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ListView;

/**
 * @author SunnyCoffee
 * @create 2013-10-24
 * @version 1.0
 * @desc 自定义Listview　下拉刷新,上拉加载更多
 */

public class AutoListView extends ListView implements OnScrollListener {

    // 区分当前操作是刷新还是加载
    public static final int REFRESH = 0;
    public static final int LOAD = 1;

    // 区分PULL和RELEASE的距离的大小
    private static final int SPACE = 20;

    // 定义header的四种状态和当前状态
    private static final int NONE = 0;
    private static final int PULL = 1;
    private static final int RELEASE = 2;
    private static final int REFRESHING = 3;
    private int state;

    private LayoutInflater inflater;
    private View header;
    private View footer;
    private TextView tip;
    private TextView lastUpdate;
    private ImageView arrow;
    private ProgressBar refreshing;

    private TextView noData;
    private TextView loadFull;
    private TextView more;
    private ProgressBar loading;

    private RotateAnimation animation;
    private RotateAnimation reverseAnimation;

    private int startY;

    private int firstVisibleItem;
    private int scrollState;
    private int headerContentInitialHeight;
    private int headerContentHeight;

    // 只有在listview第一个item显示的时候（listview滑到了顶部）才进行下拉刷新， 否则此时的下拉只是滑动listview
    private boolean isRecorded;
    private boolean isLoading;// 判断是否正在加载
    private boolean loadEnable = true;// 开启或者关闭加载更多功能
    private boolean isLoadFull;
    private int pageSize = 10;

    private OnRefreshListener onRefreshListener;
    private OnLoadListener onLoadListener;

    public AutoListView(Context context) {
        super(context);
        initView(context);
    }

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

    public AutoListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView(context);
    }

    // 下拉刷新监听
    public void setOnRefreshListener(OnRefreshListener onRefreshListener) {
        this.onRefreshListener = onRefreshListener;
    }

    // 加载更多监听
    public void setOnLoadListener(OnLoadListener onLoadListener) {
        this.loadEnable = true;
        this.onLoadListener = onLoadListener;
    }

    public boolean isLoadEnable() {
        return loadEnable;
    }

    // 这里的开启或者关闭加载更多，并不支持动态调整
    public void setLoadEnable(boolean loadEnable) {
        this.loadEnable = loadEnable;
        this.removeFooterView(footer);
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    // 初始化组件
    private void initView(Context context) {

        // 设置箭头特效
        animation = new RotateAnimation(0, -180,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        animation.setInterpolator(new LinearInterpolator());
        animation.setDuration(100);
        animation.setFillAfter(true);

        reverseAnimation = new RotateAnimation(-180, 0,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        reverseAnimation.setInterpolator(new LinearInterpolator());
        reverseAnimation.setDuration(100);
        reverseAnimation.setFillAfter(true);

        inflater = LayoutInflater.from(context);
        footer = inflater.inflate(R.layout.listview_footer, null);
        loadFull = (TextView) footer.findViewById(R.id.loadFull);
        noData = (TextView) footer.findViewById(R.id.noData);
        more = (TextView) footer.findViewById(R.id.more);
        loading = (ProgressBar) footer.findViewById(R.id.loading);

        header = inflater.inflate(R.layout.pull_to_refresh_header, null);
        arrow = (ImageView) header.findViewById(R.id.arrow);
        tip = (TextView) header.findViewById(R.id.tip);
        lastUpdate = (TextView) header.findViewById(R.id.lastUpdate);
        refreshing = (ProgressBar) header.findViewById(R.id.refreshing);

        // 为listview添加头部和尾部，并进行初始化
        headerContentInitialHeight = header.getPaddingTop();
        measureView(header);
        headerContentHeight = header.getMeasuredHeight();
        topPadding(-headerContentHeight);
        this.addHeaderView(header);
        this.addFooterView(footer);
        this.setOnScrollListener(this);
    }

    public void onRefresh() {
        if (onRefreshListener != null) {
            onRefreshListener.onRefresh();
        }
    }

    public void onLoad() {
        if (onLoadListener != null) {
            onLoadListener.onLoad();
        }
    }

    public void onRefreshComplete(String updateTime) {
        lastUpdate.setText(this.getContext().getString(R.string.lastUpdateTime,
                lastUpdate));
        state = NONE;
        refreshHeaderViewByState();
    }

    // 用于下拉刷新结束后的回调
    public void onRefreshComplete() {
        String currentTime = Utils.getCurrentTime();
        onRefreshComplete(currentTime);
    }

    // 用于加载更多结束后的回调
    public void onLoadComplete() {
        isLoading = false;
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        this.firstVisibleItem = firstVisibleItem;
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        this.scrollState = scrollState;
        ifNeedLoad(view, scrollState);
    }

    // 根据listview滑动的状态判断是否需要加载更多
    private void ifNeedLoad(AbsListView view, int scrollState) {
        if (!loadEnable) {
            return;
        }
        try {
            if (scrollState == OnScrollListener.SCROLL_STATE_IDLE
                    && !isLoading
                    && view.getLastVisiblePosition() == view
                            .getPositionForView(footer) && !isLoadFull) {
                onLoad();
                isLoading = true;
            }
        } catch (Exception e) {
        }
    }

    /**
     * 监听触摸事件，解读手势
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (firstVisibleItem == 0) {
                isRecorded = true;
                startY = (int) ev.getY();
            }
            break;
        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP:
            if (state == PULL) {
                state = NONE;
                refreshHeaderViewByState();
            } else if (state == RELEASE) {
                state = REFRESHING;
                refreshHeaderViewByState();
                onRefresh();
            }
            isRecorded = false;
            break;
        case MotionEvent.ACTION_MOVE:
            whenMove(ev);
            break;
        }
        return super.onTouchEvent(ev);
    }

    // 解读手势，刷新header状态
    private void whenMove(MotionEvent ev) {
        if (!isRecorded) {
            return;
        }
        int tmpY = (int) ev.getY();
        int space = tmpY - startY;
        int topPadding = space - headerContentHeight;
        switch (state) {
        case NONE:
            if (space > 0) {
                state = PULL;
                refreshHeaderViewByState();
            }
            break;
        case PULL:
            topPadding(topPadding);
            if (scrollState == SCROLL_STATE_TOUCH_SCROLL
                    && space > headerContentHeight + SPACE) {
                state = RELEASE;
                refreshHeaderViewByState();
            }
            break;
        case RELEASE:
            topPadding(topPadding);
            if (space > 0 && space < headerContentHeight + SPACE) {
                state = PULL;
                refreshHeaderViewByState();
            } else if (space <= 0) {
                state = NONE;
                refreshHeaderViewByState();
            }
            break;
        }

    }

    // 调整header的大小。其实调整的只是距离顶部的高度。
    private void topPadding(int topPadding) {
        header.setPadding(header.getPaddingLeft(), topPadding,
                header.getPaddingRight(), header.getPaddingBottom());
        header.invalidate();
    }

    /**
     * 这个方法是根据结果的大小来决定footer显示的。
     * <p>
     * 这里假定每次请求的条数为10。如果请求到了10条。则认为还有数据。如过结果不足10条，则认为数据已经全部加载，这时footer显示已经全部加载
     * </p>
     *
     * @param resultSize
     */
    public void setResultSize(int resultSize) {
        if (resultSize == 0) {
            isLoadFull = true;
            loadFull.setVisibility(View.GONE);
            loading.setVisibility(View.GONE);
            more.setVisibility(View.GONE);
            noData.setVisibility(View.VISIBLE);
        } else if (resultSize > 0 && resultSize < pageSize) {
            isLoadFull = true;
            loadFull.setVisibility(View.VISIBLE);
            loading.setVisibility(View.GONE);
            more.setVisibility(View.GONE);
            noData.setVisibility(View.GONE);
        } else if (resultSize == pageSize) {
            isLoadFull = false;
            loadFull.setVisibility(View.GONE);
            loading.setVisibility(View.VISIBLE);
            more.setVisibility(View.VISIBLE);
            noData.setVisibility(View.GONE);
        }

    }

    // 根据当前状态，调整header
    private void refreshHeaderViewByState() {
        switch (state) {
        case NONE:
            topPadding(-headerContentHeight);
            tip.setText(R.string.pull_to_refresh);
            refreshing.setVisibility(View.GONE);
            arrow.clearAnimation();
            arrow.setImageResource(R.drawable.pull_to_refresh_arrow);
            break;
        case PULL:
            arrow.setVisibility(View.VISIBLE);
            tip.setVisibility(View.VISIBLE);
            lastUpdate.setVisibility(View.VISIBLE);
            refreshing.setVisibility(View.GONE);
            tip.setText(R.string.pull_to_refresh);
            arrow.clearAnimation();
            arrow.setAnimation(reverseAnimation);
            break;
        case RELEASE:
            arrow.setVisibility(View.VISIBLE);
            tip.setVisibility(View.VISIBLE);
            lastUpdate.setVisibility(View.VISIBLE);
            refreshing.setVisibility(View.GONE);
            tip.setText(R.string.pull_to_refresh);
            tip.setText(R.string.release_to_refresh);
            arrow.clearAnimation();
            arrow.setAnimation(animation);
            break;
        case REFRESHING:
            topPadding(headerContentInitialHeight);
            refreshing.setVisibility(View.VISIBLE);
            arrow.clearAnimation();
            arrow.setVisibility(View.GONE);
            tip.setVisibility(View.GONE);
            lastUpdate.setVisibility(View.GONE);
            break;
        }
    }

    // 用来计算header大小的。比较隐晦。
    private void measureView(View child) {
        ViewGroup.LayoutParams p = child.getLayoutParams();
        if (p == null) {
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width);
        int lpHeight = p.height;
        int childHeightSpec;
        if (lpHeight > 0) {
            childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,
                    MeasureSpec.EXACTLY);
        } else {
            childHeightSpec = MeasureSpec.makeMeasureSpec(0,
                    MeasureSpec.UNSPECIFIED);
        }
        child.measure(childWidthSpec, childHeightSpec);
    }

    /*
     * 定义下拉刷新接口
     */
    public interface OnRefreshListener {
        public void onRefresh();
    }

    /*
     * 定义加载更多接口
     */
    public interface OnLoadListener {
        public void onLoad();
    }

}

这个类的逻辑复杂的地方就是header四种状态的判断和切换。

以下是几种状态的切换情况

NONE   ==》 PULL

NONE 《==   PULL   ==》 RELEASE

PULL 《==   RELEASE   ==》 REFRESHING

REFRESHING   ==》 NONE

代码中对于 RELEASE  ==》PULL 状态的切换处理的不太理想，好像是纵坐标的记录方式有问题，如果有谁解决，希望能够留言告知。

为了减少篇幅，其他代码就不在贴了。

注意：定义header的xml最外层必须使用线性布局，不然的话会出错。

测试代码：点击下载（eclipse工程项目，编码UTF-8）。由于代码涉及公司项目，所以提供的demo是自己新写的。如图6所示。

本篇会持续更新。

时间： 2024-10-03 14:02:11

ListView下拉刷新，上拉自动加载更多的相关文章

android ListView的上部下拉刷新下部点击加载更多具体实现及拓展

转自:http://blog.csdn.net/jj120522/article/details/8229423 这次就不上图了,例子太多太多了,想必大家都见过.这个功能的实现,简直是开发者必备的. 我也不过多介绍了,网上详细介绍的博客太多太多了,若想深入了解,请参考网上其他博文. 在这里,我只是按照自己的理解,模拟实现了一个,顺便代码贡献出来. 我对之详细标明的注释,想必如果不懂的同学们,看注释也应该明白,前提是,你要耐心看,因为代码有点多,但是我整理过了,还算清晰. 详细代码: [java]

探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多

在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个基础上进行改写.今天尝试一下使用SwipeRefreshLayout配合自定义ListView实现下拉刷新.滑到底部自动加载更多的功能. 效果图如下所示,在进入页面的时候加载自动刷新,滑到底部自动加载更多,当数据已经加载完成则显示已经加载完成,,否则上拉任可继续加载 先贴一下项目结构图吧,这样可能对

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

在实际开发中,为了节省开发周期,下拉刷新上拉加载通常都会采取使用一些第三方库,典型的就是用PullToRefresh,XListView等等,还有就是谷歌推荐的SwipeRefreshLayout,可惜没有上拉加载功能,需要自己去实现一个上拉加载的脚View,再加上现在代替ListView的RecyclerView+CardView使用的频率也是也来也高,不得不说,CardView效果确实很好看,一个一个的小卡片,用户体验好,I like it!!!废话不说了,奔主题!今天也玩了一下SwipeR

安卓listView实现下拉刷新上拉加载滑动仿QQ的删除功能

大家对这些功能都是看的多了,然后对上拉刷新和下拉加载的原理都是非常清楚的,所以实现这功能其实也就是为了让大家能够从众多的同行们来进行比较学习而已,虽然即使是这样,但是面试的时候面试官还是会问你上拉和下拉是怎么实现的,滑动删除功能是怎么实现,其实要实现这些功能又不是唯一的方法,但是基本上思想都是一致的.然后gitup上的这些例子是非常的多,然后实现的也是大同小异但是也不能不让我们去球童存异.作为天朝的程序员即使是一个伸手党也不必太觉得羞耻,能把别人的东西来改一改或者沿用别人的思想来模仿也是不错的.

ListView的下拉刷新上拉加载以及带列的横向滚动

相信有很人做的项目估计都用的到这个.就是ListView的下拉刷新上拉加载还有就是列的横向滚动; PS:横向滚动带表头与固定列(相信蛮多人都有这样的需求吧?就是在ListView上支持很多列,然而设备屏幕宽度有限) PS:这是我个人在网上找的两个示例demo结合而成的一个示例demo,还可以继续拓展,后续有时间就会更新,大家互相学习 ListView下拉刷新上拉加载示例demo原文出处: http://blog.csdn.net/limb99/article/details/18901513 L

重写ListView实现下拉刷新上拉加载

安卓本身的ListView没有刷新功能,要想实现这一功能,就得继承ListView并重写它的方法.同时也要实现其OnScrollListener这一接口. 下拉刷新,需要在原本的ListView上部添加一个Head,ListView本身提供了addHeadView()这一方法,但是没有实现刷新的功能,我们可以自定义Head的内容,并加上刷新的功能. 上拉加载更多数据与下拉刷新类似,是在ListView的下部添加一个Footer.具体实现代码如下: import java.text.SimpleD

react-native ListView 封装 实现 下拉刷新/上拉加载更多

1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Component } from 'react'; import { Text, View, ListView, FlatList, Dimensions, PanResponder, Animated, Easing, ActivityIndicator, } from 'react-native';

retrofit+rxjava+recyclerview+下拉刷新+自动加载更多

安卓开发过程中,网络请求与下拉刷新分页列表的控件几乎可以说是必不可少的,但是每次开发一款产品都要重新开发,肯定是不可取的,那么最好是可以自己整理一个开发框架,那么以后开发,直接引入项目即可 网络框架的封装,从httpclient,到xutils,再到volley,再到okhttp,每次整合都发现多多少少的不足,目前自己觉得最成熟的一个也就是retrofit+okhttp3+rxjava的组合,rxjava不懂的推荐看大神的深入浅出rxjava,retrofit的使用自己网上搜咯 下拉刷新列表的实

自定义ListView_下拉刷新上拉加载更多

自定义ListView实现下拉刷新和上拉自动加载 效果图: 下拉效果: 上拉效果: 实现原理:通过ListView的addFooter与addHeader方法,将下拉布局与上拉布局添加到ListView中,再通过设置padding属性,隐藏头部和脚部 监听onTouchEvent事件,根据手势滑动距离,动态更改下拉布局的padding,并动态更改头布局内控件效果 监听onScrollStateChanged,动态显示隐藏脚布局 设置回调,提供下拉刷新与加载更多的方法 PullListView.j