Android 定制下拉刷新头部 Ultra Pull To Refresh

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

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

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

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

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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124

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

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

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

   /* 创建自定义刷新头部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);

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

   

   本文永久地址：http://blog.it985.com/7787.html
   本文出自 IT985博客 ，转载时请注明出处及相应链接。