Android仿京东到家下拉刷新

项目地址：https://github.com/TaoPaox/TpTools

公司的项目需要用到类似京东到家的下拉刷新,闲来无聊的时候研究一下,框架用的是 SmartRefreshLayout

先上图(录屏软件有点卡):

仿京东到家下拉刷新

一、分析

京东到家的下拉加载动画初看挺简单的，一共有三个状态。

  • 1、刚开始下拉的时候，小车从小变大的过程。
  • 2、下拉到一定程度松手,小车开始显示不停抖动的动画
  • 3、刷新结束的前400毫秒，小车要从左往右移动出去。

二、反编译App看实现原理

反编译虽然源码看不太清,但是我们可以拿到他用到的图片资源


图片动画资源

看到图片后知道原来它用的是最普通的帧动画啊，也不是太复杂。
拿到资源图片，知道实现原理，就开工吧！

三、实现动画效果

首先自定义View MyRefreshHeader继承自 LinearLayout，并实现 SmartRefreshLayout 的 RefreshHeader 接口。
然后主要就是重写 RefreshHeader 接口中的方法，里面提供了下拉刷新时不同阶段的回调，找到对应的方法码代码就好。

逻辑主要在 onStateChanged()方法里，代码中注释写的很详细。
切换状态原理是每次都给 ImageView 设置对应的资源图片或动画文件，然后得到 AnimationDrawable 开启动画

需要注意的是:当我们刷新完成的时候,需要延时400毫秒关闭刷新界面来显示小车平移的动画,这就需要在onFinish方法的返回值return 400;//延时400毫秒关闭下拉刷新,由于我们使用的是补间动画,平移动画结束的时候还会回到最初的位置,为了不让用户看到,我们设置平移动画的时长比刷新界面关闭的时长多100毫秒,这样用户就看不到这个变化,优化用户体验(京东到家就有此问题,不得不吐槽一下,大厂也不长点心啊)

代码如下:

/**
 * @Author：淘跑
 * @Date: 2018/4/1 09:35
 * @Use： SmartRefreshLayout 的自定义下拉刷新 Header
 * @
 * @-------------------修改记录-------------------@
 * @
 * @Modifier: 修改者  v1
 * @Data: 修改时间
 * @Version: 修改次数
 * @EditContent: 修改内容
 */

public class MyRefreshHeader extends LinearLayout implements RefreshHeader {
    private ImageView mImage;
    private AnimationDrawable refreshingAnim;
    private float mCurTranslationX;
    public MyRefreshHeader(Context context) {
        this(context, null, 0);
    }

    public MyRefreshHeader(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyRefreshHeader(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View view = View.inflate(context, R.layout.widget_my_refresh_header, this);
        mImage = (ImageView) view.findViewById(R.id.iv_refresh_header);
    }

    @NonNull
    @Override
    public View getView() {
        return this;
    }

    @Override
    public SpinnerStyle getSpinnerStyle() {
        return SpinnerStyle.Translate;
    }

    @Override
    public void onStartAnimator(RefreshLayout layout, int height, int extendHeight) {

    }

    /**
     * 状态改变时调用。
     * @param refreshLayout
     * @param oldState
     * @param newState
     */
    @Override
    public void onStateChanged(RefreshLayout refreshLayout, RefreshState oldState, RefreshState newState) {
        switch (newState) {
            case PullDownToRefresh: //下拉刷新开始。正在下拉还没松手时调用
                //每次重新下拉时，将图片资源重置为小车
                mImage.setImageResource(R.drawable.pull_to_refresh_people_0);
                break;
            case Refreshing: //正在刷新。只调用一次
                //状态切换为正在刷新状态时，设置图片资源为小车的动画并开始执行
                mImage.setImageResource(R.drawable.anim_mypull_refreshing);
                refreshingAnim = (AnimationDrawable) mImage.getDrawable();
                refreshingAnim.start();
                break;
            case RefreshFinish://刷新结束
                //刷新结束时调用该动画
                mCurTranslationX = mImage.getTranslationX();
                Animation translateAnimation = new TranslateAnimation(mCurTranslationX,1000,0,0);
                translateAnimation.setDuration(500);
                mImage.startAnimation(translateAnimation);
                break;
        }
    }

    /**
     * 动画结束后调用
     */
    @Override
    public int onFinish(RefreshLayout layout, boolean success) {
        // 结束动画
        if (refreshingAnim != null && refreshingAnim.isRunning()) {
            refreshingAnim.stop();
        }
        return 400;//延时400毫秒关闭下拉刷新
    }


    @Override
    public void setPrimaryColors(int... colors) {

    }

    @Override
    public void onInitialized(RefreshKernel kernel, int height, int extendHeight) {

    }

    /**
     * 下拉过程中不断调用此方法。从小变大的小车
     */

    @Override
    public void onMoving(boolean isDragging, float percent, int offset, int height, int maxDragHeight) {
        // 下拉的百分比小于100%时，不断调用 setScale 方法改变图片大小
        if (percent < 1) {
            mImage.setScaleX(percent);
            mImage.setScaleY(percent);
        }
    }

    @Override
    public void onReleased(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {

    }

    @Override
    public void onHorizontalDrag(float percentX, int offsetX, int offsetMax) {

    }

    @Override
    public boolean isSupportHorizontalDrag() {
        return false;
    }


}

贴出资源布局文件：

activity_jdrefresh

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    tools:context="com.taopao.rxjavaretrofitcutmvp.ui.activity.customview.refresh.JDRefreshActivity">
    >
    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/smart_mian"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.taopao.rxjavaretrofitcutmvp.widget.refresh.MyRefreshHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></com.taopao.rxjavaretrofitcutmvp.widget.refresh.MyRefreshHeader>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。"
                android:textSize="30dp" />
        </ScrollView>
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>
</LinearLayout>

widget_my_refresh_header

<?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"
    android:background="@color/white"
    android:padding="5dp">

    <ImageView
        android:layout_marginLeft="10dp"
        android:id="@+id/iv_refresh_header"
        android:layout_width="90dp"
        android:layout_height="80dp"
        android:scaleX="0"
        android:scaleY="0"
        android:translationY="0dp" />
    <ImageView
        android:layout_centerInParent="true"
        android:src="@drawable/pull_to_refresh_text_jddj"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />
</RelativeLayout>

anim_mypull_refreshing

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="50" android:drawable="@drawable/pull_to_refresh_people_0" />
    <item android:duration="50" android:drawable="@drawable/pull_to_refresh_people_1" />
    <item android:duration="50" android:drawable="@drawable/pull_to_refresh_people_2" />
    <item android:duration="50" android:drawable="@drawable/pull_to_refresh_people_3" />
    <item android:duration="50" android:drawable="@drawable/pull_to_refresh_people_4" />
    <item android:duration="50" android:drawable="@drawable/pull_to_refresh_people_5" />
</animation-list>

代码中调用

 private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            mSmartMian.finishRefresh();
        }
  };
  //主要代码
  mSmartMian.setOnRefreshListener(new OnRefreshListener() {
            @Override
            public void onRefresh(@NonNull RefreshLayout refreshLayout) {
                //模拟加载过程,延时关闭刷新
                mHandler.sendEmptyMessageDelayed(10, 1300);
            }
   });

好啦，以上就是仿京东到家下拉刷新自定义动画的实现过程。

项目地址：https://github.com/404NotFuond/RxJava-Retrofit-CutMvp

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,277评论 6赞 503
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,689评论 3赞 393
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,624评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,356评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,402评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,292评论 1赞 301
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,135评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,992评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,429评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,492评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,092评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2赞 354

推荐阅读更多精彩内容