Android下拉刷新框架实现代码实例
前段时间项目中用到了下拉刷新功能，之前在网上也找到过类似的demo，但这些demo的质量参差不齐，用户体验也不好，接口设计也不行。最张没办法，终于忍不了了，自己就写了一个下拉刷新的框架，这个框架是一个通用的框架，效果和设计感觉都还不错，现在分享给各位看官。
一. 关于下拉刷新
下拉刷新这种用户交互最早由twitter创始人洛伦•布里切特(loren brichter)发明，有理论认为，下拉刷新是一种适用于按照从新到旧的时间顺序排列feeds的应用，在这种应用场景中看完旧的内容时，用户会很自然地下拉查找更新的内容，因此下拉刷新就显得非常合理。大家可以参考这篇文章：有趣的下拉刷新，下面我贴出一个有趣的下拉刷新的案例。
图一、有趣的下拉刷新案例（一）
图二、有趣的下拉刷新案例（二）
二. 实现原理
上面这些例子，外观做得再好看，他的本质上都一样，那就是一个下拉刷新控件通常由以下几部分组成：
【1】header
header通常有下拉箭头，文字，进度条等元素，根据下拉的距离来改变它的状态，从而显示不同的样式
【2】content
这部分是内容区域，网上有很多例子都是直接在listview里面添加header，但这就有局限性，因为好多情况下并不一定是用listview来显示数据。我们把要显示内容的view放置在我们的一个容器中，如果你想实现一个用listview显示数据的下拉刷新，你需要创建一个listview旋转到我的容器中。我们处理这个容器的事件（down, move, up），如果向下拉，则把整个布局向下滑动，从而把header显示出来。
【3】footer
footer可以用来显示向上拉的箭头，自动加载更多的进度条等。
以上三部分总结的说来，就是如下图所示的这种布局结构：
图三，下拉刷新的布局结构
关于上图，需要说明几点：
1、这个布局扩展于linearlayout，垂直排列
2、从上到下的顺序是：header, content, footer
3、content填充满父控件，通过设置top, bottom的padding来使header和footer不可见，也就是让它超出屏幕外
4、下拉时，调用scrollto方法来将整个布局向下滑动，从而把header显示出来，上拉正好与下拉相反。
5、派生类需要实现的是：将content view填充到父容器中，比如，如果你要使用的话，那么你需要把listview, scrollview, webview等添加到容器中。
6、上图中的红色区域就是屏的大小（严格来说，这里说屏幕大小并不准确，应该说成内容区域更加准确）
三. 具体实现
明白了实现原理与过程，我们尝试来具体实现，首先，为了以后更好地扩展，设计更加合理，我们把下拉刷新的功能抽象成一个接口：
1、ipulltorefresh<t extends view>
它具体的定义方法如下：
public interface ipulltorefresh<t extends view> {
public void setpullrefreshenabled(boolean pullrefreshenabled);
public void setpullloadenabled(boolean pullloadenabled);
public void setscrollloadenabled(boolean scrollloadenabled);
public boolean ispullrefreshenabled();
public boolean ispullloadenabled();
public boolean isscrollloadenabled();
public void setonrefreshlistener(onrefreshlistener<t> refreshlistener);
public void onpulldownrefreshcomplete();
public void onpulluprefreshcomplete();
public t getrefreshableview();
public loadinglayout getheaderloadinglayout();
public loadinglayout getfooterloadinglayout();
public void setlastupdatedlabel(charsequence label);
}
这个接口是一个泛型的，它接受view的派生类，因为要放到我们的容器中的不就是一个view吗？
2、pulltorefreshbase<t extends view>
这个类实现了ipulltorefresh接口，它是从linearlayout继承过来，作为下拉刷新的一个抽象基类，如果你想实现listview的下拉刷新，只需要扩展这个类，实现一些必要的方法就可以了。这个类的职责主要有以下几点：
- 处理onintercepttouchevent()和ontouchevent()中的事件：当内容的view（比如listview）正如处于最顶部，此时再向下拉，我们必须截断事件，然后move事件就会把后续的事件传递到ontouchevent()方法中，然后再在这个方法中，我们根据move的距离再进行scroll整个view。
- 负责创建header、footer和content view：在构造方法中调用方法去创建这三个部分的view，派生类可以重写这些方法，以提供不同式样的header和footer，它会调用createheaderloadinglayout和createfooterloadinglayout方法来创建header和footer创建content view的方法是一个抽象方法，必须让派生类来实现，返回一个非null的view，然后容器再把这个view添加到自己里面。
- 设置各种状态：这里面有很多状态，如下拉、上拉、刷新、加载中、释放等，它会根据用户拉动的距离来更改状态，状态的改变，它也会把header和footer的状态改变，然后header和footer会根据状态去显示相应的界面式样。
3、pulltorefreshbase<t extends view>继承关系
这里我实现了三个下拉刷新的派生类，分别是listview、scrollview、webview三个，它们的继承关系如下：
图四、pulltorefreshbase类的继承关系
关于pulltorefreshbase类及其派和类，有几点需要说明：
对于listview，scrollview，webview这三种情况，他们是否滑动到最顶部或是最底部的实现是不一样的，所以，在pulltorefreshbase类中需要调用两个抽象方法来判断当前的位置是否在顶部或底部，而其派生类必须要实现这两个方法。比如对于listview，它滑动到最顶部的条件就是第一个child完全可见并且first postion是0。这两个抽象方法是：
/** * 判断刷新的view是否滑动到顶部 * * @return true表示已经滑动到顶部，否则false */ protected abstract boolean isreadyforpulldown(); /** * 判断刷新的view是否滑动到底 * * @return true表示已经滑动到底部，否则false */ protected abstract boolean isreadyforpullup();
创建可下拉刷新的view（也就是content view）的抽象方法是
/** * 创建可以刷新的view * * @param context context * @param attrs 属性 * @return view */ protected abstract t createrefreshableview(context context, attributeset attrs);
4、loadinglayout
loadinglayout是刷新layout的一个抽象，它是一个抽象基类。header和footer都扩展于这个类。这类抽象类，提供了两个抽象方法：
getcontentsize
这个方法返回当前这个刷新layout的大小，通常返回的是布局的高度，为了以后可以扩展为水平拉动，所以方法名字没有取成getlayoutheight()之类的，这个返回值，将会作为松手后是否可以刷新的临界值，如果下拉的偏移值大于这个值，就认为可以刷新，否则不刷新，这个方法必须由派生类来实现。
setstate
这个方法用来设置当前刷新layout的状态，pulltorefreshbase类会调用这个方法，当进入下拉，松手等动作时，都会调用这个方法，派生类里面只需要根据这些状态实现不同的界面显示，如下拉状态时，就显示出箭头，刷新状态时，就显示loading的图标。
可能的状态值有：reset, pull_to_refresh, release_to_refresh, refreshing, no_more_data
loadinglayout及其派生类的继承关系如下图所示：
图五、loadinglayout及其派生类的类图
我们可以随意地制定自己的header和footer，我们也可以实现如图一和图二中显示的各种下拉刷新案例中的header和footer，只要重写上述两个方法getcontentsize()和setstate()就行了。headerloadinglayout，它默认是显示箭头式样的布局，而rotateloadinglayout则是显示一个旋转图标的式样。
5、事件处理
我们必须重写pulltorefreshbase类的两个事件相关的方法onintercepttouchevent()和ontouchevent()方法。由于listview，scrollview，webview它们是放到pulltorefreshbase内部的，所在事件先是传递到pulltorefreshbase#onintercepttouchevent()方法中，所以我们应该在这个方法中去处理action_move事件，判断如果当前listview，scrollview，webview是否在最顶部或最底部，如果是，则开始截断事件，一旦事件被截断，后续的事件就会传递到pulltorefreshbase#onintercepttouchevent()方法中，我们再在action_move事件中去移动整个布局，从而实现下拉或上拉动作。
6、滚动布局(scrollto)
如图三的布局结构可知，默认情况下header和footer是放置在content view的最上面和最下面，通过设置padding来让他跑到屏幕外面去了，如果我们将整个布局向下滚动(scrollto)一定距离，那么header就会被显示出来，基于这种情况，所以在我的实现中，最终我是调用scrollto来实现下拉动作的。
总的说来，实现的重要的点就这些，具体的一些细节在实现在会碰到很多，可以参考代码。
四. 如何使用
使用下拉刷新的代码如下
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
mpulllistview = new pulltorefreshlistview(this);
setcontentview(mpulllistview);
// 上拉加载不可用
mpulllistview.setpullloadenabled(false);
// 滚动到底自动加载可用
mpulllistview.setscrollloadenabled(true);
mcurindex = mloaddatacount;
mlistitems = new linkedlist<string>();
mlistitems.addall(arrays.aslist(mstrings).sublist(0, mcurindex));
madapter = new arrayadapter<string>(this, android.r.layout.simple_list_item_1, mlistitems);
// 得到实际的listview
mlistview = mpulllistview.getrefreshableview();
// 绑定数据
mlistview.setadapter(madapter);
// 设置下拉刷新的listener
mpulllistview.setonrefreshlistener(new onrefreshlistener<listview>() {
@override
public void onpulldowntorefresh(pulltorefreshbase<listview> refreshview) {
misstart = true;
new getdatatask().execute();
}
@override
public void onpulluptorefresh(pulltorefreshbase<listview> refreshview) {
misstart = false;
new getdatatask().execute();
}
});
setlastupdatetime();
// 自动刷新
mpulllistview.dopullrefreshing(true, 500);
}
这是初始化一个下拉刷新的布局，并且调用setcontentview来设置到activity中。
在下拉刷新完成后，我们可以调用onpulldownrefreshcomplete()和onpulluprefreshcomplete()方法来停止刷新和加载
五. 运行效果
这里列出了demo的运行效果图。
图六、listview下拉刷新，注意header和footer的样式
六. bug修复
已知bug修复情况如下，发现了代码bug的看官也可以给我反馈，谢谢~~~
1，对于listview的下拉刷新，当启用滚动到底自动加载时，如果footer由隐藏变为显示时，出现显示异常的情况
这个问题已经修复了，修正的代码如下：
pulltorefreshlistview#setscrollloadenabled方法，修正后的代码如下：
@override
public void setscrollloadenabled(boolean scrollloadenabled) {
if (isscrollloadenabled() == scrollloadenabled) {
return;
}
super.setscrollloadenabled(scrollloadenabled);
if (scrollloadenabled) {
// 设置footer
if (null == mloadmorefooterlayout) {
mloadmorefooterlayout = new footerloadinglayout(getcontext());
mlistview.addfooterview(mloadmorefooterlayout, null, false);
}
mloadmorefooterlayout.show(true);
} else {
if (null != mloadmorefooterlayout) {
mloadmorefooterlayout.show(false);
}
}
}
loadinglayout#show方法，修正后的代码如下：
/**
* 显示或隐藏这个布局
*
* @param show flag
*/
public void show(boolean show) {
// if is showing, do nothing.
if (show == (view.visible == getvisibility())) {
return;
}
viewgroup.layoutparams params = mcontainer.getlayoutparams();
if (null != params) {
if (show) {
params.height = viewgroup.layoutparams.wrap_content;
} else {
params.height = 0;
}
requestlayout();
setvisibility(show ? view.visible : view.invisible);
}
}
在更改layoutparameter后，调用requestlayout()方法。
图片旋转兼容2.x系统
我之前想的是这个只需要兼容3.x以上的系统，但发现有很多网友在使用过程中遇到过兼容性问题，这次抽空将这个兼容性一并实现了。
onpull的修改如下：
@override
public void onpull(float scale) {
if (null == mrotationhelper) {
mrotationhelper = new imageviewrotationhelper(marrowimageview);
}
float angle = scale * 180f; // suppress checkstyle
mrotationhelper.setrotation(angle);
}
imageviewrotationhelper主要的作用就是实现了imageview的旋转功能，内部作了版本的区分，实现代码如下：
/**
* the image view rotation helper
*
* @author lihong06
* @since 2014-5-2
*/
static class imageviewrotationhelper {
/** the imageview */
private final imageview mimageview;
/** the matrix */
private matrix mmatrix;
/** pivot x */
private float mrotationpivotx;
/** pivot y */
private float mrotationpivoty;
/**
* the constructor method.
*
* @param imageview the image view
*/
public imageviewrotationhelper(imageview imageview) {
mimageview = imageview;
}
/**
* sets the degrees that the view is rotated around the pivot point. increasing values
* result in clockwise rotation.
*
* @param rotation the degrees of rotation.
*
* @see #getrotation()
* @see #getpivotx()
* @see #getpivoty()
* @see #setrotationx(float)
* @see #setrotationy(float)
*
* @attr ref android.r.styleable#view_rotation
*/
public void setrotation(float rotation) {
if (apiutils.hashoneycomb()) {
mimageview.setrotation(rotation);
} else {
if (null == mmatrix) {
mmatrix = new matrix();
// 计算旋转的中心点
drawable imagedrawable = mimageview.getdrawable();
if (null != imagedrawable) {
mrotationpivotx = math.round(imagedrawable.getintrinsicwidth() / 2f);
mrotationpivoty = math.round(imagedrawable.getintrinsicheight() / 2f);
}
}
mmatrix.setrotate(rotation, mrotationpivotx, mrotationpivoty);
mimageview.setimagematrix(mmatrix);
}
}
}
最核心的就是，如果在2.x的版本上，旋转imageview使用matrix。
pulltorefreshbase构造方法兼容2.x
在三个参数的构造方法声明如下标注：
@suppresslint("newapi")
@targetapi(build.version_codes.honeycomb)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。