高性能的给RecyclerView添加下拉刷新和加载更多动画，基于drawable(二)

项目已经上传github，点击这里查看

先看看效果

动画很粗糙，请不要在意。

项目是基于我改进的一个RecyclerView.Adapter，这个adapter可以给RecyclerView添加header和footer，关于这个adapter，可以点击查看

实现的逻辑是，给RecyclerView各添加一个自定义View作为Header和Footer，自定义的view作为Drawable的Drawable.callback对象,这样drawable不断改变自身

实现动画效果。

动画实现了，那么刷新时列表时列表怎么向下移动呢？这需要说说RecyclerView和LayoutManager的关系。

如果你不熟悉RecyclerView和LayoutManager的关系，你可以阅读国外大神dave smith的博文

http://wiresareobsolete.com/2014/09/building-a-recyclerview-layoutmanager-part-1/

http://wiresareobsolete.com/2014/09/recyclerview-layoutmanager-2/

http://wiresareobsolete.com/2015/02/recyclerview-layoutmanager-3/

如果你不读，那没关系，我告诉你，RecyclerView的layout是被LayoutManager代理了，另外你在滑动列表的时候，RecyclerView的layout过程是不会走的，这可以提高性能。但是如果我们想让RecyclerView重新计算child的大小，那么需要调用notifyDataChanged方法了。

现在我们的思路是，随着手指滑动，我们改变HeaderView的高度，调用notifyDataSetChanged，这样就能使列表向下滑动。

先看看自定义的View

public class DrawableView extends View {    private Drawable mDrawable;    private int mHeight = 1;    public DrawableView(Context context) {        super(context);    }    public void setHeight(int height){        if (mHeight == height)return;        if (height == 0){            height = 1;        }        mHeight = height;    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int newHeightMeasureSpec = MeasureSpec.makeMeasureSpec(mHeight,MeasureSpec.EXACTLY);        super.onMeasure(widthMeasureSpec, newHeightMeasureSpec);    }    public void setDrawable(Drawable drawable){        mDrawable = drawable;        mDrawable.setCallback(this);    }    int getCurrentHeight(){        return mHeight;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (mDrawable == null) {            return; // couldn't resolve the URI        }        if (mDrawable.getIntrinsicWidth() <= 0 || mDrawable.getIntrinsicHeight() <= 0) {            return;     // nothing to draw (empty bounds)        }        canvas.clipRect(getPaddingLeft(),  getPaddingTop(),                getRight() - getLeft() - getPaddingRight(), getBottom() - getTop() - getPaddingBottom());        int saveCount = canvas.save();        mDrawable.draw(canvas);        canvas.restoreToCount(saveCount);    }    @Override    public void invalidateDrawable(Drawable dr) {        if (dr == mDrawable) {            invalidate();        } else {            super.invalidateDrawable(dr);        }    }}

我们重写了onMeasure方法，让view的高度是mHeight的值。setDrawable方法中把view自身设为Drawable对象的Callback对象。

public abstract class AdvancedDrawable extends Drawable implements Animatable {    int dWidth;    int dHeight;    float mPercent;    private RecyclerView.Adapter mAdapter;    public static final float CRITICAL_PERCENT = 0.8f;    @Override    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {    }    @Override    public void setColorFilter(@Nullable ColorFilter colorFilter) {    }    @Override    public int getOpacity() {        return PixelFormat.TRANSLUCENT;    }    @Override    public int getIntrinsicWidth() {        return dWidth;    }    @Override    public int getIntrinsicHeight() {        return dHeight;    }    public void setPercent(float percent,boolean invalidate){        mPercent = percent;        if (mAdapter != null && invalidate) mAdapter.notifyDataSetChanged();    }    public float getPercent(){        return mPercent;    }    public void setAdapter(RecyclerView.Adapter adapter){        mAdapter = adapter;    }    /**     * u have to initial ur bitmaps u needed , dWidth and dHeight here     *     * @param context context     */    protected abstract void init(Context context);}

这是我们需要用到的Drawable对象，其中的percent和我们说的前景实现一样，是描述刷新（加载）完成度的一个度量值。setPercent中调用adapter的notifyDataSetChanged。里面的dWidth和dHeight必须被设置，否则drawable无法绘制。

这里面要说一下为什么把最小的高度值设为0而不是1，是因为我发现一个bug，如果高度设为0 ，那么下面这个方法会工作不正常。这个bug导致和LinearLayouManagert的逻辑和每16ms绘制一次界面的机制有关系。有兴趣的可以查看下android源码，我并没有进一步测试。

private boolean canChildScrollBottom() {        return ViewCompat.canScrollVertically(this, 1);    }

所以我重写了这个方法。

private boolean canChildScrollBottom(){        return !showLoadFlag && !isLastChildShowingCompletely();    }    private boolean isLastChildShowingCompletely(){        return ((getLayoutManager().getPosition(getChildAt(getChildCount() - 2)) == getAdapter().getItemCount() - 2));    }

public abstract class RefreshLoadWrapper extends HeaderAndFooterWrapper {    private final static int REFRESH_TYPE = 199999;    private final static int LOAD_TYPE = 199998;    private boolean canRefresh = false;    private boolean canLoad = false;    private DrawableView mRefresh;    private DrawableView mLoad;    public RefreshLoadWrapper(Context context) {        super(context);    }    private void addRefreshImage(Context c){        if (canRefresh){            deleteHeader(0,false);        }        mRefresh = new DrawableView(c);        addHeader(0,REFRESH_TYPE);        canRefresh = true;    }    public void setRefreshDrawable(Context context,AdvancedDrawable drawable){        addRefreshImage(context);        mRefresh.setDrawable(drawable);    }    public void setLoadDrawable(Context context,AdvancedDrawable drawable){        addLoadImage(context);        mLoad.setDrawable(drawable);    }    private void addLoadImage(Context c){        if (canLoad){            deleteFooter(getFooterViewCount() - 1,false);        }        mLoad = new DrawableView(c);        addFooter(0,LOAD_TYPE);        canLoad = true;    }    public void setRefreshHeight(int height){        mRefresh.setHeight(height);    }    public void setLoadHeight(int height){        mLoad.setHeight(height);    }    public abstract RecyclerView.ViewHolder onCreateHeaderVH(ViewGroup parent, int viewType);    public abstract RecyclerView.ViewHolder onCreateFooterVH(ViewGroup parent, int viewType);    public abstract RecyclerView.ViewHolder onCreateGeneralVH(ViewGroup parent, int viewType);    public abstract void onBindHeaderVH(RecyclerView.ViewHolder holder, int position);    public abstract void onBindFooterVH(RecyclerView.ViewHolder holder, int position);    public abstract void onBindGeneralVH(RecyclerView.ViewHolder holder, int position);    @Override    public RecyclerView.ViewHolder onCreateHeaderViewHolder(ViewGroup parent, int viewType) {        if (viewType == REFRESH_TYPE){            return new MyViewHolder(mRefresh);        }        return onCreateHeaderVH(parent, viewType);    }    @Override    public RecyclerView.ViewHolder onCreateFooterViewHolder(ViewGroup parent, int viewType) {        if (viewType == LOAD_TYPE){            return new MyViewHolder(mLoad);        }        return onCreateFooterVH(parent, viewType);    }    @Override    public RecyclerView.ViewHolder onCreateGeneralViewHolder(ViewGroup parent, int viewType) {        return onCreateGeneralVH(parent,viewType);    }    @Override    public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder, int position) {        if (!(position == 0 && canRefresh)) {            onBindHeaderVH(holder, position);        }    }    @Override    public void onBindFooterViewHolder(RecyclerView.ViewHolder holder, int position) {        if (!(position == getFooterViewCount() - 1 && canLoad)){            onBindFooterVH(holder,position);        }    }    @Override    public void onBindGeneralViewHolder(RecyclerView.ViewHolder holder, int position) {        onBindGeneralVH(holder, position);    }}

这个是Adapter实现了setDrawable的时候先添加一个View为Header，这个View也是drawable的载体。

@Override    public void setAdapter(Adapter adapter) {        super.setAdapter(adapter);        if (adapter instanceof RefreshLoadWrapper){            Log.d(TAG,"adapter kind of RefreshLoadWrapper");            expectedAdapter = true;            ((RefreshLoadWrapper) adapter).setRefreshDrawable(getContext(),mRefreshDrawable);            ((RefreshLoadWrapper) adapter).setLoadDrawable(getContext(),mLoadDrawable);            mRefreshDrawable.setAdapter(adapter);            mLoadDrawable.setAdapter(adapter);        }else {            expectedAdapter = false;        }    }

这是自定义的RecyclerView，重写了setAdatper，如果设置的adapter是支持刷新和加载更多的adapter那么就设置默认的drawable。

啊，刚吃完中秋晚饭，继续写。

下面我们要说说自定义的RecyclerView，这个自定义的RecyclerView和前景实现中自定义的RecyclerView的手势处理差不多，就是有一些细节需要处理。下面是整个

自定义的RecyclerView的代码

public class AdvancedDrawableRecyclerView extends RecyclerView {    private boolean canRefresh = true;    private boolean canLoad = false;    private static final int DRAG_MAX_DISTANCE_V = 300;    public static final long MAX_OFFSET_ANIMATION_DURATION = 500;    private static final float DRAG_RATE = 0.3f;    private float INITIAL_X = -1;    private float INITIAL_Y = -1;    private float lastY = 0;    private static final String TAG = "ADR";    private AdvancedDrawable mRefreshDrawable;    private AdvancedDrawable mLoadDrawable;    private boolean expectedAdapter = false;    private boolean showRefreshFlag = false;    private boolean showLoadFlag = false;    private ValueAnimator animator;    private Interpolator mInterpolator = new LinearInterpolator();    private RefreshableAndLoadable mDataSource;    private boolean gettingData = false;    public AdvancedDrawableRecyclerView(Context context) {        super(context);        init(context);    }    public AdvancedDrawableRecyclerView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init(context);    }    public AdvancedDrawableRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        init(context);    }    void init(Context context){        ViewCompat.setChildrenDrawingOrderEnabled(this, true);        mRefreshDrawable = new SunAdvancedDrawable(context,this);        mLoadDrawable = new SunAdvancedBottomDrawable(context,this);    }    public void setRefreshDrawable(AdvancedDrawable drawable){        mRefreshDrawable = drawable;        if (expectedAdapter){            ((RefreshLoadWrapper) getAdapter()).setRefreshDrawable(getContext(),mRefreshDrawable);        }    }    public void setLoadDrawable(AdvancedDrawable drawable){        mLoadDrawable = drawable;        if (expectedAdapter){            ((RefreshLoadWrapper) getAdapter()).setRefreshDrawable(getContext(),mLoadDrawable);        }    }    @Override    public void setAdapter(Adapter adapter) {        super.setAdapter(adapter);        if (adapter instanceof RefreshLoadWrapper){            Log.d(TAG,"adapter kind of RefreshLoadWrapper");            expectedAdapter = true;            ((RefreshLoadWrapper) adapter).setRefreshDrawable(getContext(),mRefreshDrawable);            ((RefreshLoadWrapper) adapter).setLoadDrawable(getContext(),mLoadDrawable);            mRefreshDrawable.setAdapter(adapter);            mLoadDrawable.setAdapter(adapter);        }else {            expectedAdapter = false;        }    }    @Override    public boolean onTouchEvent(@NonNull MotionEvent ev) {        if (!expectedAdapter || (!canRefresh && !canLoad))return super.onTouchEvent(ev);        if (gettingData)return true;        final int action = MotionEventCompat.getActionMasked(ev);        switch (action) {            case MotionEvent.ACTION_DOWN:                if (isRunning()){//                    // can stop animation                    stop();                    //fix initial action_down position                    calculateInitY(MotionEventCompat.getY(ev,0),DRAG_MAX_DISTANCE_V,DRAG_RATE,                            showRefreshFlag ? mRefreshDrawable.getPercent() : -mLoadDrawable.getPercent());                }else {                    INITIAL_Y = MotionEventCompat.getY(ev,0);                    lastY = INITIAL_Y;                }                break;            case MotionEvent.ACTION_MOVE:                final float agentY = MotionEventCompat.getY(ev,0);                if (agentY > INITIAL_Y){                    // towards bottom                    if (!canChildScrollUp()){                        if (!canRefresh)return super.onTouchEvent(ev);                        if (showLoadFlag)showLoadFlag = false;                        if (!showRefreshFlag){                            showRefreshFlag = true;                            INITIAL_Y = agentY;                        }                        mRefreshDrawable.setPercent(fixPercent(Math.abs(calculatePercent(INITIAL_Y,                                agentY,DRAG_MAX_DISTANCE_V,DRAG_RATE))),true);                        ((RefreshLoadWrapper) getAdapter()).setRefreshHeight(getViewOffset(mRefreshDrawable.getPercent()));                        lastY = agentY;                        return true;                    }else {                        if(showRefreshFlag)showRefreshFlag = false;                        lastY = agentY;                        break;                    }                } else if (agentY < INITIAL_Y){                    if (!canChildScrollBottom()){                        if (!canLoad)return super.onTouchEvent(ev);                        if (showRefreshFlag)showRefreshFlag = false;                        if (!showLoadFlag){                            showLoadFlag = true;                            INITIAL_Y = agentY;                            lastY = agentY;                        }                        if (lastY == agentY){                            break;                        }                        float prePercent = mLoadDrawable.getPercent();                        float newPercent = fixPercent(Math.abs(calculatePercent(INITIAL_Y,                                agentY, DRAG_MAX_DISTANCE_V, DRAG_RATE)));                        mLoadDrawable.setPercent(newPercent,true);                        ((RefreshLoadWrapper) getAdapter()).setLoadHeight(getViewOffset(newPercent));                        getLayoutManager().offsetChildrenVertical((getViewOffset(prePercent) - getViewOffset(newPercent)));                        lastY = agentY;                        return true;                    }else {                        if (showLoadFlag)showLoadFlag = false;                        lastY = agentY;                        break;                    }                }else {                    showLoadFlag = showRefreshFlag = false;                    mRefreshDrawable.setPercent(0,false);                    mLoadDrawable.setPercent(0,true);                    lastY = agentY;                    return true;                }            case MotionEvent.ACTION_UP:            case MotionEvent.ACTION_CANCEL:                if (!showLoadFlag && !showRefreshFlag)break;                actionUpOrCancel();                return true;        }        return super.onTouchEvent(ev);    }    private boolean isRunning(){        return animator != null && (animator.isRunning() || animator.isStarted());    }    private void stop(){        animator.cancel();    }    private int getViewOffset(float percent){        if (showRefreshFlag){            return Math.min((int) (percent * (float) mRefreshDrawable.getIntrinsicHeight() * 0.8),                    mRefreshDrawable.getIntrinsicHeight());        }        return Math.min((int) (percent * (float) mLoadDrawable.getIntrinsicHeight() * 0.8),                mRefreshDrawable.getIntrinsicHeight());    }    private void actionUpOrCancel(){        if(showLoadFlag && showRefreshFlag){            throw new IllegalStateException("load state and refresh state should be mutual exclusion!");        }        if (showRefreshFlag){            if (mRefreshDrawable.getPercent() >= AdvancedDrawable.CRITICAL_PERCENT){                // 回到临界位置                toCriticalPositionAnimation(mRefreshDrawable.getPercent());            }else {                toStartPositionAnimation(mRefreshDrawable.getPercent());            }        }else {            if (mLoadDrawable.getPercent() >= AdvancedDrawable.CRITICAL_PERCENT){                // 回到临界位置                toCriticalPositionAnimation(mLoadDrawable.getPercent());            }else {                toStartPositionAnimation(mLoadDrawable.getPercent());            }        }    }    private void toCriticalPositionAnimation(final float start){        animator = ValueAnimator.ofFloat(start,AdvancedDrawable.CRITICAL_PERCENT);        animator.setInterpolator(mInterpolator);        animator.setDuration((long) (MAX_OFFSET_ANIMATION_DURATION * (start - AdvancedDrawable.CRITICAL_PERCENT)));        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float percent = (float) animation.getAnimatedValue();                if (showRefreshFlag){                    mRefreshDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setRefreshHeight(getViewOffset(percent));                }else {                    float prePercent = mLoadDrawable.getPercent();                    mLoadDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setLoadHeight(getViewOffset(percent));                    getLayoutManager().offsetChildrenVertical((getViewOffset(prePercent) - getViewOffset(percent)));                }                if (percent == AdvancedDrawable.CRITICAL_PERCENT){                    if (showRefreshFlag){                        gettingData = true;                        Toast.makeText(getContext(),"refresh",Toast.LENGTH_SHORT).show();                        if (mDataSource != null){                            mDataSource.onRefreshing();                        }                        mRefreshDrawable.start();                    }else {                        gettingData = true;                        Toast.makeText(getContext(),"load",Toast.LENGTH_SHORT).show();                        if (mDataSource != null){                            mDataSource.onLoading();                        }                        mLoadDrawable.start();                    }                }            }        });        animator.start();    }    private void toStartPositionAnimation(final float start){        animator = ValueAnimator.ofFloat(start,0);        animator.setInterpolator(mInterpolator);        animator.setDuration((long) (MAX_OFFSET_ANIMATION_DURATION * start));        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float percent = (float) animation.getAnimatedValue();                if (showRefreshFlag){                    mRefreshDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setRefreshHeight(getViewOffset(percent));                }else {                    float prePercent = mLoadDrawable.getPercent();                    mLoadDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setLoadHeight(getViewOffset(percent));                    getLayoutManager().offsetChildrenVertical((getViewOffset(prePercent) - getViewOffset(percent)));                }                if (percent == 0){                    showLoadFlag = showRefreshFlag = false;                }            }        });        animator.start();    }    private float fixPercent(float initPercent){        if (initPercent <= 1){            return initPercent;        }else {            return 1f + (initPercent - 1f) * 0.6f;        }    }    private float calculatePercent(float initialPos,float currentPos,int maxDragDistance,float rate){        return (currentPos - initialPos) * rate / ((float) maxDragDistance);    }    private void calculateInitY(float agentY,int maxDragDistance,float rate,float percent){        INITIAL_Y = agentY - percent * (float) maxDragDistance / rate;    }    private boolean canChildScrollUp() {        return ViewCompat.canScrollVertically(this, -1);    }    private boolean canChildScrollBottom(){        return !showLoadFlag && !isLastChildShowingCompletely();    }    private boolean isLastChildShowingCompletely(){        return ((getLayoutManager().getPosition(getChildAt(getChildCount() - 2)) == getAdapter().getItemCount() - 2));    }    public void setRefreshableAndLoadable(RefreshableAndLoadable dataSource){        mDataSource = dataSource;    }    public void stopRefreshingOrLoading(){        if (gettingData){            gettingData = false;        }        if (showRefreshFlag){            mRefreshDrawable.stop();            toStartPositionAnimation(AdvancedDrawable.CRITICAL_PERCENT);        }else {            mLoadDrawable.stop();            toStartPositionAnimation(AdvancedDrawable.CRITICAL_PERCENT);        }    }    public void setCanRefresh(boolean canRefresh){        this.canRefresh = canRefresh;    }    public void setCanLoad(boolean canLoad){        this.canLoad = canLoad;    }}

AdvancedDrawableRecyclerView这个类的onTouchEvent中有一个细节，就是处理加载更多时的手势代码中，有这两句

((RefreshLoadWrapper) getAdapter()).setLoadHeight(getViewOffset(newPercent));                        getLayoutManager().offsetChildrenVertical((getViewOffset(prePercent) - getViewOffset(newPercent)));

第一句是修改footer的高度，第二句是通知LayoutManager需要向下偏移一掉段距离，这个距离是新旧高度之差。那为啥要告诉LayoutManager要偏移呢？这是因为

LayoutManager代理RecyclerView的layout过程，而这里有一个被称为锚的类，这个类可以标记RecyclerView正在展示的child从哪开始，而child在上拉的过程中，如果不偏移，重绘的时候这个起始点的信息不会变，那么上面列表的高度没有变化，那么列表就不会随着手指向上移动，虽然footer高度变化了，但是看不出来，所以需要偏移去修正。

手势处理过程如下，和前景实现保持一致。

                                                手势监听

                                                       |

                                                       |    如果如果手势向下，view不能向下继续滑动

                                                       |   

                                           计算滑动的距离，当滑动距离没有到阀值的时候，根据滑动距离和

                                            最大滑动距离的百分比，计算绘制的图案位置，圆弧的角度等等

                                                       |                                                                   |

                                                       |      当滑动时未超过阀值松开                        |  超过阀值时松开

                                                       |                                                                   |

                                 这个时候让图案回弹就Ok                      图案先回弹到阀值对应的位置，然后开始旋转，

                                                                                                    当刷新完成的时候，回弹

手势过程中平移的百分比计算代码中不难理解，另外在前景实现中已经说过了，所以这儿不说了，可以参考前一篇文章。

我们说说手指抬起来后发生了什么

private void actionUpOrCancel(){        if(showLoadFlag && showRefreshFlag){            throw new IllegalStateException("load state and refresh state should be mutual exclusion!");        }        if (showRefreshFlag){            if (mRefreshDrawable.getPercent() >= AdvancedDrawable.CRITICAL_PERCENT){                // 回到临界位置                toCriticalPositionAnimation(mRefreshDrawable.getPercent());            }else {                toStartPositionAnimation(mRefreshDrawable.getPercent());            }        }else {            if (mLoadDrawable.getPercent() >= AdvancedDrawable.CRITICAL_PERCENT){                // 回到临界位置                toCriticalPositionAnimation(mLoadDrawable.getPercent());            }else {                toStartPositionAnimation(mLoadDrawable.getPercent());            }        }    }

很简单，如果超过开始刷新（加载更多）的临界值，就开启回到临界位置的动画，否则就开启回到初始位置的动画

private void toCriticalPositionAnimation(final float start){        animator = ValueAnimator.ofFloat(start,AdvancedDrawable.CRITICAL_PERCENT);        animator.setInterpolator(mInterpolator);        animator.setDuration((long) (MAX_OFFSET_ANIMATION_DURATION * (start - AdvancedDrawable.CRITICAL_PERCENT)));        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float percent = (float) animation.getAnimatedValue();                if (showRefreshFlag){                    mRefreshDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setRefreshHeight(getViewOffset(percent));                }else {                    float prePercent = mLoadDrawable.getPercent();                    mLoadDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setLoadHeight(getViewOffset(percent));                    getLayoutManager().offsetChildrenVertical((getViewOffset(prePercent) - getViewOffset(percent)));                }                if (percent == AdvancedDrawable.CRITICAL_PERCENT){                    if (showRefreshFlag){                        gettingData = true;                        Toast.makeText(getContext(),"refresh",Toast.LENGTH_SHORT).show();                        if (mDataSource != null){                            mDataSource.onRefreshing();                        }                        mRefreshDrawable.start();                    }else {                        gettingData = true;                        Toast.makeText(getContext(),"load",Toast.LENGTH_SHORT).show();                        if (mDataSource != null){                            mDataSource.onLoading();                        }                        mLoadDrawable.start();                    }                }            }        });        animator.start();    }

这是回弹到临界位置的动画逻辑，这里面，需要更新时的计算出来的值就是Percent，然后把percent传递给Drawable，并且修改Drawable对应的view的高度。

回到初始位置的动画逻辑类似

private void toStartPositionAnimation(final float start){        animator = ValueAnimator.ofFloat(start,0);        animator.setInterpolator(mInterpolator);        animator.setDuration((long) (MAX_OFFSET_ANIMATION_DURATION * start));        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float percent = (float) animation.getAnimatedValue();                if (showRefreshFlag){                    mRefreshDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setRefreshHeight(getViewOffset(percent));                }else {                    float prePercent = mLoadDrawable.getPercent();                    mLoadDrawable.setPercent(percent,true);                    ((RefreshLoadWrapper) getAdapter()).setLoadHeight(getViewOffset(percent));                    getLayoutManager().offsetChildrenVertical((getViewOffset(prePercent) - getViewOffset(percent)));                }                if (percent == 0){                    showLoadFlag = showRefreshFlag = false;                }            }        });        animator.start();    }

我们继续看看drawable是如何根据percent值绘制的。

这是我自定义的一个drawable，对应的是默认的刷新的动画。

public class SunAdvancedDrawable extends AdvancedDrawable {    private Bitmap mSky;    private Bitmap mSun;    private Matrix mMatrix;    private static final long MAX_OFFSET_ANIMATION_DURATION = 1000;    private ValueAnimator valueAnimator;    private Interpolator mInterpolator = new LinearInterpolator();    private int mSkyHeight;    private int mSunSize = 100;    private float mSunLeftOffset = 220;    private float mRotate = 0.0f;    private int sunRoutingHeight;    private boolean startAnimation = false;    public SunAdvancedDrawable(Context context, final View view){        super();        view.post(new Runnable() {            @Override            public void run() {                dWidth = view.getMeasuredWidth();                dHeight = (int) (dWidth * 0.5f);                mMatrix = new Matrix();                init(view.getContext());            }        });    }    @Override    protected void init(Context context){        final BitmapFactory.Options options = new BitmapFactory.Options();        options.inPreferredConfig = Bitmap.Config.RGB_565;        mSky = BitmapFactory.decodeResource(context.getResources(), R.drawable.sky, options);        mSky = Bitmap.createScaledBitmap(mSky, dWidth, dHeight, true);        mSkyHeight = dHeight;        sunRoutingHeight = (int) ((mSkyHeight - mSunSize) * 0.9);        mSunLeftOffset = 0.3f * (float) dWidth;        createBitmaps(context);    }    private void createBitmaps(Context context) {        final BitmapFactory.Options options = new BitmapFactory.Options();        options.inPreferredConfig = Bitmap.Config.RGB_565;        mSky = BitmapFactory.decodeResource(context.getResources(), R.drawable.sky, options);        mSky = Bitmap.createScaledBitmap(mSky, dWidth, mSkyHeight, true);        mSun = BitmapFactory.decodeResource(context.getResources(), R.drawable.sun, options);        mSun = Bitmap.createScaledBitmap(mSun, mSunSize, mSunSize, true);    }    @Override    public void start() {        startAnimation = true;        ensureAnimation();        valueAnimator.start();    }    @Override    public void stop() {        startAnimation = false;        if(valueAnimator.isRunning() || valueAnimator.isStarted()){            valueAnimator.cancel();        }    }    @Override    public boolean isRunning() {        return valueAnimator != null && valueAnimator.isRunning();    }    @Override    public void draw(@NonNull Canvas canvas) {        drawSky(canvas);        drawSun(canvas);    }    private void ensureAnimation(){        valueAnimator = ValueAnimator.ofFloat(0,359);        valueAnimator.setDuration(MAX_OFFSET_ANIMATION_DURATION);        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);        valueAnimator.setRepeatMode(ValueAnimator.RESTART);        valueAnimator.setInterpolator(mInterpolator);        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mRotate = (float) animation.getAnimatedValue();                invalidateSelf();            }        });    }    private void drawSky(Canvas canvas) {        Matrix matrix = mMatrix;        matrix.reset();        int offsetY = (int) (30 * Math.min(mPercent,1)) - 50;        matrix.postTranslate(0,offsetY);        canvas.drawBitmap(mSky, matrix, null);    }    private void drawSun(Canvas canvas) {        Matrix matrix = mMatrix;        matrix.reset();        float dragPercent = mPercent;        if (dragPercent > 1){            dragPercent = 1f + (dragPercent - 1f) * 0.4f;        }        int offsetY = (int) (Math.max(mSkyHeight - mSunSize - (int) (dragPercent * sunRoutingHeight),0) * 0.8);        matrix.postTranslate(mSunLeftOffset,offsetY);        matrix.postRotate(                startAnimation ? mRotate : 360 * mPercent,                mSunLeftOffset + mSunSize / 2,                offsetY + mSunSize / 2);        canvas.drawBitmap(mSun, matrix, null);    }}

这是根据github上优秀项目pullToRefresh改写的，在这里感谢pullToRefresh项目作者。

我们继续说源码，自定义的drawable中根据传进来的View初始化了相关数据。

draw的过程分为两步，绘制天空，绘制太阳。

private void drawSky(Canvas canvas) {        Matrix matrix = mMatrix;        matrix.reset();        int offsetY = (int) (30 * Math.min(mPercent,1)) - 50;        matrix.postTranslate(0,offsetY);        canvas.drawBitmap(mSky, matrix, null);    }

绘制天空中offsetY的作用时让天空有一个向下平移的过程，而不是呆板的保持不动。

private void drawSun(Canvas canvas) {        Matrix matrix = mMatrix;        matrix.reset();        float dragPercent = mPercent;        if (dragPercent > 1){            dragPercent = 1f + (dragPercent - 1f) * 0.4f;        }        int offsetY = (int) (Math.max(mSkyHeight - mSunSize - (int) (dragPercent * sunRoutingHeight),0) * 0.8);        matrix.postTranslate(mSunLeftOffset,offsetY);        matrix.postRotate(                startAnimation ? mRotate : 360 * mPercent,                mSunLeftOffset + mSunSize / 2,                offsetY + mSunSize / 2);        canvas.drawBitmap(mSun, matrix, null);    }

绘制太阳逻辑除了高度的偏移值，还需要计算旋转的角度。

关于刷新时太阳旋转的动画实现

private void ensureAnimation(){        valueAnimator = ValueAnimator.ofFloat(0,359);        valueAnimator.setDuration(MAX_OFFSET_ANIMATION_DURATION);        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);        valueAnimator.setRepeatMode(ValueAnimator.RESTART);        valueAnimator.setInterpolator(mInterpolator);        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mRotate = (float) animation.getAnimatedValue();                invalidateSelf();            }        });    }

开启一个ValueAnimator，这个ValueAnimator用来计算每个时间点对应的角度值。这样随着时间的流逝，太阳就转动了。

如果你想自定义Drawable，你只需要创建一个继承AdvancedDrawable的类，实现相关方法，然后把类实例设置给Adapter就好。

好了，这个项目差不多就是这样了，欢迎各位留言交流。

欢迎加入github优秀项目分享群：589284497，不管你是项目作者或者爱好者，请来和我们一起交流吧。