您的位置：首页 > 移动开发 > Android开发

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

2015-08-09 15:25 806 查看

哎，最近事真的是多。没有坚持写博客虽然写得差，但还是得坚持写嘛！废话不多说，进入今天的主题。

在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;

	@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

<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() {
		@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.那个上拉下拉的时显示的字不是我想要的,那又改如何解决呢！请看下面代码：

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>() {

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

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

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

如果上面有什么问题,请路过的朋友指出来,让本屌多多学习学习;同时如果你觉得这篇博文对你有点帮助的话,请点个赞或者留个言，谢谢走过路过的朋友们。

虽然其中会存在一些问题，还请大家多多支持。本来还想写的，但是眼睛实在是受不了...睡个午觉去。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航