前面写过一篇关于下拉刷新控件的文章下拉刷新控件终结者：pulltorefreshlayout，后来看到好多人还有上拉加载更多的需求，于是就在前面下拉刷新控件的基础上进行了改进，加了上拉加载的功能。不仅如此，我已经把它改成了对所有view都通用！可以随心所欲使用这两个功能~~
我做了一个大集合的demo，实现了listview、gridview、expandablelistview、scrollview、webview、imageview、textview的下拉刷新和上拉加载。后面会提供demo的下载地址，最新代码已上传到github：https://github.com/jingchenustc/pulltorefreshandload
依照惯例，下面将会是一大波效果图：
demo首页也是可下拉的listview，在底下可以加入table：
listview：
gridview：
expandablelistview：
scrollview：
webview：
imageview：
textview：
很不错吧？最后的imageview和textview是最简单的，直接在下面的接口方法里返回true。
增加上拉加载很简单，和管理下拉头一样，再多管理一个上拉头，也不费事；至于把它改成通用的就需要统一一下view的行为了，为此，我定义了这样一个接口：
package com.jingchen.pulltorefresh.pullableview;
public interface pullable
{
/**
* 判断是否可以下拉，如果不需要下拉功能可以直接return false
*
* @return true如果可以下拉否则返回false
*/
boolean canpulldown();
/**
* 判断是否可以上拉，如果不需要上拉功能可以直接return false
*
* @return true如果可以上拉否则返回false
*/
boolean canpullup();
}
从接口名就可以看出它是一个提供判断是否可拉的方法的接口。这个接口的两个方法，canpulldown()是判断何时可以下拉的方法，canpullup()则是判断何时可以上拉，我在demo中的判断是滑到顶部的时候可以下拉，滑到底部的时候可以上拉。所有需要上拉和下拉的view都需要实现这个接口。后面会给出一些view的实现。先来看看改进后的自定义的布局pulltorefreshlayout，增加了一个上拉头，下拉头和上拉头之间的view是实现了pullable接口的pullableview。相比前面的版本，这里有改动的需要注意的地方如下：
1、增加了上拉头，相应的也增加了控制变量。
2、拉动时消除content_view事件防止误触发不再使用反射，直接设置 event.setaction(motionevent.action_cancel)。
3、消除了拉动过程中的多点触碰导致的剧变。
4、不再设置content_view的ontoulistener，让使用者可以更加自由的设置监听器。
这个pulltorefreshlayout只负责管理三个控件，如果一个view需要有上拉下拉功能则只需实现接口就行了。下面看pulltorefreshlayout的代码，注释写了好多：
我要评论
package com.jingchen.pulltorefresh;
import java.util.timer;
import java.util.timertask;
import android.content.context;
import android.graphics.canvas;
import android.graphics.lineargradient;
import android.graphics.paint;
import android.graphics.paint.style;
import android.graphics.rectf;
import android.graphics.shader.tilemode;
import android.os.handler;
import android.os.message;
import android.util.attributeset;
import android.util.log;
import android.view.motionevent;
import android.view.view;
import android.view.viewgroup;
import android.view.animation.animationutils;
import android.view.animation.linearinterpolator;
import android.view.animation.rotateanimation;
import android.widget.relativelayout;
import android.widget.textview;
import com.jingchen.pulltorefresh.pullableview.pullable;
/**
* 自定义的布局，用来管理三个子控件，其中一个是下拉头，一个是包含内容的pullableview（可以是实现pullable接口的的任何view），
* 还有一个上拉头
*
* @author 陈靖
*/
public class pulltorefreshlayout extends relativelayout
{
public static final string tag = "pulltorefreshlayout";
// 初始状态
public static final int init = 0;
// 释放刷新
public static final int release_to_refresh = 1;
// 正在刷新
public static final int refreshing = 2;
// 释放加载
public static final int release_to_load = 3;
// 正在加载
public static final int loading = 4;
// 操作完毕
public static final int done = 5;
// 当前状态
private int state = init;
// 刷新回调接口
private onrefreshlistener mlistener;
// 刷新成功
public static final int succeed = 0;
// 刷新失败
public static final int fail = 1;
// 按下y坐标，上一个事件点y坐标
private float downy, lasty;
// 下拉的距离。注意：pulldowny和pullupy不可能同时不为0
public float pulldowny = 0;
// 上拉的距离
private float pullupy = 0;
// 释放刷新的距离
private float refreshdist = 200;
// 释放加载的距离
private float loadmoredist = 200;
private mytimer timer;
// 回滚速度
public float move_speed = 8;
// 第一次执行布局
private boolean islayout = false;
// 在刷新过程中滑动操作
private boolean istouch = false;
// 手指滑动距离与下拉头的滑动距离比，中间会随正切函数变化
private float radio = 2;
// 下拉箭头的转180°动画
private rotateanimation rotateanimation;
// 均匀旋转动画
private rotateanimation refreshinganimation;
// 下拉头
private view refreshview;
// 下拉的箭头
private view pullview;
// 正在刷新的图标
private view refreshingview;
// 刷新结果图标
private view refreshstateimageview;
// 刷新结果：成功或失败
private textview refreshstatetextview;
// 上拉头
private view loadmoreview;
// 上拉的箭头
private view pullupview;
// 正在加载的图标
private view loadingview;
// 加载结果图标
private view loadstateimageview;
// 加载结果：成功或失败
private textview loadstatetextview;
// 实现了pullable接口的view
private view pullableview;
// 过滤多点触碰
private int mevents;
// 这两个变量用来控制pull的方向，如果不加控制，当情况满足可上拉又可下拉时没法下拉
private boolean canpulldown = true;
private boolean canpullup = true;
/**
* 执行自动回滚的handler
*/
handler updatehandler = new handler()
{
@override
public void handlemessage(message msg)
{
// 回弹速度随下拉距离movedeltay增大而增大
move_speed = (float) (8 + 5 * math.tan(math.pi / 2
/ getmeasuredheight() * (pulldowny + math.abs(pullupy))));
if (!istouch)
{
// 正在刷新，且没有往上推的话则悬停，显示"正在刷新..."
if (state == refreshing && pulldowny <= refreshdist)
{
pulldowny = refreshdist;
timer.cancel();
} else if (state == loading && -pullupy <= loadmoredist)
{
pullupy = -loadmoredist;
timer.cancel();
}
}
if (pulldowny > 0)
pulldowny -= move_speed;
else if (pullupy < 0)
pullupy += move_speed;
if (pulldowny < 0)
{
// 已完成回弹
pulldowny = 0;
pullview.clearanimation();
// 隐藏下拉头时有可能还在刷新，只有当前状态不是正在刷新时才改变状态
if (state != refreshing && state != loading)
changestate(init);
timer.cancel();
}
if (pullupy > 0)
{
// 已完成回弹
pullupy = 0;
pullupview.clearanimation();
// 隐藏下拉头时有可能还在刷新，只有当前状态不是正在刷新时才改变状态
if (state != refreshing && state != loading)
changestate(init);
timer.cancel();
}
// 刷新布局,会自动调用onlayout
requestlayout();
}
};
public void setonrefreshlistener(onrefreshlistener listener)
{
mlistener = listener;
}
public pulltorefreshlayout(context context)
{
super(context);
initview(context);
}
public pulltorefreshlayout(context context, attributeset attrs)
{
super(context, attrs);
initview(context);
}
public pulltorefreshlayout(context context, attributeset attrs, int defstyle)
{
super(context, attrs, defstyle);
initview(context);
}
private void initview(context context)
{
timer = new mytimer(updatehandler);
rotateanimation = (rotateanimation) animationutils.loadanimation(
context, r.anim.reverse_anim);
refreshinganimation = (rotateanimation) animationutils.loadanimation(
context, r.anim.rotating);
// 添加匀速转动动画
linearinterpolator lir = new linearinterpolator();
rotateanimation.setinterpolator(lir);
refreshinganimation.setinterpolator(lir);
}
private void hide()
{
timer.schedule(5);
}
/**
* 完成刷新操作，显示刷新结果。注意：刷新完成后一定要调用这个方法
*/
/**
* @param refreshresult
* pulltorefreshlayout.succeed代表成功，pulltorefreshlayout.fail代表失败
*/
public void refreshfinish(int refreshresult)
{
refreshingview.clearanimation();
refreshingview.setvisibility(view.gone);
switch (refreshresult)
{
case succeed:
// 刷新成功
refreshstateimageview.setvisibility(view.visible);
refreshstatetextview.settext(r.string.refresh_succeed);
refreshstateimageview
.setbackgroundresource(r.drawable.refresh_succeed);
break;
case fail:
default:
// 刷新失败
refreshstateimageview.setvisibility(view.visible);
refreshstatetextview.settext(r.string.refresh_fail);
refreshstateimageview
.setbackgroundresource(r.drawable.refresh_failed);
break;
}
// 刷新结果停留1秒
new handler()
{
@override
public void handlemessage(message msg)
{
changestate(done);
hide();
}
}.sendemptymessagedelayed(0, 1000);
}
/**
* 加载完毕，显示加载结果。注意：加载完成后一定要调用这个方法
*
* @param refreshresult
* pulltorefreshlayout.succeed代表成功，pulltorefreshlayout.fail代表失败
*/
public void loadmorefinish(int refreshresult)
{
loadingview.clearanimation();
loadingview.setvisibility(view.gone);
switch (refreshresult)
{
case succeed:
// 加载成功
loadstateimageview.setvisibility(view.visible);
loadstatetextview.settext(r.string.load_succeed);
loadstateimageview.setbackgroundresource(r.drawable.load_succeed);
break;
case fail:
default:
// 加载失败
loadstateimageview.setvisibility(view.visible);
loadstatetextview.settext(r.string.load_fail);
loadstateimageview.setbackgroundresource(r.drawable.load_failed);
break;
}
// 刷新结果停留1秒
new handler()
{
@override
public void handlemessage(message msg)
{
changestate(done);
hide();
}
}.sendemptymessagedelayed(0, 1000);
}
private void changestate(int to)
{
state = to;
switch (state)
{
case init:
// 下拉布局初始状态
refreshstateimageview.setvisibility(view.gone);
refreshstatetextview.settext(r.string.pull_to_refresh);
pullview.clearanimation();
pullview.setvisibility(view.visible);
// 上拉布局初始状态
loadstateimageview.setvisibility(view.gone);
loadstatetextview.settext(r.string.pullup_to_load);
pullupview.clearanimation();
pullupview.setvisibility(view.visible);
break;
case release_to_refresh:
// 释放刷新状态
refreshstatetextview.settext(r.string.release_to_refresh);
pullview.startanimation(rotateanimation);
break;
case refreshing:
// 正在刷新状态
pullview.clearanimation();
refreshingview.setvisibility(view.visible);
pullview.setvisibility(view.invisible);
refreshingview.startanimation(refreshinganimation);
refreshstatetextview.settext(r.string.refreshing);
break;
case release_to_load:
// 释放加载状态
loadstatetextview.settext(r.string.release_to_load);
pullupview.startanimation(rotateanimation);
break;
case loading:
// 正在加载状态
pullupview.clearanimation();
loadingview.setvisibility(view.visible);
pullupview.setvisibility(view.invisible);
loadingview.startanimation(refreshinganimation);
loadstatetextview.settext(r.string.loading);
break;
case done:
// 刷新或加载完毕，啥都不做
break;
}
}
/**
* 不限制上拉或下拉
*/
private void releasepull()
{
canpulldown = true;
canpullup = true;
}
/*
* （非 javadoc）由父控件决定是否分发事件，防止事件冲突
*
* @see android.view.viewgroup#dispatchtouchevent(android.view.motionevent)
*/
@override
public boolean dispatchtouchevent(motionevent ev)
{
switch (ev.getactionmasked())
{
case motionevent.action_down:
downy = ev.gety();
lasty = downy;
timer.cancel();
mevents = 0;
releasepull();
break;
case motionevent.action_pointer_down:
case motionevent.action_pointer_up:
// 过滤多点触碰
mevents = -1;
break;
case motionevent.action_move:
if (mevents == 0)
{
if (((pullable) pullableview).canpulldown() && canpulldown
&& state != loading)
{
// 可以下拉，正在加载时不能下拉
// 对实际滑动距离做缩小，造成用力拉的感觉
pulldowny = pulldowny + (ev.gety() - lasty) / radio;
if (pulldowny < 0)
{
pulldowny = 0;
canpulldown = false;
canpullup = true;
}
if (pulldowny > getmeasuredheight())
pulldowny = getmeasuredheight();
if (state == refreshing)
{
// 正在刷新的时候触摸移动
istouch = true;
}
} else if (((pullable) pullableview).canpullup() && canpullup
&& state != refreshing)
{
// 可以上拉，正在刷新时不能上拉
pullupy = pullupy + (ev.gety() - lasty) / radio;
if (pullupy > 0)
{
pullupy = 0;
canpulldown = true;
canpullup = false;
}
if (pullupy < -getmeasuredheight())
pullupy = -getmeasuredheight();
if (state == loading)
{
// 正在加载的时候触摸移动
istouch = true;
}
} else
releasepull();
} else
mevents = 0;
lasty = ev.gety();
// 根据下拉距离改变比例
radio = (float) (2 + 2 * math.tan(math.pi / 2 / getmeasuredheight()
* (pulldowny + math.abs(pullupy))));
requestlayout();
if (pulldowny <= refreshdist
<span style="white-space:pre"> </span>&& (state == release_to_refresh || state == done)) {
<span style="white-space:pre"> </span>// 如果下拉距离没达到刷新的距离且当前状态是释放刷新，改变状态为下拉刷新
<span style="white-space:pre"> </span>changestate(init);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>if (pulldowny >= refreshdist && (state == init || state == done)) {
<span style="white-space:pre"> </span>// 如果下拉距离达到刷新的距离且当前状态是初始状态刷新，改变状态为释放刷新
<span style="white-space:pre"> </span>changestate(release_to_refresh);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>// 下面是判断上拉加载的，同上，注意pullupy是负值
<span style="white-space:pre"> </span>if (-pullupy <= loadmoredist
<span style="white-space:pre"> </span>&& (state == release_to_load || state == done)) {
<span style="white-space:pre"> </span>changestate(init);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>if (-pullupy >= loadmoredist && (state == init || state == done)) {
<span style="white-space:pre"> </span>changestate(release_to_load);
<span style="white-space:pre"> </span>}
// 因为刷新和加载操作不能同时进行，所以pulldowny和pullupy不会同时不为0，因此这里用(pulldowny +
// math.abs(pullupy))就可以不对当前状态作区分了
if ((pulldowny + math.abs(pullupy)) > 8)
{
// 防止下拉过程中误触发长按事件和点击事件
ev.setaction(motionevent.action_cancel);
}
break;
case motionevent.action_up:
if (pulldowny > refreshdist || -pullupy > loadmoredist)
// 正在刷新时往下拉（正在加载时往上拉），释放后下拉头（上拉头）不隐藏
istouch = false;
if (state == release_to_refresh)
{
changestate(refreshing);
// 刷新操作
if (mlistener != null)
mlistener.onrefresh(this);
} else if (state == release_to_load)
{
changestate(loading);
// 加载操作
if (mlistener != null)
mlistener.onloadmore(this);
}
hide();
default:
break;
}
// 事件分发交给父类
super.dispatchtouchevent(ev);
return true;
}
private void initview()
{
// 初始化下拉布局
pullview = refreshview.findviewbyid(r.id.pull_icon);
refreshstatetextview = (textview) refreshview
.findviewbyid(r.id.state_tv);
refreshingview = refreshview.findviewbyid(r.id.refreshing_icon);
refreshstateimageview = refreshview.findviewbyid(r.id.state_iv);
// 初始化上拉布局
pullupview = loadmoreview.findviewbyid(r.id.pullup_icon);
loadstatetextview = (textview) loadmoreview
.findviewbyid(r.id.loadstate_tv);
loadingview = loadmoreview.findviewbyid(r.id.loading_icon);
loadstateimageview = loadmoreview.findviewbyid(r.id.loadstate_iv);
}
@override
protected void onlayout(boolean changed, int l, int t, int r, int b)
{
if (!islayout)
{
// 这里是第一次进来的时候做一些初始化
refreshview = getchildat(0);
pullableview = getchildat(1);
loadmoreview = getchildat(2);
islayout = true;
initview();
refreshdist = ((viewgroup) refreshview).getchildat(0)
.getmeasuredheight();
loadmoredist = ((viewgroup) loadmoreview).getchildat(0)
.getmeasuredheight();
}
// 改变子控件的布局，这里直接用(pulldowny + pullupy)作为偏移量，这样就可以不对当前状态作区分
refreshview.layout(0,
(int) (pulldowny + pullupy) - refreshview.getmeasuredheight(),
refreshview.getmeasuredwidth(), (int) (pulldowny + pullupy));
pullableview.layout(0, (int) (pulldowny + pullupy),
pullableview.getmeasuredwidth(), (int) (pulldowny + pullupy)
+ pullableview.getmeasuredheight());
loadmoreview.layout(0,
(int) (pulldowny + pullupy) + pullableview.getmeasuredheight(),
loadmoreview.getmeasuredwidth(),
(int) (pulldowny + pullupy) + pullableview.getmeasuredheight()
+ loadmoreview.getmeasuredheight());
}
class mytimer
{
private handler handler;
private timer timer;
private mytask mtask;
public mytimer(handler handler)
{
this.handler = handler;
timer = new timer();
}
public void schedule(long period)
{
if (mtask != null)
{
mtask.cancel();
mtask = null;
}
mtask = new mytask(handler);
timer.schedule(mtask, 0, period);
}
public void cancel()
{
if (mtask != null)
{
mtask.cancel();
mtask = null;
}
}
class mytask extends timertask
{
private handler handler;
public mytask(handler handler)
{
this.handler = handler;
}
@override
public void run()
{
handler.obtainmessage().sendtotarget();
}
}
}
/**
* 刷新加载回调接口
*
* @author chenjing
*
*/
public interface onrefreshlistener
{
/**
* 刷新操作
*/
void onrefresh(pulltorefreshlayout pulltorefreshlayout);
/**
* 加载操作
*/
void onloadmore(pulltorefreshlayout pulltorefreshlayout);
}
}
上面就是整个布局的代码，并不是很难。
下面看各个view对pullable接口的实现，listview和gridview还有expandablelistview的判断方法是一样的：
pullablelistview：
package com.jingchen.pulltorefresh.pullableview;
import android.content.context;
import android.util.attributeset;
import android.util.log;
import android.widget.listview;
public class pullablelistview extends listview implements pullable
{
public pullablelistview(context context)
{
super(context);
}
public pullablelistview(context context, attributeset attrs)
{
super(context, attrs);
}
public pullablelistview(context context, attributeset attrs, int defstyle)
{
super(context, attrs, defstyle);
}
@override
public boolean canpulldown()
{
if (getcount() == 0)
{
// 没有item的时候也可以下拉刷新
return true;
} else if (getfirstvisibleposition() == 0
&& getchildat(0).gettop() >= 0)
{
// 滑到listview的顶部了
return true;
} else
return false;
}
@override
public boolean canpullup()
{
if (getcount() == 0)
{
// 没有item的时候也可以上拉加载
return true;
} else if (getlastvisibleposition() == (getcount() - 1))
{
// 滑到底部了
if (getchildat(getlastvisibleposition() - getfirstvisibleposition()) != null
&& getchildat(
getlastvisibleposition()
- getfirstvisibleposition()).getbottom() <= getmeasuredheight())
return true;
}
return false;
}
}
pullableexpandablelistview：
package com.jingchen.pulltorefresh.pullableview;
import android.content.context;
import android.util.attributeset;
import android.widget.expandablelistview;
public class pullableexpandablelistview extends expandablelistview implements
pullable
{
public pullableexpandablelistview(context context)
{
super(context);
}
public pullableexpandablelistview(context context, attributeset attrs)
{
super(context, attrs);
}
public pullableexpandablelistview(context context, attributeset attrs,
int defstyle)
{
super(context, attrs, defstyle);
}
@override
public boolean canpulldown()
{
if (getcount() == 0)
{
// 没有item的时候也可以下拉刷新
return true;
} else if (getfirstvisibleposition() == 0
&& getchildat(0).gettop() >= 0)
{
// 滑到顶部了
return true;
} else
return false;
}
@override
public boolean canpullup()
{
if (getcount() == 0)
{
// 没有item的时候也可以上拉加载
return true;
} else if (getlastvisibleposition() == (getcount() - 1))
{
// 滑到底部了
if (getchildat(getlastvisibleposition() - getfirstvisibleposition()) != null
&& getchildat(
getlastvisibleposition()
- getfirstvisibleposition()).getbottom() <= getmeasuredheight())
return true;
}
return false;
}
}
pullablegridview：
package com.jingchen.pulltorefresh.pullableview;
import android.content.context;
import android.util.attributeset;
import android.widget.gridview;
public class pullablegridview extends gridview implements pullable
{
public pullablegridview(context context)
{
super(context);
}
public pullablegridview(context context, attributeset attrs)
{
super(context, attrs);
}
public pullablegridview(context context, attributeset attrs, int defstyle)
{
super(context, attrs, defstyle);
}
@override
public boolean canpulldown()
{
if (getcount() == 0)
{
// 没有item的时候也可以下拉刷新
return true;
} else if (getfirstvisibleposition() == 0
&& getchildat(0).gettop() >= 0)
{
// 滑到顶部了
return true;
} else
return false;
}
@override
public boolean canpullup()
{
if (getcount() == 0)
{
// 没有item的时候也可以上拉加载
return true;
} else if (getlastvisibleposition() == (getcount() - 1))
{
// 滑到底部了
if (getchildat(getlastvisibleposition() - getfirstvisibleposition()) != null
&& getchildat(
getlastvisibleposition()
- getfirstvisibleposition()).getbottom() <= getmeasuredheight())
return true;
}
return false;
}
}
pullablescrollview：
package com.jingchen.pulltorefresh.pullableview;
import android.content.context;
import android.util.attributeset;
import android.widget.scrollview;
public class pullablescrollview extends scrollview implements pullable
{
public pullablescrollview(context context)
{
super(context);
}
public pullablescrollview(context context, attributeset attrs)
{
super(context, attrs);
}
public pullablescrollview(context context, attributeset attrs, int defstyle)
{
super(context, attrs, defstyle);
}
@override
public boolean canpulldown()
{
if (getscrolly() == 0)
return true;
else
return false;
}
@override
public boolean canpullup()
{
if (getscrolly() >= (getchildat(0).getheight() - getmeasuredheight()))
return true;
else
return false;
}
}
pullablewebview：
package com.jingchen.pulltorefresh.pullableview;
import android.content.context;
import android.util.attributeset;
import android.webkit.webview;
public class pullablewebview extends webview implements pullable
{
public pullablewebview(context context)
{
super(context);
}
public pullablewebview(context context, attributeset attrs)
{
super(context, attrs);
}
public pullablewebview(context context, attributeset attrs, int defstyle)
{
super(context, attrs, defstyle);
}
@override
public boolean canpulldown()
{
if (getscrolly() == 0)
return true;
else
return false;
}
@override
public boolean canpullup()
{
if (getscrolly() >= getcontentheight() * getscale()
- getmeasuredheight())
return true;
else
return false;
}
}
imageview和textview就不贴了，我直接在方法里返回了true。
源码下载：
精彩专题分享：javascriptandroid加载功能汇总
本文已经被整理到《android下拉刷新上拉加载效果》，欢迎大家学习研究。
希望本文所述对大家学习android下拉刷新上拉加载控件有所帮助。
如对本文有疑问， 点击进行留言回复！！
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）
网友评论