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

最新推荐文章于 2024-06-05 07:15:00 发布
最新推荐文章于 2024-06-05 07:15:00 发布
阅读量6.6w 收藏 82
点赞数 15
分类专栏： android 文章标签： Android listview 下拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limb99/article/details/18901513
版权

更新2016-2-19

代码下载地址已经更新。因为代码很久没更新，已经很落伍了，建议大家使用RecyclerView实现。

参考项目：

https://github.com/bingoogolapple/BGARefreshLayout-Android

https://github.com/baoyongzhang/android-PullRefreshLayout


下拉刷新，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所示。

本篇会持续更新。

SunnyCoffee
关注
  • 15
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 51
    评论
专栏目录
HarmonyOS NEXT应用开发之下拉刷新与上滑加载案例_harmonyos arkts pull-to-refresh(1)
2401_83946826的博客
04-09 912
483)]
ListView下拉刷新上拉加载的实现与使用
qq_35201868的博客
05-19 314
ListView上拉加载下拉刷新记录 声明：本文是借鉴别人的博客，不算是原创，主要用于记录与学习。 一、理论分析： 整个过程可分为两大部分：下拉刷新与上拉加载。 1、下拉刷新： 下拉刷新可归纳为三个状态： 下拉刷新：在此种状态下，通过监控用户的手势指令来进行判断，当ListView的第一个item可见时，用户向下拉ListView的头部视图可见到全部可见之间的过程都为下拉刷新状态。
鸿蒙api11 下拉刷新和加载更多demo
02-29
鸿蒙api11 下拉刷新和加载更多demo
纯血鸿蒙实战开发—如何添加下拉刷新组件PullToRefresh
m0_70749039的博客
06-04 646
【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
最新发布
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
鸿蒙实战开发教程-如何实现上拉加载和下拉刷新
m0_70749039的博客
05-08 1194
本文介绍的是一个优秀的第三方库PullToRefresh，并使用它实现列表的上拉加载和下拉刷新。
PullToRefresh一些实用的用法
万物weiyi
07-29 361
PullToRefresh 之应用 PullToRefresh是一套实现非常好的下拉刷新库，它支持： 1.ListView2.ExpandableListView3.GridView4.WebView等多种常用的需要刷新的View类型，而且使用起来也十分方便。 原理：在View中有一个scrollTo方法，可以将整个View移动到指定的位置，PullToRefresh就是重写了onTouchEven
vue下拉自动刷新 上拉加载更多
Fan Ruitian的博客
07-04 9861
组件：vue-scrollergit：https://github.com/wangdahoo/vue-scrollerdemo：https://wangdahoo.github.io/vue-scroller/#/customSpinner下载链接：https://unpkg.com/vue@2.1.10/dist/vue.min.jshttps://unpkg.com/vue-scroller...
Android ListView下拉刷新上拉自动加载更多DEMO示例
09-02
首先，下拉刷新功能允许用户在顶部下拉列表时触发数据的更新，而上拉加载更多则是当用户滚动到底部时自动加载新的数据。这两种特性在很多应用中非常常见，例如社交媒体应用、新闻阅读器等。 要实现下拉刷新，我们...
Android中Listview下拉刷新和上拉加载更多的多种实现方案
08-31
然而，为了提供更好的用户体验，通常需要在ListView中实现下拉刷新（Pull-to-Refresh）和上拉加载更多（Load More）的功能。以下是三种在Android中实现这些功能的方案。 ### 方案一：添加头布局和脚布局 这种方法...
自定义listView下拉刷新上拉加载更多
10-27
总结起来，自定义ListView下拉刷新和上拉加载更多是提升Android应用性能和用户体验的重要手段。通过自定义组件，开发者可以灵活地设计交互和视觉效果，更好地匹配应用的整体设计。理解并掌握这种自定义实现方法对于...
Flutter ListView 上拉加载更多下拉刷新功能实现方法
08-25
Flutter ListView 上拉加载更多下拉刷新功能实现方法 Flutter ListView 是一个非常常用的控件，它可以用来展示列表数据。在实际开发中，我们经常需要实现上拉加载更多和下拉刷新的功能，以提高用户体验。下面我们...
鸿蒙Harmony ArkUI十大开源项目
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
12-04 7836
【OH哔哩】是一款基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端。
如何安装鸿蒙Harmony 低版API 9 三方库
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
11-30 1190
然后查看pulltorefresh 最新版对应Harmony API10,然而我的手机是API9,所以必须找到API9的库，然后查看2.0.1是还是API9。执行后发现无需卸载新版，直接覆盖，运行项目没问题了。然后运行报错,说没有isAtEnd方法。比如我要用下拉刷新三方库。
HarmonyOS NEXT下拉刷新与上滑加载案例_鸿蒙系统怎么制作下拉页面等待加载(2)
2301_79054215的博客
04-09 664
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
HarmonyOS NEXT下拉刷新与上滑加载案例_鸿蒙系统怎么制作下拉页面等待加载(1)
2301_79054215的博客
04-09 859
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
HarmonyOS NEXT应用开发之下拉刷新与上滑加载案例
maniuT的博客
03-13 845
本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。
鸿蒙开发 - ohpm安装第三方库
SSY_1992的博客
12-12 5613
前端开发难免使用第三方库，鸿蒙亦是如此，在使用 DevEco Studio 开发工具时，如何引入第三方库呢？
HarmonyOS NEXT 使用timeline时间轴下拉刷新效果
shudaoshanQAQ的博客
05-06 680
本示例使用了onScroll回调监听接口.........
评论 51
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值