自定义下拉刷新控件-仿美团刷新效果

概述

下拉刷新是平时项目中最常用的功能,今天要说的就是如何自定义下拉刷新控件。
　　第三方刷新控件也比较多，例如Android-PullToRefresh,XListView等，但是这些控件自定义刷新头部不那么容易扩展，它们基于addHeaderView作为刷新控件头部，耦合性较高。
　　我们采用android-Ultra-Pull-To-Refresh，支持任何View下拉刷新，刷新头部可灵活自定义。核心类PtrFrameLayout继承ViewGroup内部采用headerView+ContentView的组合,headerView就是自定义的刷新头部控件，contentView就是点击可进行刷新的View。下面我们借助该控件轻松实现仿美团的下拉刷新效果。

效果图如下：

仿美团下拉刷新

思路

1. 分析下拉刷新有几个阶段
   step0:下拉/准备下拉状态 [图片缩放阶段]
   step1:下拉->可刷新状态 [从图片缩放阶段到动画翻滚动画]
   step2:刷新状态[来回摇头动画]
   step3:刷新结束状态[取消动画]
   step4:可刷新->下拉状态[动画翻滚之后的图片到图片缩放阶段]
2. 实现对应状态的效果
3. 通过headerView implemets PtrUIHandler把状态效果和刷新过程对应起来
4. 通过extends PtrFrameLayout把自定义headerView注入

关键代码

1.下拉刷新的布局文件header_meituan.xml

主要包括三个ImageView（分别用于显示图片缩放，播放一次翻滚帧动画，播放循环摇头动画）和一个TextView（显示刷新状态文字，下拉刷新，释放刷新，刷新中...，刷新完成。）
注意：ivFirst需要设置android:scaleType="matrix"，否则ivFirst.setImageMatrix(mMatrix)缩放图片无效。
2.状态时的效果实现
step0：下拉/准备下拉状态，此阶段是图片的一个缩放,过程关键代码如下

private void pullStep0(float scale) {
    ivFirst.setVisibility(View.VISIBLE);
    ivSecond.setVisibility(View.INVISIBLE);
    ivThird.setVisibility(View.INVISIBLE);
    scaleImage(scale);
    tvMsg.setText(getResources().getString(R.string.cube_ptr_pull_down_to_refresh));
}

private void scaleImage(float scale) {
    mMatrix.setScale(scale, scale, ivFirst.getWidth() / 2, ivFirst.getHeight() / 2);
    ivFirst.setImageMatrix(mMatrix);
}

setp1：下拉->可刷新状态，此阶段是播放一个帧动画,过程关键代码如下

    private void pullStep1(PtrFrameLayout frame) {
        if (!frame.isPullToRefresh()) {
            ivFirst.setVisibility(View.INVISIBLE);
            ivSecond.setVisibility(View.VISIBLE);
            ivThird.setVisibility(View.INVISIBLE);
            mSecondAnimation.start();
            tvMsg.setText(getResources().getString(R.string.cube_ptr_release_to_refresh));
        }
    }

step2：刷新状态，此阶段是播放一个帧动画[循环播放],过程关键代码如下

    private void pullStep2() {
        ivFirst.setVisibility(View.INVISIBLE);
        ivSecond.setVisibility(View.INVISIBLE);
        ivThird.setVisibility(View.VISIBLE);
        cancelAnimationSecond();
        mThirdAnimation.start();
        tvMsg.setText(R.string.cube_ptr_refreshing);
    }

step3：刷新结束状态，此阶段是取消相关动画，隐藏headerView

    private void pullStep3() {
        ivFirst.setVisibility(View.INVISIBLE);
        ivSecond.setVisibility(View.INVISIBLE);
        ivThird.setVisibility(View.VISIBLE);
        cancelAnimationThird();
        tvMsg.setText(getResources().getString(R.string.cube_ptr_refresh_complete));
    }

step4：可刷新->下拉状态，此阶段主要就是从step2>step0状态切换

    private void pullStep4() {
        ivFirst.setVisibility(View.VISIBLE);
        ivSecond.setVisibility(View.INVISIBLE);
        ivThird.setVisibility(View.INVISIBLE);
        tvMsg.setText(getResources().getString(R.string.cube_ptr_pull_down_to_refresh));
    }

3.借助PtrUIHandler接口，实现对应方法，来搭配刷新的几个状态。

public interface PtrUIHandler {
    /**
     * When the content view has reached top and refresh has been completed, view will be reset.
     * 刷新结束隐藏hederView
     * @param frame
     */
    public void onUIReset(PtrFrameLayout frame);
    /**
     * prepare for loading
     * 准备刷新[对应step0]
     * @param frame
     */
    public void onUIRefreshPrepare(PtrFrameLayout frame);
    /**
     * perform refreshing UI
     * 刷新中[对应step2]
     * @param frame
     */
    public void onUIRefreshBegin(PtrFrameLayout frame);
    /**
     * perform UI after refresh
     * 刷新结束[对应step3]
     * @param frame
     */
    public void onUIRefreshComplete(PtrFrameLayout frame);
    /**
     * perform UI after refresh
     * 下拉，上拉过程[逻辑判断对应step0,step4]
     * @param frame
     */
    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, int oldPosition, int currentPosition, float oldPercent, float currentPercent);
}

onUIPositionChange控制着三个状态的切换，核心代码如下

   @Override
public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
       final int mOffsetToRefresh = frame.getOffsetToRefresh();
       final int currentPos = ptrIndicator.getCurrentPosY();
       final int lastPos = ptrIndicator.getLastPosY();
       if (lastPos < mOffsetToRefresh) {
           if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
           // step0:下拉状态，根据距离对图片进行缩放
               float scale = lastPos / Float.valueOf(mOffsetToRefresh);
               pullStep0(scale);
           }
       }
       // mOffsetToRefresh:下拉刷新的阈值，也就是下拉距离(currentPos)超过时才变成(释放刷新)，该值默认为布局文件header_meituan.xml高度的1.2倍，可通过在PtrFrameLayout设置app:ptr_ratio_of_header_height_to_refresh进行修改。
       // currentPos当前滑动的距离
       // lastPos上次滑动的距离
       // currentPos与lastPos始终差1
       // 下拉时：currentPos=lastPos+1;
       // 上滑时：currentPos=lastPos-1;
       Log.i(TAG, "mOffsetToRefresh =" + mOffsetToRefresh + ",currentPos =" + currentPos + ",lastPos =" + lastPos);
       if (currentPos < mOffsetToRefresh && lastPos >= mOffsetToRefresh) {
           if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
           // step4:可刷新->下拉状态[动画翻滚之后的图片到图片缩放阶段]
               pullStep4();
           }
       } else if (currentPos > mOffsetToRefresh && lastPos <= mOffsetToRefresh) {
           if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
           //step1:下拉->可刷新状态 [从图片缩放阶段到动画翻滚动画]   
               pullStep1(frame);
           }
       }
}

源码

https://github.com/zhetengxiang/MeiTuanRefresh

总结：

整体实现其实比较简单，使用matrxi缩放图片，播放帧动画实现动画效果，implements PtrUIHandler 实现下拉过程状态的切换和展示，extends PtrFrameLayout实现headerView的注入。使用的时候直接使用PtrlMeiTuanFrameLayout就可以了。
　　第一次写博客，请轻拍。

参考资料

http://www.imooc.com/article/2112
https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh