哎,最近事真的是多。没有坚持写博客虽然写得差,但还是得坚持写嘛!废话不多说,进入今天的主题。
在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();//滚动监听
如果上面有什么问题,请路过的朋友指出来,让本屌多多学习学习;同时如果你觉得这篇博文对你有点帮助的话,请点个赞或者留个言,谢谢走过路过的朋友们。虽然其中会存在一些问题,还请大家多多支持。本来还想写的,但是眼睛实在是受不了...睡个午觉去。
版权声明:欢迎大伙指教...