private void initiateDimens() {mScreenWidth = mContext.getResources().getDisplayMetrics().widthPixels;mJetTopOffset = mParent.getTotalDragDistance() * 0.5f;mTop = -mParent.getTotalDragDistance();}

2.为头填充图片，设置图片的大小

private void createBitmaps() {mLeftClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_left);mRightClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_right);mFrontClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_center);mJet = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.airplane);mJetWidthCenter = mJet.getWidth() / 2;mJetHeightCenter = mJet.getHeight() / 2;mFrontCloudWidthCenter = mFrontClouds.getWidth() / 2;mFrontCloudHeightCenter = mFrontClouds.getHeight() / 2;mRightCloudsWidthCenter = mRightClouds.getWidth() / 2;mRightCloudsHeightCenter = mRightClouds.getHeight() / 2;mLeftCloudsWidthCenter = mLeftClouds.getWidth() / 2;mLeftCloudsHeightCenter = mLeftClouds.getHeight() / 2;}

3.然后我们来画这个头

public void draw(@NonNull Canvas canvas) {final int saveCount = canvas.save();// DRAW BACKGROUND.canvas.drawColor(mContext.getResources().getColor(R.color.sky_background));if (isRefreshing) {// Set up new set of windwhile (mWinds.size() < WIND_SET_AMOUNT) {float y = (float) (mParent.getTotalDragDistance() / (Math.random() * RANDOM_Y_COEFFICIENT));float x = random(MIN_WIND_X_OFFSET, MAX_WIND_X_OFFSET);// Magic with checking interval between windsif (mWinds.size() > 1) {y = 0;while (y == 0) {float tmp = (float) (mParent.getTotalDragDistance() / (Math.random() * RANDOM_Y_COEFFICIENT));for (Map.Entry<Float, Float> wind : mWinds.entrySet()) {// We want that interval will be greater than fifth part of draggable distanceif (Math.abs(wind.getKey() - tmp) > mParent.getTotalDragDistance() / RANDOM_Y_COEFFICIENT) {y = tmp;} else {y = 0;break;}}}}mWinds.put(y, x);drawWind(canvas, y, x);}// Draw current set of windif (mWinds.size() >= WIND_SET_AMOUNT) {for (Map.Entry<Float, Float> wind : mWinds.entrySet()) {drawWind(canvas, wind.getKey(), wind.getValue());}}// We should to create new set of windsif (mInverseDirection && mNewWindSet) {mWinds.clear();mNewWindSet = false;mWindLineWidth = random(MIN_WIND_LINE_WIDTH, MAX_WIND_LINE_WIDTH);}// needed for checking directionmLastAnimationTime = mLoadingAnimationTime;}drawJet(canvas);drawSideClouds(canvas);drawCenterClouds(canvas);canvas.restoreToCount(saveCount);}

/*** Draw wind on loading animation** @param canvas  - area where we will draw* @param y       - y position fot one of lines* @param xOffset - x offset for on of lines*/private void drawWind(Canvas canvas, float y, float xOffset) {/* We should multiply current animation time with this coefficient for taking all screen width in timeRemoving slowing of animation with dividing on {@LINK #SLOW_DOWN_ANIMATION_COEFFICIENT}And we should don't forget about distance that should "fly" line that depend on screen of device and x offset*/float cof = (mScreenWidth + xOffset) / (LOADING_ANIMATION_COEFFICIENT / SLOW_DOWN_ANIMATION_COEFFICIENT);float time = mLoadingAnimationTime;// HORRIBLE HACK FOR REVERS ANIMATION THAT SHOULD WORK LIKE RESTART ANIMATIONif (mLastAnimationTime - mLoadingAnimationTime > 0) {mInverseDirection = true;// take time from 0 to end of animation timetime = (LOADING_ANIMATION_COEFFICIENT / SLOW_DOWN_ANIMATION_COEFFICIENT) - mLoadingAnimationTime;} else {mNewWindSet = true;mInverseDirection = false;}// Taking current x position of drawing wind// For fully disappearing of line we should subtract wind line widthfloat x = (mScreenWidth - (time * cof)) + xOffset - mWindLineWidth;float xEnd = x + mWindLineWidth;canvas.drawLine(x, y, xEnd, y, mWindPaint);}private void drawSideClouds(Canvas canvas) {Matrix matrixLeftClouds = mMatrix;Matrix matrixRightClouds = mAdditionalMatrix;matrixLeftClouds.reset();matrixRightClouds.reset();// Drag percent will newer get more then 1 herefloat dragPercent = Math.min(1f, Math.abs(mPercent));boolean overdrag = false;// But we check here for overdragif (mPercent > 1.0f) {overdrag = true;}float scale;float scalePercentDelta = dragPercent - SCALE_START_PERCENT;if (scalePercentDelta > 0) {float scalePercent = scalePercentDelta / (1.0f - SCALE_START_PERCENT);scale = SIDE_CLOUDS_INITIAL_SCALE + (SIDE_CLOUDS_FINAL_SCALE - SIDE_CLOUDS_INITIAL_SCALE) * scalePercent;} else {scale = SIDE_CLOUDS_INITIAL_SCALE;}// Current y position of cloudsfloat dragYOffset = mParent.getTotalDragDistance() * (1.0f - dragPercent);// Position where clouds fully visible on screen and we should drag them with content of listViewint cloudsVisiblePosition = mParent.getTotalDragDistance() / 2 - mLeftCloudsHeightCenter;boolean needMoveCloudsWithContent = false;if (dragYOffset < cloudsVisiblePosition) {needMoveCloudsWithContent = true;}float offsetRightX = mScreenWidth - mRightClouds.getWidth();float offsetRightY = (needMoveCloudsWithContent? mParent.getTotalDragDistance() * dragPercent - mLeftClouds.getHeight(): dragYOffset)+ (overdrag ? mTop : 0);float offsetLeftX = 0;float offsetLeftY = (needMoveCloudsWithContent? mParent.getTotalDragDistance() * dragPercent - mLeftClouds.getHeight(): dragYOffset)+ (overdrag ? mTop : 0);// Magic with animation on loading processif (isRefreshing) {if (checkCurrentAnimationPart(AnimationPart.FIRST)) {offsetLeftY += getAnimationPartValue(AnimationPart.FIRST) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;offsetRightX -= getAnimationPartValue(AnimationPart.FIRST) / X_SIDE_CLOUDS_SLOW_DOWN_COF;} else if (checkCurrentAnimationPart(AnimationPart.SECOND)) {offsetLeftY += getAnimationPartValue(AnimationPart.SECOND) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;offsetRightX -= getAnimationPartValue(AnimationPart.SECOND) / X_SIDE_CLOUDS_SLOW_DOWN_COF;} else if (checkCurrentAnimationPart(AnimationPart.THIRD)) {offsetLeftY -= getAnimationPartValue(AnimationPart.THIRD) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;offsetRightX += getAnimationPartValue(AnimationPart.THIRD) / X_SIDE_CLOUDS_SLOW_DOWN_COF;} else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) {offsetLeftY -= getAnimationPartValue(AnimationPart.FOURTH) / X_SIDE_CLOUDS_SLOW_DOWN_COF;offsetRightX += getAnimationPartValue(AnimationPart.FOURTH) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;}}matrixRightClouds.postScale(scale, scale, mRightCloudsWidthCenter, mRightCloudsHeightCenter);matrixRightClouds.postTranslate(offsetRightX, offsetRightY);matrixLeftClouds.postScale(scale, scale, mLeftCloudsWidthCenter, mLeftCloudsHeightCenter);matrixLeftClouds.postTranslate(offsetLeftX, offsetLeftY);canvas.drawBitmap(mLeftClouds, matrixLeftClouds, null);canvas.drawBitmap(mRightClouds, matrixRightClouds, null);}private void drawCenterClouds(Canvas canvas) {Matrix matrix = mMatrix;matrix.reset();float dragPercent = Math.min(1f, Math.abs(mPercent));float scale;float overdragPercent = 0;boolean overdrag = false;if (mPercent > 1.0f) {overdrag = true;// Here we want know about how mach percent of over drag we doneoverdragPercent = Math.abs(1.0f - mPercent);}float scalePercentDelta = dragPercent - SCALE_START_PERCENT;if (scalePercentDelta > 0) {float scalePercent = scalePercentDelta / (1.0f - SCALE_START_PERCENT);scale = CENTER_CLOUDS_INITIAL_SCALE + (CENTER_CLOUDS_FINAL_SCALE - CENTER_CLOUDS_INITIAL_SCALE) * scalePercent;} else {scale = CENTER_CLOUDS_INITIAL_SCALE;}float parallaxPercent = 0;boolean parallax = false;// Current y position of cloudsfloat dragYOffset = mParent.getTotalDragDistance() * dragPercent;// Position when should start parallax scrollingint startParallaxHeight = mParent.getTotalDragDistance() - mFrontCloudHeightCenter;if (dragYOffset > startParallaxHeight) {parallax = true;parallaxPercent = dragYOffset - startParallaxHeight;}float offsetX = (mScreenWidth / 2) - mFrontCloudWidthCenter;float offsetY = dragYOffset- (parallax ? mFrontCloudHeightCenter + parallaxPercent : mFrontCloudHeightCenter)+ (overdrag ? mTop : 0);float sx = overdrag ? scale + overdragPercent / 4 : scale;float sy = overdrag ? scale + overdragPercent / 2 : scale;if (isRefreshing && !overdrag) {if (checkCurrentAnimationPart(AnimationPart.FIRST)) {sx = scale - (getAnimationPartValue(AnimationPart.FIRST) / LOADING_ANIMATION_COEFFICIENT) / 8;} else if (checkCurrentAnimationPart(AnimationPart.SECOND)) {sx = scale - (getAnimationPartValue(AnimationPart.SECOND) / LOADING_ANIMATION_COEFFICIENT) / 8;} else if (checkCurrentAnimationPart(AnimationPart.THIRD)) {sx = scale + (getAnimationPartValue(AnimationPart.THIRD) / LOADING_ANIMATION_COEFFICIENT) / 6;} else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) {sx = scale + (getAnimationPartValue(AnimationPart.FOURTH) / LOADING_ANIMATION_COEFFICIENT) / 6;}sy = sx;}matrix.postScale(sx, sy, mFrontCloudWidthCenter, mFrontCloudHeightCenter);matrix.postTranslate(offsetX, offsetY);canvas.drawBitmap(mFrontClouds, matrix, null);}private void drawJet(Canvas canvas) {Matrix matrix = mMatrix;matrix.reset();float dragPercent = mPercent;float rotateAngle = 0;// Check overdragif (dragPercent > 1.0f && !mEndOfRefreshing) {rotateAngle = (dragPercent % 1) * 10;dragPercent = 1.0f;}float offsetX = ((mScreenWidth * dragPercent) / 2) - mJetWidthCenter;float offsetY = mJetTopOffset+ (mParent.getTotalDragDistance() / 2)* (1.0f - dragPercent)- mJetHeightCenter;if (isRefreshing) {if (checkCurrentAnimationPart(AnimationPart.FIRST)) {offsetY -= getAnimationPartValue(AnimationPart.FIRST);} else if (checkCurrentAnimationPart(AnimationPart.SECOND)) {offsetY -= getAnimationPartValue(AnimationPart.SECOND);} else if (checkCurrentAnimationPart(AnimationPart.THIRD)) {offsetY += getAnimationPartValue(AnimationPart.THIRD);} else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) {offsetY += getAnimationPartValue(AnimationPart.FOURTH);}}matrix.setTranslate(offsetX, offsetY);if (dragPercent == 1.0f) {matrix.preRotate(rotateAngle, mJetWidthCenter, mJetHeightCenter);}canvas.drawBitmap(mJet, matrix, null);}

动画效果已经画好了，下面我们来看看怎么结合下拉刷新来调用吧？

private RefreshView mRefreshView;

<pre name="code" class="java">private ImageView mRefreshImageView;

<pre name="code" class="java">mRefreshImageView = new ImageView(context);mRefreshView = new RefreshView(getContext(), this);mRefreshImageView.setImageDrawable(mRefreshView);addView(mRefreshImageView);

2.然后我们设置OntouchEvent()事件

@Overridepublic boolean onTouchEvent(@NonNull MotionEvent ev) {if (!mIsBeingDragged) {return super.onTouchEvent(ev);}final int action = MotionEventCompat.getActionMasked(ev);switch (action) {case MotionEvent.ACTION_MOVE: {final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);if (pointerIndex < 0) {return false;}final float y = MotionEventCompat.getY(ev, pointerIndex);final float yDiff = y - mInitialMotionY;final float scrollTop = yDiff * DRAG_RATE;mCurrentDragPercent = scrollTop / mTotalDragDistance;if (mCurrentDragPercent < 0) {return false;}float boundedDragPercent = Math.min(1f, Math.abs(mCurrentDragPercent));float extraOS = Math.abs(scrollTop) - mTotalDragDistance;float slingshotDist = mTotalDragDistance;float tensionSlingshotPercent = Math.max(0,Math.min(extraOS, slingshotDist * 2) / slingshotDist);float tensionPercent = (float) ((tensionSlingshotPercent / 4) - Math.pow((tensionSlingshotPercent / 4), 2)) * 2f;float extraMove = (slingshotDist) * tensionPercent / 2;int targetY = (int) ((slingshotDist * boundedDragPercent) + extraMove);mRefreshView.setPercent(mCurrentDragPercent);setTargetOffsetTop(targetY - mCurrentOffsetTop, true);break;}case MotionEventCompat.ACTION_POINTER_DOWN:final int index = MotionEventCompat.getActionIndex(ev);mActivePointerId = MotionEventCompat.getPointerId(ev, index);break;case MotionEventCompat.ACTION_POINTER_UP:onSecondaryPointerUp(ev);break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL: {if (mActivePointerId == INVALID_POINTER) {return false;}final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);final float y = MotionEventCompat.getY(ev, pointerIndex);final float overScrollTop = (y - mInitialMotionY) * DRAG_RATE;mIsBeingDragged = false;if (overScrollTop > mTotalDragDistance) {setRefreshing(true, true);} else {mRefreshing = false;animateOffsetToPosition(mAnimateToStartPosition);}mActivePointerId = INVALID_POINTER;return false;}}return true;}

三、最后我们看怎样在Activity中使用这个下拉刷新控件

1.先看一下布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".PullToRefreshActivity"><com.hankkin.AnimationPullToRefreshDemo.PullToRefreshViewandroid:id="@+id/pull_to_refresh"android:layout_width="match_parent"android:layout_height="match_parent"><ListViewandroid:id="@+id/list_view"android:divider="@null"android:dividerHeight="0dp"android:fadingEdge="none"android:layout_width="match_parent"android:layout_height="match_parent" /></com.hankkin.AnimationPullToRefreshDemo.PullToRefreshView></RelativeLayout>

Map<String, Integer> map;List<Map<String, Integer>> sampleList = new ArrayList<Map<String, Integer>>();int[] colors = {R.color.saffron,R.color.eggplant,R.color.sienna};int[] tripNames = {R.string.trip_to_india,R.string.trip_to_italy,R.string.trip_to_indonesia};for (int i = 0; i < tripNames.length; i++) {map = new HashMap<String, Integer>();map.put(SampleAdapter.KEY_NAME, tripNames[i]);map.put(SampleAdapter.KEY_COLOR, colors[i]);sampleList.add(map);}ListView listView = (ListView) findViewById(R.id.list_view);listView.setAdapter(new SampleAdapter(this, R.layout.list_item, sampleList));

mPullToRefreshView = (PullToRefreshView) findViewById(R.id.pull_to_refresh);mPullToRefreshView.setOnRefreshListener(new PullToRefreshView.OnRefreshListener() {@Overridepublic void onRefresh() {mPullToRefreshView.postDelayed(new Runnable() {@Overridepublic void run() {mPullToRefreshView.setRefreshing(false);}}, REFRESH_DELAY);}});