仿美团外卖下拉刷新效果

我们经常看到有一些app有着炫酷的下拉刷新动画，比如美团外卖是骑着电车的袋鼠飞驰在路上，如下图：

美团外卖下拉刷新

那这么炫酷的效果是怎么做出来的呢，这里可以参照一下 快速仿写京东、天猫下拉刷新的讲解。
我们的下拉刷新的效果是在android-Ultra-Pull-To-Refresh框架上做的扩展，这是一款非常强大的下拉刷新框架，有着默认的下拉刷新动画，当然如果我们要实现一些复杂的效果就需要我们自己动手了。android-Ultra-Pull-To-Refresh是支持修改下拉刷新头部布局的。
首先我们自定义一个view继承FrameLayout并实现PtrUIHandler接口，在构造方法中加载需要的布局文件，

 public MeituanRefreshHeader(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    private void initView() {
        View view = LayoutInflater.from(getContext()).inflate(R.layout.meituanptr_head, null);
        ptrHead = (ImageView) view.findViewById(R.id.ptr_iv);
        addView(view);
    }

PtrUIHandler接口的作用就是提供下拉过程中每部分所调用的方法，我们只需要在这些回调的方法中实现自己的效果就可以了。这里我们主要用到的有：
onUIRefreshPrepare
onUIRefreshBegin
onUIRefreshComplete
onUIPositionChange
四个方法。
这里比较重要的是onUIPositionChange这个方法，在这个方法中我们可以获取到下拉刷新的比例，然后对控件进行缩放，

    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
        switch (state) {
            case JdRefreshHeader.STATE_PREPARE:
                if (ptrIndicator.getCurrentPercent() < 1.0f) {
                    ptrHead.setScaleX(ptrIndicator.getCurrentPercent());
                    ptrHead.setScaleY(ptrIndicator.getCurrentPercent());
                }
                break;
        }
    }

在我们松开手之后会调用onUIRefreshBegin方法，这时候只是一张图片就不行了，需要我们将控件背景修改成一幅动态的画面

 @Override
    public void onUIRefreshBegin(PtrFrameLayout frame) {
        state = JdRefreshHeader.STATE_BEGIN;
        ptrHead.setBackgroundResource(R.drawable.meituan_head);
        drawable = (AnimationDrawable) ptrHead.getBackground();
        if (!drawable.isRunning()) {
            drawable.start();
        }
    }

当然这里的背景是由animation-list实现的，这里不再多说，在完成之后会调用onUIRefreshComplete，我们需要将动画停止并换到之前的图片：

 @Override
    public void onUIRefreshComplete(PtrFrameLayout frame, boolean isHeader) {
        if (drawable != null && drawable.isRunning()) {
            drawable.stop();
        }
        ptrHead.setBackgroundResource(R.mipmap.a5n);
    }

最后我们自定义类继承PtrClassicFrameLayout，并在构造方法中添加布局和监听：

public JdRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    /**
     * 初始化view
     */
    private void initView() {
        MeituanRefreshHeader mHeaderView = new MeituanRefreshHeader(getContext());
        setHeaderView(mHeaderView);
        addPtrUIHandler(mHeaderView);
        setResistance(3);
    }

ok，我们看一下效果：

效果图

美团外卖下拉刷新

仔细对比一下就会发现我们现在做的并没有下图的效果好，因为下图是从下拉开始就可以看到袋鼠在一点一点的放大，而上图确是下拉到一定程度之后才能看到袋鼠的下半身，这又是什么原因造成的呢？
首先我们要知道下拉刷新的头布局是有一定高度的，当我们下拉的时候，头布局的底部先出来，而在下拉刷新刚开始的时候，头布局的控件会缩放的非常小，而setScaleX方法默认是以控件的中心缩放的，所以在下拉的时候控件会以中心逐渐放大，所以会像上图一样慢慢看到袋鼠的全部。那么怎样才能像下图一样从一开始就可以看到袋鼠的全部呢，刚才我们说了，安卓中setScaleX默认是以控件的中心缩放的，我们完全可以将他的中心点修改成最底部并且水平居中，这样一来在下拉的时候袋鼠就会从底部向上开始放大，于是就有了下图的效果：

 if (ptrIndicator.getCurrentPercent() < 1.0f) {
       ptrHead.setPivotX(ptrHead.getWidth() / 2);
       ptrHead.setPivotY(ptrHead.getHeight());
       ptrHead.setScaleX(ptrIndicator.getCurrentPercent());
       ptrHead.setScaleY(ptrIndicator.getCurrentPercent());
   }

需要注意的是setPivotX的参数是以像素为单位的，到这里就大功告成了。