如今，下拉刷新都已经成为App的标配了，哪个App会没有下拉刷新呢？作为一个普通app用户，想要去刷新内容，习惯性地就下拉一下，已经成为用户的一种习惯啦。作为一个开发者，想要集成下拉刷新，直接就拷贝Android-PullToRefresh或者是android-Ultra-Pull-To-Refresh又或者其他下拉刷新库，直接使用经典的下拉刷新UI，一个标志性的下拉箭头，一句经典的下拉以刷新更多。一开始还好，慢慢的作为一个使用者而言，就觉得没什么新意了，作为一个开发者也觉得没什么挑战了。

那这样，何不尝试自己动手去实现一个真正属于自己的下拉刷新库呢？嘿嘿，那说干就干呗。那想想，现在下拉刷新的轮子那么多，我们也不可能从零开始写，时间也不允许啊，白天要上班写业务代码，回到宿舍还得重复别人写过的代码，而且自己写的还派不上用场，因为已经有现成的，而且别人写的东西那么多人用上了，踩过的坑肯定比你想的要多。虽然话说凡事要自己去实践，理解的才会更深。说是这么说，但是我还是觉得站在巨人肩膀上，才会看得更远，嘿嘿......

正因为如此，我才基于android-Ultra-Pull-To-Refresh实现一个很Q的笑脸下拉刷新，不吹不黑，真的很Q哦。这个下拉大概的效果就是，下拉时，随header高度变化而缩放、转眼睛，转啊转。松开时，一个转眼睛的笑脸加载动画。

扯那么多，我自己都觉得有点不耐烦了。下面来简要分析一下，怎么去实现一个个性化的下拉刷新库。以下是整个库的目录，想不到吧，就仅仅三个类，一个布局文件。就可以实现你自己能想到的下拉效果。

Paste_Image.png

下面贴出最主要相关的类

• PullToRefreshFaceView

/**
 *
 * @作 用:下拉刷新的笑脸
 * @创 建 人: linguoding
 * @日 期: 2016/3/9
 */
public class PullToRefreshFaceView extends View {
    private Paint paint;//画笔
    private Paint eyePaint;
    private int backgroupColor;
    private int width;
    private int height;
    private int centerWidth;
    private int centerHeight;
    private float degrees;
    private float radius = 0;
    private float sweepRadius = 180;

    private int radiusCircle;
    private int eyeRadius;
    private int eyeBallRadius;
    private boolean isDrawFace = false;

    AnimatorSet set = new AnimatorSet();


    public PullToRefreshFaceView(Context context) {
        super(context);
        initView();
    }

    public PullToRefreshFaceView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.LoadingView);
        backgroupColor = array.getColor(R.styleable.LoadingView_backgroupColor, Color.BLACK);
        array.recycle();
        initView();

    }

    public void setDegrees(float degrees) {
        this.degrees = degrees;
        invalidate();
    }

    public void setRadius(float radius) {
        this.radius = radius;
        invalidate();
    }

    public void setSweepRadius(float sweepRadius) {
        this.sweepRadius = sweepRadius;
        invalidate();
    }

    public void setRadiusCircle(int radiusCircle) {
        this.radiusCircle = radiusCircle;
    }

    public void setEyeRadius(int eyeRadius) {
        this.eyeRadius = eyeRadius;

    }

    public void setEyeBallRadius(int eyeBallRadius) {
        this.eyeBallRadius = eyeBallRadius;

    }

    public void setDrawFace(boolean isDrawFace) {
        this.isDrawFace = isDrawFace;
    }

    public int getRadiusCircle() {
        return radiusCircle;
    }

    public int getEyeRadius() {
        return eyeRadius;
    }

    public int getEyeBallRadius() {
        return eyeBallRadius;
    }

    public boolean isDrawFace() {
        return isDrawFace;
    }

    public void setBackgroupColor(int backgroupColor) {
        this.backgroupColor = backgroupColor;
    }

    /**
     * 刷新用的效果
     *
     * @param sunRadius
     * @param per
     */
    public void setPerView(int sunRadius, float per) {
        if (per >= 0.5) {
            isDrawFace = true;
        } else {
            isDrawFace = false;
        }
        per = Math.min(per, 1);
        float tempRadius = sunRadius * per;
        this.radiusCircle = (int) tempRadius;
        invalidate();
    }





    private void initView() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(backgroupColor);
        //眼眶画笔
        eyePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        eyePaint.setColor(Color.WHITE);
        eyePaint.setStyle(Paint.Style.FILL);
        createAnimatorSet();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        /*super.onMeasure(widthMeasureSpec, heightMeasureSpec);*/
        width = measureResult(widthMeasureSpec);
        height = measureResult(heightMeasureSpec);
        centerWidth = width >> 1;
        centerHeight = height >> 1;
        setMeasuredDimension(width, height);

    }

    private int measureResult(int widthMeasureSpec) {
        int result = 0;
        int sizeSpec = MeasureSpec.getSize(widthMeasureSpec);
        int modeSpec = MeasureSpec.getMode(widthMeasureSpec);
        if (modeSpec == MeasureSpec.EXACTLY) {
            result = sizeSpec;
        } else {
            result = 400;
            if (modeSpec == MeasureSpec.AT_MOST) {
                result = Math.min(result, sizeSpec);
            }
        }
        return result;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        centerWidth = width / 2;
        centerHeight = height / 2;
        canvas.translate(centerWidth, centerHeight);
        radiusCircle = Math.min(centerWidth, centerHeight);
        //画圆
        canvas.drawCircle(0, 0, radiusCircle, paint);
        if (isDrawFace) {
            //画两个眼框
            eyeRadius = Math.min(centerWidth / 3, centerHeight / 3);
            canvas.drawCircle(-centerWidth / 2, -centerHeight >> 3, eyeRadius, eyePaint);
            canvas.drawCircle(centerWidth / 2, -centerHeight >> 3, eyeRadius, eyePaint);
            //画嘴巴
            canvas.drawArc(new RectF(-eyeRadius, 0, eyeRadius, eyeRadius * 2), 0, 180, true, eyePaint);

            canvas.save();
            //画两个眼睛
            eyeBallRadius = Math.min(centerWidth >> 3, centerHeight >> 3);
            canvas.translate(-centerWidth / 2, -centerHeight >> 3);
            canvas.rotate(-degrees);
            canvas.drawCircle(0, (eyeRadius >> 1), eyeBallRadius, paint);
            canvas.restore();

            canvas.save();

            canvas.translate(centerWidth / 2, -centerHeight >> 3);
            canvas.rotate(-degrees);
            canvas.drawCircle(0, (eyeRadius >> 1), eyeBallRadius, paint);
            canvas.restore();

            //画两个眼皮
            canvas.save();
            canvas.translate(-centerWidth / 2, -centerHeight >> 3);
            canvas.drawArc(new RectF(-eyeRadius, -eyeRadius, eyeRadius, eyeRadius), -this.radius, -this.sweepRadius, false, paint);
            canvas.restore();

            canvas.save();
            canvas.translate(centerWidth / 2, -centerHeight >> 3);
            canvas.drawArc(new RectF(-eyeRadius, -eyeRadius, eyeRadius, eyeRadius), -this.radius, -this.sweepRadius, false, paint);
            canvas.restore();
        }


    }

    private void createAnimatorSet() {
        ValueAnimator rotateAnimator = ValueAnimator.ofFloat(0, 360).setDuration(3000);
        rotateAnimator.setInterpolator(new LinearInterpolator());
        rotateAnimator.setRepeatCount(-1);
        rotateAnimator.setEvaluator(new FloatEvaluator());
        rotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                degrees = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });

        ValueAnimator translationAnimator = ValueAnimator.ofFloat(0, 90, 0).setDuration(3000);
        translationAnimator.setInterpolator(new LinearInterpolator());
        translationAnimator.setRepeatCount(-1);
        translationAnimator.setEvaluator(new FloatEvaluator());
        translationAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                radius = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });

        ValueAnimator sweepAnimator = ValueAnimator.ofFloat(180, 0, 180).setDuration(3000);
        sweepAnimator.setInterpolator(new LinearInterpolator());
        sweepAnimator.setRepeatCount(-1);
        sweepAnimator.setEvaluator(new FloatEvaluator());
        sweepAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                sweepRadius = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        set.playTogether(rotateAnimator, translationAnimator, sweepAnimator);
    }

    public void startAnimators() {
        set.start();
    }

    public void stopAnimators() {
        set.cancel();
    }
}

• FacePullToRefreshHeader 类

package com.pulltorefreshlibrary;

import android.content.Context;
import android.content.SharedPreferences;
import android.support.v4.view.ViewCompat;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.pulltorefreshlibrary.view.PullToRefreshFaceView;

import java.text.SimpleDateFormat;
import java.util.Date;

import in.srain.cube.views.ptr.PtrFrameLayout;
import in.srain.cube.views.ptr.PtrUIHandler;
import in.srain.cube.views.ptr.indicator.PtrIndicator;

public class FacePullToRefreshHeader extends FrameLayout implements PtrUIHandler {
    private final static String KEY_SharedPreferences = "face_ptr_classic_last_update";
    private TextView mTitleTextView;
    private PullToRefreshFaceView mLoadView;
    private long mLastUpdateTime = -1;
    private TextView mLastUpdateTextView;
    private String mLastUpdateTimeKey;
    private static SimpleDateFormat sDataFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    private boolean mShouldShowLastUpdate;

    private LastUpdateTimeUpdater mLastUpdateTimeUpdater = new LastUpdateTimeUpdater();


    public FacePullToRefreshHeader(Context context) {
        super(context);
        initViews(null);
    }

    public FacePullToRefreshHeader(Context context, AttributeSet attrs) {
        super(context, attrs);
        initViews(attrs);
    }

    public FacePullToRefreshHeader(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initViews(attrs);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mLastUpdateTimeUpdater != null) {
            mLastUpdateTimeUpdater.stop();
        }
    }

    private void initViews(AttributeSet attrs) {
        View header = LayoutInflater.from(getContext()).inflate(R.layout.face_pull_to_refresh_header, this);
        mTitleTextView = (TextView) header.findViewById(R.id.ptr_face_header_title);
        mLastUpdateTextView = (TextView) header.findViewById(R.id.ptr_face_header_last_update);
        mLoadView = (PullToRefreshFaceView) header.findViewById(R.id.ptr_load_view);

    }


    private void tryUpdateLastUpdateTime() {
        if (TextUtils.isEmpty(mLastUpdateTimeKey) || !mShouldShowLastUpdate) {
            mLastUpdateTextView.setVisibility(GONE);
        } else {
            String time = getLastUpdateTime();
            if (TextUtils.isEmpty(time)) {
                mLastUpdateTextView.setVisibility(GONE);
            } else {
                mLastUpdateTextView.setVisibility(VISIBLE);
                mLastUpdateTextView.setText(time);
            }
        }
    }


    public void setLastUpdateTimeKey(String key) {
        if (TextUtils.isEmpty(key)) {
            return;
        }
        mLastUpdateTimeKey = key;
    }

    public void setLastUpdateTimeRelateObject(Object object) {
        setLastUpdateTimeKey(object.getClass().getName());
    }

    
     /**
     * 得到最后刷新时间
     *
     * @return
     */
    private String getLastUpdateTime() {

        if (mLastUpdateTime == -1 && !TextUtils.isEmpty(mLastUpdateTimeKey)) {
            mLastUpdateTime = getContext().getSharedPreferences(KEY_SharedPreferences, 0).getLong(mLastUpdateTimeKey, -1);
        }
        if (mLastUpdateTime == -1) {
            return null;
        }
        long diffTime = new Date().getTime() - mLastUpdateTime;
        int seconds = (int) (diffTime / 1000);
        if (diffTime < 0) {
            return null;
        }
        if (seconds <= 0) {
            return null;
        }
        StringBuilder sb = new StringBuilder();
        sb.append(getContext().getString(R.string.ai_jia_ptr_last_update));

        if (seconds < 60) {
            sb.append(seconds + getContext().getString(in.srain.cube.views.ptr.R.string.cube_ptr_seconds_ago));
        } else {
            int minutes = (seconds / 60);
            if (minutes > 60) {
                int hours = minutes / 60;
                if (hours > 24) {
                    Date date = new Date(mLastUpdateTime);
                    sb.append(sDataFormat.format(date));
                } else {
                    sb.append(hours + getContext().getString(R.string.ai_jia_ptr_hours_ago));
                }

            } else {
                sb.append(minutes + getContext().getString(R.string.ai_jia_ptr_minutes_ago));
            }
        }
        return sb.toString();
    }

    private void resetView() {
        //隐藏加载view和停止动画
        mLoadView.stopAnimators();
        mLoadView.setVisibility(INVISIBLE);

    }


    /**
     * 重置，回到顶部的
     *
     * @param frame
     */
    @Override
    public void onUIReset(PtrFrameLayout frame) {
        resetView();
        mShouldShowLastUpdate = true;
        tryUpdateLastUpdateTime();
    }


    /**
     * 准备刷新，Header 将要出现时调用。
     *
     * @param frame
     */
    @Override
    public void onUIRefreshPrepare(PtrFrameLayout frame) {
        mShouldShowLastUpdate = true;
        tryUpdateLastUpdateTime();
        mLoadView.setVisibility(VISIBLE);
        mTitleTextView.setVisibility(VISIBLE);
        mTitleTextView.setText(getResources().getString(R.string.ai_jia_ptr_pull_down_to_refresh));

    }

    /**
     * 开始刷新，Header 进入刷新状态之前调用。
     *
     * @param frame
     */
    @Override
    public void onUIRefreshBegin(PtrFrameLayout frame) {
        mShouldShowLastUpdate = false;

        /**
         * 让loadView开始动画
         * */
        mLoadView.startAnimators();
        mTitleTextView.setVisibility(VISIBLE);
        mTitleTextView.setText(R.string.ai_jia_ptr_refreshing);
        tryUpdateLastUpdateTime();
        mLastUpdateTimeUpdater.stop();
    }

    @Override
    public void onUIRefreshComplete(PtrFrameLayout frame) {
        /*hideRotateView();
        mProgressBar.setVisibility(INVISIBLE);*/
        /*
         * 加载完成，loadView停止动画
         * */
        mLoadView.stopAnimators();
        mTitleTextView.setVisibility(VISIBLE);
        mTitleTextView.setText(getResources().getString(R.string.ai_jia_ptr_refresh_complete));

        // update last update time
        SharedPreferences sharedPreferences = getContext().getSharedPreferences(KEY_SharedPreferences, 0);
        if (!TextUtils.isEmpty(mLastUpdateTimeKey)) {
            mLastUpdateTime = new Date().getTime();
            sharedPreferences.edit().putLong(mLastUpdateTimeKey, mLastUpdateTime).commit();
        }
    }


    /**
     * 下拉过程中位置变化回调。
     *
     * @param frame
     * @param isUnderTouch
     * @param status
     * @param ptrIndicator
     */
    @Override
    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
        float percent = Math.min(1f, ptrIndicator.getCurrentPercent());//得到下拉过程的位置比例
        if (status == PtrFrameLayout.PTR_STATUS_PREPARE) {
            mLoadView.setDegrees(percent * 360 * 4);
            ViewCompat.setScaleX(mLoadView, percent);
            ViewCompat.setScaleY(mLoadView, percent);
            mLoadView.setEyeRadius((int) (mLoadView.getEyeRadius()*percent));
            mLoadView.setEyeBallRadius((int) (mLoadView.getEyeBallRadius()*percent));
            mLoadView.setPerView(mLoadView.getRadiusCircle(), percent);
            if (percent < 0.5) {
                mLoadView.setRadius((percent * 180));
                mLoadView.setSweepRadius((180 - percent * 360));
            } else {
                percent = (float) (percent - 0.5);
                mLoadView.setRadius((90 - percent * 180));
                mLoadView.setSweepRadius((percent * 360));
            }

        }
        final int mOffsetToRefresh = frame.getOffsetToRefresh();
        final int currentPos = ptrIndicator.getCurrentPosY();//当前位置
        final int lastPos = ptrIndicator.getLastPosY();//上一个位置
        if (currentPos < mOffsetToRefresh && lastPos >= mOffsetToRefresh) {
            if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
                //下拉刷新
                crossRotateLineFromBottomUnderTouch(frame);

            }
        } else if (currentPos > mOffsetToRefresh && lastPos <= mOffsetToRefresh) {
            if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {
                //释放刷新
                crossRotateLineFromTopUnderTouch(frame);

            }
        }
    }


    /**
     * 释放刷新
     *
     * @param frame
     */
    private void crossRotateLineFromTopUnderTouch(PtrFrameLayout frame) {
        if (!frame.isPullToRefresh()) {
            mTitleTextView.setVisibility(VISIBLE);
            mTitleTextView.setText(R.string.ai_jia_ptr_release_to_refresh);
        }
    }

    /**
     * 下拉刷新
     *
     * @param frame
     */
    private void crossRotateLineFromBottomUnderTouch(PtrFrameLayout frame) {
        mTitleTextView.setVisibility(VISIBLE);
        if (frame.isPullToRefresh()) {
            mTitleTextView.setText(getResources().getString(R.string.ai_jia_ptr_pull_down_to_refresh));
        } else {
            mTitleTextView.setText(getResources().getString(R.string.ai_jia_ptr_pull_down_to_refresh));
        }
    }


    private class LastUpdateTimeUpdater implements Runnable {
        private boolean mRunning = false;

        private void start() {
            if (TextUtils.isEmpty(mLastUpdateTimeKey)) {
                return;
            }
            mRunning = true;
            run();
        }

        private void stop() {
            mRunning = false;
            removeCallbacks(this);
        }

        @Override
        public void run() {
            tryUpdateLastUpdateTime();
            if (mRunning) {
                postDelayed(this, 1000);
            }
        }
    }
}

• FacePullToRefreshLayout

public class FacePullToRefreshLayout extends PtrFrameLayout {
    private FacePullToRefreshHeader mPullToRefreshHeader;
    private RefreshListener refreshListener;

    public FacePullToRefreshLayout(Context context) {
        super(context);
        initViews();
    }

    public FacePullToRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initViews();
    }

    public FacePullToRefreshLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initViews();
    }

    private void initViews() {
        mPullToRefreshHeader = new FacePullToRefreshHeader(getContext());
        setHeaderView(mPullToRefreshHeader);
        addPtrUIHandler(mPullToRefreshHeader);
        setPtrHandler(new PtrDefaultHandler() {
            @Override
            public void onRefreshBegin(PtrFrameLayout frame) {
                if (refreshListener != null) {
                    refreshListener.onRefresh(frame);
                }
            }
        });
    }

    public FacePullToRefreshHeader getHeader() {
        return mPullToRefreshHeader;
    }

    public void setLastUpdateTimeKey(String key) {
        if (mPullToRefreshHeader != null) {
            mPullToRefreshHeader.setLastUpdateTimeKey(key);
        }
    }


    public void setLastUpdateTimeRelateObject(Object object) {
        if (mPullToRefreshHeader != null) {
            mPullToRefreshHeader.setLastUpdateTimeRelateObject(object);
        }
    }


    public interface RefreshListener {
        void onRefresh(PtrFrameLayout frame);
    }

    public void setRefreshListener(RefreshListener refreshListener) {
        this.refreshListener = refreshListener;
    }
}

• 布局

<?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"
              android:layout_width="match_parent"
              android:layout_height="90dp"
              android:gravity="center"
              android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <com.pulltorefreshlibrary.view.PullToRefreshFaceView
                android:id="@+id/ptr_load_view"
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:backgroupColor="#88c6c6c6"
                />

            <TextView
                android:id="@+id/ptr_face_header_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="下拉刷新..."
                android:textColor="#666666"
                android:textSize="12sp"/>

        </LinearLayout>

        <TextView
            android:id="@+id/ptr_face_header_last_update"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:text="距离上次刷新：08秒之前"
            android:textColor="#999999"
            android:textSize="10sp"/>
    </LinearLayout>


</LinearLayout>

想想，还是放张图片，比较有吸引力。

Paste_Image.png

好啦，就到此为止吧，代码不难，注释写得也清楚，所以就不说明了哈。主要还是因为我懒，以后再慢慢试着写点分析，自己的思路什么的。最后，源码放在Github上，觉得可以学到点东西的，start一下吧！点我，点我吧