iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android ListView下拉刷新上拉自动加载更多DEMO示例
  • 134
分享到

Android ListView下拉刷新上拉自动加载更多DEMO示例

自动listviewdemoAndroid 2022-06-06 08:06:10 134人浏览 薄情痞子
摘要

代码下载地址已经更新。因为代码很久没更新,已经很落伍了,建议大家使用RecyclerView实现。 参考项目: https://GitHub.com/binGoogolapp

代码下载地址已经更新。因为代码很久没更新,已经很落伍了,建议大家使用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,用来定义和提供加载数据的方法,具体实现则交给它们的实现类去做。


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; 
 
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(); 
} 
 
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最外层必须使用线性布局,不然的话会出错。

以上所述是小编给大家介绍的Android ListView下拉刷新上拉自动加载更多DEMO示例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程网网站的支持!

您可能感兴趣的文章:Android下拉刷新ListView——RTPullListView(demo)android开发教程之实现listview下拉刷新和上拉刷新效果Android实现上拉加载更多以及下拉刷新功能(ListView)android下拉刷新ListView的介绍和实现代码Android ListView实现上拉加载更多和下拉刷新功能Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案Android实现Listview异步加载网络图片并动态更新的方法安卓(Android)ListView 显示图片文字Android Listview 滑动过程中提示图片重复错乱的原因及解决方法Android ListView实现下拉顶部图片变大效果


--结束END--

本文标题: Android ListView下拉刷新上拉自动加载更多DEMO示例

本文链接: https://www.lsjlt.com/news/24707.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android自定义ListView实现下拉刷新上拉加载更多
    目录1、创建刷新控件1.1、创建头部View1.2、下拉事件1.3、接口回调2、上拉加载更多2.1、底部样式2.2、布局添加Listview现在用的很少了,基本都是使用Recycle...
    99+
    2024-04-02
  • Flutter listview如何实现下拉刷新上拉加载更多功能
    目录下拉刷新 RefreshIndicator 上拉加载更多 总结:下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式...
    99+
    2024-04-02
  • Flutter实现下拉刷新和上拉加载更多
    本文实例为大家分享了Flutter实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 效果 下拉刷新 如果实现下拉刷新,必须借助RefreshIndicator,在li...
    99+
    2024-04-02
  • Flutter中怎么利用listview实现下拉刷新上拉加载更多功能
    这期内容当中小编将会给大家带来有关Flutter中怎么利用listview实现下拉刷新上拉加载更多功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。下拉刷新在Flutter中系统已经为我们提供了googl...
    99+
    2023-06-20
  • 原生js实现下拉刷新和上拉加载更多
    本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: t...
    99+
    2024-04-02
  • vue2.0中移动端如何实现下拉刷新和上拉加载更多
    这篇文章主要介绍了vue2.0中移动端如何实现下拉刷新和上拉加载更多,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。示例<templat...
    99+
    2024-04-02
  • 原生js怎么实现下拉刷新和上拉加载更多
    本篇文章为大家展示了原生js怎么实现下拉刷新和上拉加载更多,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器...
    99+
    2023-06-26
  • H5基于iScroll如何实现下拉刷新和上拉加载更多
    这篇文章将为大家详细讲解有关H5基于iScroll如何实现下拉刷新和上拉加载更多,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言   &n...
    99+
    2024-04-02
  • 微信小程序怎么实现下拉刷新和上拉加载更多
    微信小程序可以通过使用onPullDownRefresh和onReachBottom两个方法来实现下拉刷新和上拉加载更多的功能。 ...
    99+
    2024-04-03
    微信小程序
  • vue基于vant实现上拉加载下拉刷新的示例代码
    前言 普遍存在于各种app中的上拉加载下拉刷新功能大家都不陌生吧,一般来说,在数据量比较大的情况下,为了更快的渲染和给用户更好的观感体验,我们会将数据做分页处理,让其批量加载,这样一...
    99+
    2024-04-02
  • 微信小程序中下拉刷新及上拉加载的示例分析
    小编给大家分享一下微信小程序中下拉刷新及上拉加载的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.下拉刷新的概念及应用...
    99+
    2024-04-02
  • Android如何通过XListView实现上拉加载下拉刷新功能
    小编给大家分享一下Android如何通过XListView实现上拉加载下拉刷新功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下## 导入XListVIew第三方库文件。通过LinkedList将刷新...
    99+
    2023-05-30
  • 小程序怎么实现上拉刷新下拉加载
    这篇文章主要介绍“小程序怎么实现上拉刷新下拉加载”,在日常操作中,相信很多人在小程序怎么实现上拉刷新下拉加载问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序怎么实现上拉刷新下拉加载”的疑惑有所帮助!接下来...
    99+
    2023-06-26
  • React Native如何自定义下拉刷新上拉加载的列表
    小编给大家分享一下React Native如何自定义下拉刷新上拉加载的列表,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在移动端...
    99+
    2024-04-02
  • MUI如何实现上拉刷新/下拉加载功能
    小编给大家分享一下MUI如何实现上拉刷新/下拉加载功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!新闻信息列表必备的功能,支持...
    99+
    2024-04-02
  • uniapp实现下拉刷新与上拉触底加载功能的示例代码
    目录下拉刷新上拉触底加载 完整demo 效果 下拉刷新 这个用于监听该页面用户下拉刷新事件。 首先在pages.json中需要下拉刷新的页面,在styl...
    99+
    2023-05-16
    uniapp实现下拉刷新 uniapp实现上拉触底加载 uniapp下拉刷新 uniapp上拉加载
  • dropload.js插件下拉刷新和上拉加载怎么用
    小编给大家分享一下dropload.js插件下拉刷新和上拉加载怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下第...
    99+
    2024-04-02
  • 基于vue封装下拉刷新上拉加载组件
    基于vue和原生javascript封装的下拉刷新上拉加载组件,供大家参考,具体内容如下 upTilte插槽是下拉刷新的自定义内容放的地方 downTilte插槽是...
    99+
    2024-04-02
  • 在android应用中怎么添加一个上拉刷新下拉加载功能
    在android应用中怎么添加一个上拉刷新下拉加载功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。下拉刷新首先我们给出如下几个参数,后面要用:  pr...
    99+
    2023-05-31
    android roi
  • Flutter 给列表增加下拉刷新和上滑加载更多功能
    目录有状态组件 异步 async/await 引入 flutter_easyrefresh 使用 flutter_easyrefresh运行结果 结语 有状态组件 当 Flutte...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作