Android 定制下拉刷新头部【原创】

我们看到手机中的各种APP的花样繁多的下拉刷新是不是有点心动呢，想着自己定制自己的专门的下拉刷新，市场上比如，58同城，京东，天猫，美团等下拉刷新都是在下拉头部执行帧动画，我最近看到一个APP，就是慕课网的Android客户端，平时有时候看这个网站的学习视频，就下了一个，发现它的头部是一个圆形的水波纹效果：

看起来很Cool，正好公司有需求做官网的APP，正好可以用上公司的Logo做一个水波纹的下拉刷新，首先要实现水波纹的效果，通过解压慕课网的客户端，发现它的实现其实也是用帧动画，就是假的水波纹，但是我们不想这么早，要做一个完整的水波纹下拉刷新，那么就要实现水波纹的效果，在github上很多水波纹的实现，实现原理是用正弦与余弦曲线，这里放一个链接，有兴趣的可以看看https://github.com/john990/WaveView

然后用美工切的图往上一盖，基本雏形就出来了

ok,下面就是往下拉刷新上集成了。这里介绍一个比较牛逼的下拉刷新框架android-Ultra-Pull-to-Refresh，这个框架可以方便的定制下拉刷新的头部，接口强大，值得研究，下面我们就进行移植实现：

首先使用这个框架定制头部，需要我们把头部的View先实现出来，只要实现PtrUIHandler接口即可：


package cn.zmit.ow.widget;

import in.srain.cube.views.ptr.PtrFrameLayout;
import in.srain.cube.views.ptr.PtrUIHandler;
import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import cn.zmit.ow.R;
import cn.zmit.ow.widget.waveview.WaveView;

/**
* 自定义下拉刷新头部
*
* @author Robin time 2015-02-11 14:06:33
*
*/

public class CustomPtrHeader extends FrameLayout implements PtrUIHandler {
WaveView wave_view;
int i;

public CustomPtrHeader(Context context) {
super(context);
init();
}

public CustomPtrHeader(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public CustomPtrHeader(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

@SuppressLint("NewApi")
public CustomPtrHeader(Context context, AttributeSet attrs,
int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}

/**
* 初始化
*/
private void init() {
View view = LayoutInflater.from(getContext()).inflate(
R.layout.custom_ptr_header, this);
wave_view = (WaveView) view.findViewById(R.id.wave_view);
}

@Override
public void onUIReset(PtrFrameLayout frame) {

}

@Override
public void onUIRefreshPrepare(PtrFrameLayout frame) {

}

@Override
public void onUIRefreshBegin(PtrFrameLayout frame) {
/*  if (wave_view.getProgress()==0) {
for (i = 0; i < 100; i++) {
new Thread(){
public void run() {
UIKit.runOnMainThreadAsync(new Runnable() {

@Override
public void run() {
wave_view.setProgress(i);

if (wave_view.getProgress()==100) {
wave_view.setProgress(0);
}

}
});

try {
Thread.sleep(200);
} catch (InterruptedException e) {
e.printStackTrace();
}
};
}.start();
}
}*/

}

@Override
public void onUIRefreshComplete(PtrFrameLayout frame) {

}

@Override
public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch,
byte status, int oldPosition, int currentPosition,
float oldPercent, float currentPercent) {

float percent = Math.min(1f, currentPercent);

// if (status == PtrFrameLayout.PTR_STATUS_PREPARE) {
wave_view.setProgress((int) (percent * 100 * 1.0));
invalidate();
// }

}

/**
* 设置波纹进度
* @param progress 进度
*/
public void setWaveProgress(int progress){
wave_view.setProgress(progress);
}

}

头部定义好之后，就可以调用下拉刷新的代码


/* 创建自定义刷新头部view */
header = new CustomPtrHeader(this);
/* 设置刷新头部view */
ptr_view.setHeaderView(header);
/* 设置回调 */
ptr_view.addPtrUIHandler(header);
/* 设置下拉刷新监听 */
ptr_view.setPtrHandler(new PtrHandler() {

@Override
public void onRefreshBegin(PtrFrameLayout frame) {
refresh();
}

@Override
public boolean checkCanDoRefresh(PtrFrameLayout frame,
View content, View header) {
if (!StringUtils.isEmpty(mCurrentUrl)) {
return mCurrentUrl.equals("http://m.zmit.cn/")
|| mCurrentUrl.equals("http://m.zmit.cn/index.php") ? false
: mWebView.getScrollY() == 0;
} else {
return mWebView.getScrollY() == 0;
}

}
});
/* 延时100秒 */
ptr_view.postDelayed(new Runnable() {
@Override
public void run() {
ptr_view.autoRefresh();
}
}, 100);
/* 下拉时阻止事件分发 */
ptr_view.setInterceptEventWhileWorking(true);

这样就完成了，看下最终实现效果