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

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

# Android  # 下拉刷新  # Android 仿京东秒杀倒计时代码  # Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解  # Android中使用TextView实现高仿京东淘宝各种倒计时效果  # Android 仿京东、拼多多商品分类页的示例代码  # Android高仿京东垂直循环滚动新闻栏  # Android 仿京东侧滑筛选实例代码  # Android仿支付宝、京东的密码键盘和输入框  # Android仿京东、天猫商品详情页  # android仿京东商品属性筛选功能  # Android实现京东秒杀界面  # 小哥  # 京东  # 的是  # 加载  # 最外层  # 跑过  # 都是  # 是个  # 都不  # 有很多  # 则是  # 说到  # 感兴趣  # 这是一个  # 我们可以  # 去看  # 达到了  # 有兴趣  # 几种  # 较强 

相关文章： 建站之星多图banner生成与模板自定义指南  制作网站的软件免费下载,免费制作app哪个平台好？  如何在云主机上快速搭建网站？  建站之星安装后如何配置SEO及设计样式？  简历在线制作网站免费版,如何创建个人简历？  建站主机无法访问？如何排查域名与服务器问题  网站制作模板下载什么软件,ppt模板免费下载网站？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  网站专业制作公司有哪些,做一个公司网站要多少钱？  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  广州网站制作的公司,现在专门做网站的公司有没有哪几家是比较好的，性价比高，模板也多的？  如何选择网络建站服务器？高效建站必看指南  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  个人摄影网站制作流程,摄影爱好者都去什么网站？  重庆网站制作公司哪家好,重庆中考招生办官方网站？  黑客入侵网站服务器的常见手法有哪些？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  html制作网站的步骤有哪些,iapp如何添加网页？  如何在IIS中配置站点IP、端口及主机头？  如何快速生成专业多端适配建站电话？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  新网站制作渠道有哪些,跪求一个无线渠道比较强的小说网站，我要发表小说？  seo网站制作优化,网站SEO优化步骤有哪些？  ,南京靠谱的征婚网站？  电商网站制作价格怎么算,网上拍卖流程以及规则？  移民网站制作流程,怎么看加拿大移民官网？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  高端网站建设与定制开发一站式解决方案 中企动力  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  网站制作公司广州有几家,广州尚艺美发学校网站是多少？  *服务器网站为何频现安全漏洞？  建站之星导航如何优化提升用户体验？  营销式网站制作方案,销售哪个网站招聘效果最好？  教学网站制作软件,学习*后期制作的网站有哪些？  建站之星如何通过成品分离优化网站效率？  如何通过远程VPS快速搭建个人网站？  如何在阿里云购买域名并搭建网站？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  昆明高端网站制作公司,昆明公租房申请网上登录入口？  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Java解压缩zip - 解压缩多个文件或文件夹实例  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  如何通过VPS搭建网站快速盈利？  制作国外网站的软件,国外有哪些比较优质的网站推荐？