Android-PullToRefresh下拉刷新,上拉加载的使用详解

在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的下拉刷新,直接上代码：

布局文件：        

<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代码：

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;@Overrideprotected 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>() {@Overridepublic 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> {@Overrideprotected String doInBackground(Void... params) {try {Thread.sleep(2000);} catch (InterruptedException e) {}return "" + (dataCount + "这是刷新后的数据");}@Overrideprotected 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

<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代码：

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() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);mAdapter.notifyDataSetChanged();pullToListView.onRefreshComplete();}};@Overrideprotected 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>() {@Overridepublic void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {pullDownToRefresh();}@Overridepublic void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {pullUpToRefresh();}});}/** * 下拉刷新 */private void pullDownToRefresh() {new Thread(new Runnable() {@Overridepublic 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() {@Overridepublic 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.那个上拉下拉的时显示的字不是我想要的,那又改如何解决呢！请看下面代码：

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

pullToListView.setOnRefreshListener(new OnRefreshListener2<ListView>() {@Overridepublic 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();}@Overridepublic void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {pullUpToRefresh();}});

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

主Activity代码：

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() {@Overridepublic 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);}}};@Overrideprotected 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>() {@Overridepublic 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();}@Overridepublic 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() {@Overridepublic 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() {@Overridepublic 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.如果觉得上面刷新时的图标不好看,你想要用你自己的。那么请查看上面的基本属性里面的解释。示例代码如下：

<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();//滚动监听

如果上面有什么问题,请路过的朋友指出来,让本?多多学习学习;同时如果你觉得这篇博文对你有点帮助的话,请点个赞或者留个言，谢谢走过路过的朋友们。虽然其中会存在一些问题，还请大家多多支持。本来还想写的，但是眼睛实在是受不了...睡个午觉去。