Android PullToRefresh下拉刷新,上拉加载的使用详解（转）

最新推荐文章于 2023-12-12 22:32:21 发布

qq_33313436

最新推荐文章于 2023-12-12 22:32:21 发布

阅读量294

点赞数

文章标签： android android开发开源下拉刷新下拉加载

在Android开发中下拉刷新,上拉加载这个功能是一般商业应用的App中必不可少的一个功能效果。但是对于新手来说，自定义下拉刷新的ListView可能还是会遇到很多的问题。而对于要快速开发的公司来说,可能时间又比较紧张。那么这时候我们就要用到一个开源控件Android-PullToRefresh了。这个开源控件是一款非常优秀的开源控件，可以直接从Github上下载下来直接使用。下载链接地址：https://github.com/chrisbanes/Android-PullToRefresh

使用步骤：

1.进入github上下载PullToRefresh的开源代码和引用包，如下图

2.下载下来解压后，我们会发现里面有extras，library，sample这三个包。这三个包中，我们主要用到的是library这个包。将libarary这个包导入我们的eclipse中，导入后右击该工程找到Properties后点击进入，讲依赖选项勾上用于我们开发工程去使用。如下图：

3.然后，在你要开发的工程中已同样的方式进入，点击Add进行库的依赖。如下图：

做完以上步骤后，我们就可以在项目中使用这个控件了。

在使用之前，我们首先来了解下这个控件里面的一些基本属性：

1.ptr是pullToRefresh的配置属性中添加 xmlns:ptr="http://schemas.android.com/apk/res-auto"。

2.ptr:ptrDrawable="";//这里可以设置自己的上拉下拉图标。

3.ptr:ptrHeaderBackground="";//上拉时底部的背景色，下拉时头部的背景色

4.ptr:ptrHeaderTextColor="";//上拉，下拉时Header,Footer显示的字体颜色

5.ptr:ptrHeaderSubTextColor="";//上拉,下拉Header,Footer中上次刷新时间的颜色

6.ptr:ptrShowIndicator="";//true时会在控件的右上角和右下角出现设置的icon

7.ptr:ptrAnimationStyle="";//显示时候图标的取值；flip:翻转；rotate:旋转

8.ptr:ptrRotateDrawableWhilePulling="";//当动画为rotate时,下拉是否旋转

9.ptr:ptrRefreshableViewBackground="";//设置整个控件布局的背景颜色

10.ptr:ptrScrollingWhileRefreshingEnabled="";//刷新的时候是否允许ListView或者GridView滚动。推荐使用true

11.ptr:prtListViewExtrasEnabled="";//决定Header,Footer以何种方式加入PullToRefreshListView.其中为true时,就是以Header的方式加入,在滚动刷新时头部会跟着一起滚动;为false时,就是以Footer的方式加入,在滚动的时候底部会跟着一起滚动。

12.ptr:ptrMode="";//设置是上拉,下拉还是两者都支持.both:两者都支持;disabled:禁用下拉刷新;pullFromStart:仅支持下拉刷新;pullFromEnd:仅支持上拉刷新;manualOnly:只允许手动触发。（注意：如果不在代码设置它默认的就只有下拉刷新）

以上只是一些基本属性：一般你用的什么控件它都包含原有控件的所有属性，如你使用的是PullToRefreshListView那么它里面同样包含ListView的一些属性。同样上面的属性你都可以在代码中去set***使用。

1.下面我们简单的来实现ListView的下拉刷新,直接上代码：

布局文件：

[java] view plain copy print ?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.richardli.pulltorefreshdemo.ListViewActivity" >
<com.handmark.pulltorefresh.library.PullToRefreshListView
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:id="@+id/pull_refresh_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#00000000"
android:divider="#50000000"
android:dividerHeight="2dp"
android:smoothScrollbar="true" >
</com.handmark.pulltorefresh.library.PullToRefreshListView>
</RelativeLayout>

Activity代码：

[java] view plain copy print ?

package com.richardli.pulltorefreshdemo;
import java.util.ArrayList;
import java.util.List;
import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener;
import com.handmark.pulltorefresh.library.PullToRefreshListView;
import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ListViewActivity extends Activity {
private PullToRefreshListView pullToListView;
private ArrayAdapter<String> mAdapter;
private List<String> dataList;
private int dataCount = 10;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view);
initView();
}
private void initView() {
pullToListView = (PullToRefreshListView) findViewById(R.id.pull_refresh_list);
initData();
mAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, dataList);
pullToListView.setAdapter(mAdapter);
pullToListView.setOnRefreshListener(new OnRefreshListener<ListView>() {
@Override
public void onRefresh(PullToRefreshBase<ListView> refreshView) {
new GetListDataTask().execute();
}
});
}
/**
* 初始化数据
*/
private void initData() {
dataList = new ArrayList<>();
for (int i = 0; i < dataCount; i++) {
dataList.add("richardli" + i + "\t号");
}
}
/**
* 模拟向服务器获取数据
*
* @author richard
*
*/
private class GetListDataTask extends AsyncTask<Void, Void, String> {
@Override
protected String doInBackground(Void... params) {
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
}
return "" + (dataCount + "这是刷新后的数据");
}
@Override
protected void onPostExecute(String result) {
dataList.add(result);
mAdapter.notifyDataSetChanged();
pullToListView.onRefreshComplete();
}
}
}

由于不太会做Gif动态图,只能贴图片了

,如果有简单并且效果好的工具可以在底下留言告诉博主,所有底下贴的效果图请见谅。

这只是一个简单的下拉刷新,没有设置什么属性，只是简单的实现了一个下拉刷新的监听回调setOnRefreshListener(new OnRefreshListener<?>){}

其中OnRefreshListener<>中放入的是你想实现的原本的控件,这里是用PullToRefreshListView,所以？这里设置的是ListView。

2.既然下拉刷新这么简单的实现了，那么上拉加载呢!无非不就是设置ptr:ptrMode="both"? 但是设置了支持上拉和下拉后,那么只有一个OnRefreshListener,我们如何区分上拉下拉呢！在以前很多前辈里面都是写了各种判断来区分上拉和下拉,但其实这款开源控件中已经给我们留了区分二者的接口。setOnRefreshListener(new OnRefreshListener2<?>){}.这个接口中的onPullDownToRefresh(),onPullToRefresh()2个方法已经为我们提供了我们想要的。我们修改下代码：

布局文件.xml

[java] view plain copy print ?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.richardli.pulltorefreshdemo.ListViewActivity" >
<com.handmark.pulltorefresh.library.PullToRefreshListView
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:id="@+id/pull_refresh_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#00000000"
android:divider="#50000000"
android:dividerHeight="2dp"
android:smoothScrollbar="true"
ptr:ptrMode="both" >
</com.handmark.pulltorefresh.library.PullToRefreshListView>
</RelativeLayout>

Activity代码：

[java] view plain copy print ?

package com.richardli.pulltorefreshdemo;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener2;
import com.handmark.pulltorefresh.library.PullToRefreshListView;
public class ListViewActivity extends Activity {
private PullToRefreshListView pullToListView;
private ArrayAdapter<String> mAdapter;
private List<String> dataList;
Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
mAdapter.notifyDataSetChanged();
pullToListView.onRefreshComplete();
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view);
initView();
}
private void initView() {
pullToListView = (PullToRefreshListView) findViewById(R.id.pull_refresh_list);
initData();
mAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, dataList);
pullToListView.setAdapter(mAdapter);
pullToListView.setOnRefreshListener(new OnRefreshListener2<ListView>() {
@Override
public void onPullDownToRefresh(
PullToRefreshBase<ListView> refreshView) {
pullDownToRefresh();
}
@Override
public void onPullUpToRefresh(
PullToRefreshBase<ListView> refreshView) {
pullUpToRefresh();
}
});
}
/**
* 下拉刷新
*/
private void pullDownToRefresh() {
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(1000);
dataList.clear();
for (int i = 0; i < 5; i++) {
dataList.add("下拉刷新后的数据" + i + "\t号");
}
} catch (InterruptedException e) {
e.printStackTrace();
}
mHandler.sendEmptyMessage(0);
}
}).start();
}
/**
* 上拉加载
*/
private void pullUpToRefresh() {
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(1000);
for (int i = 0; i < 5; i++) {
dataList.add("上拉加载后的数据" + i + "\t号");
}
} catch (InterruptedException e) {
e.printStackTrace();
}
mHandler.sendEmptyMessage(0);
}
}).start();
}
/**
* 初始化数据
*/
private void initData() {
dataList = new ArrayList<>();
for (int i = 0; i < 5; i++) {
dataList.add("richardli" + i + "\t号");
}
}
}

是不是很简单？但是这里有个小问题,如果ListView的页面数据是没有一屏的数据,也就是充满整个屏幕的时候,你上拉后它那FootView就会往上面缩。这里不是BUG,因为在实际开发中，上拉加载的这个效果功能是有一定前提的，我们的ListView拿数据是分页拿的,如果拿下的数据没有充满整个屏幕又或者没有满足开发的需求,这时候是要禁止上拉的...，话题扯远了。

3.那个上拉下拉的时显示的字不是我想要的,那又改如何解决呢！请看下面代码：

[java] view plain copy print ?

private void setPullToRefreshLable() {
// 1:第一种设置 (个人推荐第一种)
ILoadingLayout startLoading = pullToListView.getLoadingLayoutProxy(
true, false);
startLoading.setPullLabel("下拉刷新");// 刚下拉时显示的提示
startLoading.setRefreshingLabel("正在刷新中...");// 刷新时显示的提示
startLoading.setReleaseLabel("释放即可刷新");// 下拉达到一定距离时显示的提示
ILoadingLayout endLoading = pullToListView.getLoadingLayoutProxy(false,
true);
endLoading.setPullLabel("上拉加载更多");// 刚上拉时显示的提示
endLoading.setRefreshingLabel("拼命加载中...");// 加载时的提示
endLoading.setReleaseLabel("释放即可加载更多");// 上拉达到一定距离时显示的提示
// 2:第二种设置
// pullToListView.getLoadingLayoutProxy(true,
// false).setPullLabel("下拉刷新");
// pullToListView.getLoadingLayoutProxy(true, false).setRefreshingLabel(
// "正在刷新中...");
// pullToListView.getLoadingLayoutProxy(true, false).setReleaseLabel(
// "释放即可刷新");
//
// pullToListView.getLoadingLayoutProxy(false, true)
// .setPullLabel("上拉加载更多");
// pullToListView.getLoadingLayoutProxy(false, true).setRefreshingLabel(
// "拼命加载中...");
// pullToListView.getLoadingLayoutProxy(false, true).setReleaseLabel(
// "释放即可加载更多");
}

然后在pullToListView初始化的时候,调用即可。如果,你还想修改字体颜色那么请查看上面的基本属性 ptr:ptrHeaderTextColor="" 。如果你还想修改提示字体的大小,那么抱歉。本人貌似暂时好像还没有发现可以直接在代码里面设置,如果您知道如何设置那么请告知鄙人,谢谢! 不过,你可以在library的layout布局文件下去修改它。

4.可能有些需求在下拉刷新的时候,是要提示最近的刷新时间,那该如何解决呢?请看下面代码:

[java] view plain copy print ?

pullToListView.setOnRefreshListener(new OnRefreshListener2<ListView>() {
@Override
public void onPullDownToRefresh(
PullToRefreshBase<ListView> refreshView) {
// 设置最近刷新时间
String updateTime = DateUtils.formatDateTime(
ListViewActivity.this, System.currentTimeMillis(),
DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_SHOW_DATE
| DateUtils.FORMAT_ABBREV_ALL);
refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(
updateTime);
pullDownToRefresh();
}
@Override
public void onPullUpToRefresh(
PullToRefreshBase<ListView> refreshView) {
pullUpToRefresh();
}
});

5.可能会出现我上面说的一种情况,在开发中我不知道服务器会返回多少数据给我,但我这边是根据页码去取数据的。如果取下来的数据没有满足我去获取下一页的数据的时候，那么我不能让上拉加载出现,只留下下拉刷新,只有当数据满足的时候我才让上拉加载出现。那么这又如何实现呢！

主Activity代码：

[java] view plain copy print ?

package com.richardli.pulltorefreshdemo;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.text.format.DateUtils;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import com.handmark.pulltorefresh.library.ILoadingLayout;
import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener2;
import com.handmark.pulltorefresh.library.PullToRefreshListView;
public class ListViewActivity extends Activity {
private PullToRefreshListView pullToListView;
private ArrayAdapter<String> mAdapter;
private List<String> dataList;
private int size = 0;// 满足10条才会有上拉和下拉,如果不满足则只有下拉
private int pullUpSize = 15;
Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
mAdapter.notifyDataSetChanged();
pullToListView.onRefreshComplete();
if (size == 15) {
// 这里注意,在每次设置View的Mode的后,一定要重新设置顶部，底部的显示文字。不然会出现上拉加载时显示的是下拉刷新的提示语
pullToListView.setMode(Mode.BOTH);
setPullToRefreshLable();
} else {
pullToListView.setMode(Mode.PULL_FROM_START);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view);
initView();
}
private void initView() {
pullToListView = (PullToRefreshListView) findViewById(R.id.pull_refresh_list);
// initData();
dataList = new ArrayList<>();
mAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, dataList);
pullToListView.setMode(Mode.PULL_FROM_START);// 开始默认只有下拉刷新（如果我刷新下来的数据满足10条,才让其有上拉加载）
setPullToRefreshLable();
pullToListView.setAdapter(mAdapter);
pullToListView.setOnRefreshListener(new OnRefreshListener2<ListView>() {
@Override
public void onPullDownToRefresh(
PullToRefreshBase<ListView> refreshView) {
// 设置最近刷新时间
String updateTime = DateUtils.formatDateTime(
ListViewActivity.this, System.currentTimeMillis(),
DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_SHOW_DATE
| DateUtils.FORMAT_ABBREV_ALL);
refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(
updateTime);
pullDownToRefresh();
}
@Override
public void onPullUpToRefresh(
PullToRefreshBase<ListView> refreshView) {
pullUpToRefresh();
}
});
}
private void setPullToRefreshLable() {
// 1:第一种设置 (个人推荐第一种)
ILoadingLayout startLoading = pullToListView.getLoadingLayoutProxy(
true, false);
startLoading.setPullLabel("下拉刷新");// 刚下拉时显示的提示
startLoading.setRefreshingLabel("正在刷新中...");// 刷新时显示的提示
startLoading.setReleaseLabel("释放即可刷新");// 下拉达到一定距离时显示的提示
ILoadingLayout endLoading = pullToListView.getLoadingLayoutProxy(false,
true);
endLoading.setPullLabel("上拉加载更多");// 刚上拉时显示的提示
endLoading.setRefreshingLabel("拼命加载中...");// 加载时的提示
endLoading.setReleaseLabel("释放即可加载更多");// 上拉达到一定距离时显示的提示
}
/**
* 下拉刷新
*/
private void pullDownToRefresh() {
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(1000);
dataList.clear();
List<String> str = new ArrayList<String>();
for (int i = 0; i < 15; i++) {
str.add("下拉刷新后的数据" + i + "\t号");
}
size = str.size();
dataList.addAll(str);
} catch (InterruptedException e) {
e.printStackTrace();
}
mHandler.sendEmptyMessage(0);
}
}).start();
}
/**
* 上拉加载
*/
private void pullUpToRefresh() {
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(1000);
List<String> str = new ArrayList<String>();
for (int i = 0; i < pullUpSize; i++) {
str.add("上拉加载后的数据" + i + "\t号");
}
size = str.size();
dataList.addAll(str);
// 每次上拉加载就减1,模拟第二次的数据不足15条不能上拉加载
--pullUpSize;
} catch (InterruptedException e) {
e.printStackTrace();
}
mHandler.sendEmptyMessage(0);
}
}).start();
}
}

6.如果觉得上面刷新时的图标不好看,你想要用你自己的。那么请查看上面的基本属性里面的解释。示例代码如下：

[java] view plain copy print ?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.richardli.pulltorefreshdemo.ListViewActivity" >
<com.handmark.pulltorefresh.library.PullToRefreshListView
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:id="@+id/pull_refresh_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#00000000"
android:divider="#50000000"
android:dividerHeight="2dp"
android:smoothScrollbar="true"
ptr:ptrListViewExtrasEnabled="true"
ptr:ptrAnimationStyle="rotate"
ptr:ptrDrawable="@drawable/ic_launcher"
ptr:ptrMode="both" >
</com.handmark.pulltorefresh.library.PullToRefreshListView>
</RelativeLayout>

这样就可以定义成你自己喜欢的图标了,是不是很方便呢！对于想要快速开发的朋友来说吐舌头

7.可能有些朋友在使用的时候发现PullToRefreshListView.setOnItemClickListener();里面取到的数据和我数据集合里面的数据不一样,其实这里是和下拉刷新控件的原理有光,如有有兴趣的朋友可以自己去查看源码。造成输出错位的解决方案只要在取数据的时候position-1就行了。

好了到这里,我相信快速集成这个控件进行开发应该是没有问题的了.在PullToRefresh这个开源控件中还有PullToRefreshScrollView,PullToRefreshGridView,PullToRefreshExpandableListView等等控件,它们使用的方式都是基于原属性不会有太多变化，配置和PullToRefreshListView大同小异。想用的朋友呢,可以自身去实践实践。在开发中使用频率比较高的呢,除了上面的一些属性,还有下面的：

1.setOnLastItemVisibleListener();//是否到底部的监听器

2.setOnPullEventListener();//设置事件监听器

3.onRefreshComplete();//设置刷新完成

4.setOnScrollListener();//滚动监听

如果上面有什么问题,请路过的朋友指出来,让本屌多多学习学习;同时如果你觉得这篇博文对你有点帮助的话,请点个赞或者留个言，谢谢走过路过的朋友们。快哭了虽然其中会存在一些问题，还请大家多多支持。