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

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

      zmit_ow

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


posted on 2015-05-14 23:56  colife  阅读(1106)  评论(0)  编辑  收藏  举报