Android仿京东、天猫下拉刷新效果

说到下拉刷新，相信大家都不陌生，现在基本上每个项目都会用到。我们公司的项目一直都是使用swiperefreshlayout，官方的material design风格，好用少bug。现在下拉刷新大概有下面几种实现方式：一种是直接包在listview或者recyclerview的头部，有的则是像swiperefreshlayout一样，包在视图的最外层，个人建议使用包在最外层的做法，可拓展性比较强。下面用包在最外层的方法实现京东和天猫的下拉刷新。

1.使用框架android-ultra-pull-to-refresh

https://github.com/liaohuqiu/android-ultra-pull-to-refresh

大家有兴趣的可以去看一下这个下拉刷新框架，可拓展性非常强，兼容各种view的下拉刷新事件。

2.京东下拉刷新

先看看京东的下拉刷新动画：

从上图可以看出，就是一个动画，当然截图有点卡，首先，我们解压手机京东的app，得到上面的图片：

先看看头部刷新的布局怎么实现：
jd_refresh_header_view.xml

<?xml version="1.0" encoding="utf-8"?> 
<relativelayout 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content"> 
 
 <framelayout 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_toleftof="@+id/layout_tx"> 
 
  <imageview 
   android:id="@+id/iv_man" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:background="@drawable/a2a" /> 
 
  <imageview 
   android:id="@+id/iv_goods" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:layout_gravity="right|center" 
   android:src="@drawable/a29" /> 
 </framelayout> 
 
 <linearlayout 
  android:id="@+id/layout_tx" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_centerinparent="true" 
  android:layout_marginleft="5dp" 
  android:gravity="center_vertical" 
  android:orientation="vertical" 
  android:padding="5dp"> 
 
  <textview 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="让购物更便捷" 
   android:textsize="14sp" /> 
 
  <textview 
   android:id="@+id/tv_remain" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:layout_margintop="5dp" 
   android:text="松开刷新" 
   android:textsize="12sp" /> 
 </linearlayout> 
</relativelayout> 

咱们再看看android-ultra-pull-to-refresh这个框架：

package in.srain.cube.views.ptr; 
 
import in.srain.cube.views.ptr.indicator.ptrindicator; 
 
/** 
 * 
 */ 
public interface ptruihandler { 
 
 /** 
  * when the content view has reached top and refresh has been completed, view will be reset. 
  * 
  * @param frame 
  */ 
 public void onuireset(ptrframelayout frame); 
 
 /** 
  * prepare for loading 
  * 
  * @param frame 
  */ 
 public void onuirefreshprepare(ptrframelayout frame); 
 
 /** 
  * perform refreshing ui 
  */ 
 public void onuirefreshbegin(ptrframelayout frame); 
 
 /** 
  * perform ui after refresh 
  */ 
 public void onuirefreshcomplete(ptrframelayout frame); 
 
 public void onuipositionchange(ptrframelayout frame, boolean isundertouch, byte status, ptrindicator ptrindicator); 
} 

这是一个下拉刷新事件处理接口，包括准备刷新，开始刷新，刷新完成和刷新改变等事件的处理，直接上代码：
jdrefreshheader.java

package com.jackie.pulltorefresh.jd; 
 
import android.content.context; 
import android.graphics.drawable.animationdrawable; 
import android.util.attributeset; 
import android.view.layoutinflater; 
import android.view.view; 
import android.widget.framelayout; 
import android.widget.imageview; 
import android.widget.textview; 
 
import com.jackie.pulltorefresh.r; 
 
import in.srain.cube.views.ptr.ptrframelayout; 
import in.srain.cube.views.ptr.ptruihandler; 
import in.srain.cube.views.ptr.indicator.ptrindicator; 
 
/** 
 * 下拉刷新headerview 
 */ 
public class jdrefreshheader extends framelayout implements ptruihandler { 
 /** 
  * 提醒文本 
  */ 
 private textview mtvremind; 
 
 /** 
  * 快递员logo 
  */ 
 private imageview mivman; 
 
 /** 
  * 商品logo 
  */ 
 private imageview mivgoods; 
 
 /** 
  * 状态识别 
  */ 
 private int mstate; 
 
 /** 
  * 重置 
  * 准备刷新 
  * 开始刷新 
  * 结束刷新 
  */ 
 public static final int state_reset = -1; 
 public static final int state_prepare = 0; 
 public static final int state_begin = 1; 
 public static final int state_finish = 2; 
 
 public static final int margin_right = 100; 
 
 /** 
  * 动画 
  */ 
 private animationdrawable manimationdrawable; 
 
 
 public jdrefreshheader(context context) { 
  this(context, null); 
 } 
 
 public jdrefreshheader(context context, attributeset attrs) { 
  this(context, attrs, 0); 
 } 
 
 public jdrefreshheader(context context, attributeset attrs, int defstyleattr) { 
  super(context, attrs, defstyleattr); 
 
  initview(); 
 } 
 
 /** 
  * 初始化view 
  */ 
 private void initview() { 
  view view = layoutinflater.from(getcontext()).inflate(r.layout.jd_refresh_header_view, this, false); 
  mtvremind = (textview) view.findviewbyid(r.id.tv_remain); 
  mivman = (imageview) view.findviewbyid(r.id.iv_man); 
  mivgoods = (imageview) view.findviewbyid(r.id.iv_goods); 
  addview(view); 
 } 
 
 
 @override 
 public void onuireset(ptrframelayout frame) { 
  mstate = state_reset; 
 } 
 
 @override 
 public void onuirefreshprepare(ptrframelayout frame) { 
  mstate = state_prepare; 
 } 
 
 @override 
 public void onuirefreshbegin(ptrframelayout frame) { 
  mstate = state_begin; 
  //隐藏商品logo,开启跑步动画 
  mivgoods.setvisibility(view.gone); 
  mivman.setbackgroundresource(r.drawable.runningman); 
  manimationdrawable = (animationdrawable) mivman.getbackground(); 
  if (!manimationdrawable.isrunning()) { 
   manimationdrawable.start(); 
  } 
 } 
 
 @override 
 public void onuirefreshcomplete(ptrframelayout frame) { 
  mstate = state_finish; 
  mivgoods.setvisibility(view.visible); 
  //停止动画 
  if (manimationdrawable.isrunning()) { 
   manimationdrawable.stop(); 
  } 
  mivman.setbackgroundresource(r.drawable.a2a); 
 } 
 
 @override 
 public void onuipositionchange(ptrframelayout frame, boolean isundertouch, byte status, ptrindicator ptrindicator) { 
  //处理提醒字体 
  switch (mstate) { 
   case state_prepare: 
    //logo设置 
    mivman.setalpha(ptrindicator.getcurrentpercent()); 
    mivgoods.setalpha(ptrindicator.getcurrentpercent()); 
    layoutparams params = (layoutparams) mivman.getlayoutparams(); 
    if (ptrindicator.getcurrentpercent() <= 1) { 
     mivman.setscalex(ptrindicator.getcurrentpercent()); 
     mivman.setscaley(ptrindicator.getcurrentpercent()); 
     mivgoods.setscalex(ptrindicator.getcurrentpercent()); 
     mivgoods.setscaley(ptrindicator.getcurrentpercent()); 
     int marginright = (int) (margin_right - margin_right * ptrindicator.getcurrentpercent()); 
     params.setmargins(0, 0, marginright, 0); 
     mivman.setlayoutparams(params); 
    } 
 
    if (ptrindicator.getcurrentpercent() < 1.2) { 
     mtvremind.settext("下拉刷新..."); 
    } else { 
     mtvremind.settext("松开刷新..."); 
    } 
    break; 
   case state_begin: 
    mtvremind.settext("更新中..."); 
    break; 
   case state_finish: 
    mtvremind.settext("加载完成..."); 
    break; 
  } 
 } 
} 

创建一个成员变量mstate，用于保存下拉刷新的时候，每一个状态，然后根据保存好的状态在uipositionchange的接口中，对ui进行相应的修改，保存每个状态文本的提示，在下拉的过程中，通过uipositionchange的回调，获取ptrindicator中，可以获取下拉的百分比，根据这个百分比我们可以做很多东西，例如京东的快递小哥从远处跑过来拿商品，以及快递小哥与商品之间的大小，都可以根据这个ptrindicator百分比进行设置其大小的比例，跑过来这个过程我使用的方法是利用marginright进行设置两者之间的距离，当达到下拉刷新的临界点时，快递小哥跟商品之间的margin为0，达到了快递小哥获取商品的效果，然后当刷新的时候，隐藏商品，使用之前所提供的三张图片进行效应的切换，也就是动画：

<?xml version="1.0" encoding="utf-8"?> 
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> 
 <item 
  android:drawable="@drawable/a2b" 
  android:duration="70" /> 
 <item 
  android:drawable="@drawable/a2c" 
  android:duration="70" /> 
 <item 
  android:drawable="@drawable/a2d" 
  android:duration="70" /> 
</animation-list> 

效果图如下：

3.天猫下拉刷新

天猫的更简单，毫无动画可言，说白了就是个gif，大家可以去下载个apk，解压后能得到其gif。原理跟之前的是一样，但这里我使用的是fresco进行加载gif，方法有很多，大家感兴趣的可以去试试。

tmallrefreshheader.java

package com.jackie.pulltorefresh.tmall; 
 
import android.content.context; 
import android.net.uri; 
import android.util.attributeset; 
import android.view.layoutinflater; 
import android.view.view; 
import android.widget.framelayout; 
import android.widget.textview; 
 
import com.facebook.drawee.backends.pipeline.fresco; 
import com.facebook.drawee.interfaces.draweecontroller; 
import com.facebook.drawee.view.simpledraweeview; 
import com.jackie.pulltorefresh.r; 
 
import in.srain.cube.views.ptr.ptrframelayout; 
import in.srain.cube.views.ptr.ptruihandler; 
import in.srain.cube.views.ptr.indicator.ptrindicator; 
 
/** 
 * 下拉刷新headerview 
 */ 
public class tmallrefreshheader extends framelayout implements ptruihandler { 
 
 /** 
  * 提醒文本 
  */ 
 private textview mtvremind; 
 
 
 /** 
  * 状态识别 
  */ 
 private int mstate; 
 
 /** 
  * 重置 
  * 准备刷新 
  * 开始刷新 
  * 结束刷新 
  */ 
 public static final int state_reset = -1; 
 public static final int state_prepare = 0; 
 public static final int state_begin = 1; 
 public static final int state_finish = 2; 
 
 
 public tmallrefreshheader(context context) { 
  this(context, null); 
 } 
 
 public tmallrefreshheader(context context, attributeset attrs) { 
  this(context, attrs, 0); 
 } 
 
 public tmallrefreshheader(context context, attributeset attrs, int defstyleattr) { 
  super(context, attrs, defstyleattr); 
 
  initview(); 
 } 
 
 /** 
  * 初始化view 
  */ 
 private void initview() { 
  view view = layoutinflater.from(getcontext()).inflate(r.layout.tmall_refresh_header_view, this, false); 
  mtvremind = (textview) view.findviewbyid(r.id.tv_remind); 
  simpledraweeview sdv = (simpledraweeview) view.findviewbyid(r.id.tm_logo); 
  draweecontroller draweecontroller = fresco.newdraweecontrollerbuilder() 
    .setautoplayanimations(true) 
    //设置uri,加载本地的gif资源 
    .seturi(uri.parse("res://" + getcontext().getpackagename() + "/" + r.drawable.tm_mui_bike))//设置uri 
    .build(); 
  sdv.setcontroller(draweecontroller); 
  addview(view); 
 } 
 
 
 @override 
 public void onuireset(ptrframelayout frame) { 
  mstate = state_reset; 
 } 
 
 @override 
 public void onuirefreshprepare(ptrframelayout frame) { 
  mstate = state_prepare; 
 } 
 
 @override 
 public void onuirefreshbegin(ptrframelayout frame) { 
  mstate = state_begin; 
 } 
 
 @override 
 public void onuirefreshcomplete(ptrframelayout frame) { 
  mstate = state_finish; 
 } 
 
 @override 
 public void onuipositionchange(ptrframelayout frame, boolean isundertouch, byte status, ptrindicator ptrindicator) { 
  //处理提醒字体 
  switch (mstate) { 
   case state_prepare: 
    if (ptrindicator.getcurrentpercent() < 1) { 
     mtvremind.settext("下拉刷新"); 
    } else { 
     mtvremind.settext("松开立即刷新"); 
    } 
    break; 
   case state_begin: 
    mtvremind.settext("正在刷新..."); 
    break; 
   case state_finish: 
    mtvremind.settext("加载完成..."); 
    break; 
  } 
 } 
} 

效果图如下：

最后附上github地址：
https://github.com/shineflower/jdtmallpulltorefresh

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。