最新消息:文章中包含代码时,请遵守代码高亮规范!

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

Android Robin 44663浏览 12评论

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

device-2015-02-14-220433

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

device-2015-02-14-222335

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

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

zmit_ow

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/7787.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者wangbin的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!

网友最新评论 (12)

  1. 有源码吗? hbpj520@qq.com 拜谢!!,另外博客很好看,基于wordpress的吗
    Vains2015-05-29 18:54
  2. 跪求源码DEMO,麻烦发送我的邮箱下,谢谢243072794@qq.com
    2015-06-08 11:11
  3. :mrgreen:
    Bruin2015-06-12 21:00
  4. 这么厉害 :mrgreen:
    Sun2015-06-12 22:43
  5. 同求demo 475842898@qq.com
    全局变量 k2015-08-24 11:23
  6. 有源码吗。发一份哈。谢谢
    nick2015-10-16 17:42
  7. 求一份源码,我在配置git上的ptr_lib 后,不报错,但是跑的时候总是会崩掉。
    shoneworn2015-10-28 15:02
  8. 在吗?
    ostes2015-10-28 15:43
  9. 跪求demo,邮箱1149324777@qq.com 谢谢了
    2015-12-07 15:37
  10. 跪求Demo,862568606@qq.com
    2015-12-16 15:30