仿IOS版QQ的下拉刷新头实现原理

一直很好奇苹果版QQ的下拉刷新头，那种水滴状的感觉，特别有弹性的感觉，于是趁着项目比较松的时候也来实现一下,这是实现后的图



最主要的要知道这个图形的画法，我使用的是Path路径来做的，然后使用填充画笔，把他全部填充

主要使用两个半圆和两条二次曲线构成



于是引入关键代码

补充一下，path中绘制圆弧用的是arcTo方法，不仅可以绘制圆弧也可以绘制椭圆圆弧，传入矩形区域和角度变化即可，值得注意的是圆弧的方向，用法不当会导致曲线无法闭合。至于二次曲线就不说了

protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//路径重置
mPath.reset();

//绘制大圆圆弧
mPath.arcTo(new RectF(viewwdith / 2 - GreatCircleRadius, GreatCircleY - GreatCircleRadius,
viewwdith / 2 + GreatCircleRadius, GreatCircleY + GreatCircleRadius), 0, -180);
//绘制左边的二次曲线
mPath.quadTo(viewwdith / 2 - SmallCircleRadius, (GreatCircleY + SmallCircleY) / 2, viewwdith / 2 - SmallCircleRadius, SmallCircleY);
//把点移动到大半圆的右边
mPath.moveTo(viewwdith / 2 + GreatCircleRadius, GreatCircleY);
//绘制右边的二次曲线
mPath.quadTo(viewwdith / 2 + SmallCircleRadius, (GreatCircleY + SmallCircleY) / 2, viewwdith / 2 + SmallCircleRadius, SmallCircleY);
//绘制小圆圆弧
mPath.arcTo(new RectF(viewwdith / 2 - SmallCircleRadius, SmallCircleY - SmallCircleRadius,
viewwdith / 2 + SmallCircleRadius, SmallCircleY + SmallCircleRadius), 0, 180);

canvas.drawPath(mPath, mPaint);
}

这就是主要的绘制方法，剩下的就好办啦，重写触摸事件，使他下拉时，移动小圆的圆心位置，并且根据两个圆的圆心距，改变两个圆的半径，初始时，两个园大小是一致的，随着距离的增大，小圆半径缩小的更快。当手抬起后，开启线程重置刷新头。

下面是所有的代码：

package com.example.kaifa.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
* TODO: document your custom view class.
*/
public class MyView extends View {

private Paint mPaint;
/**
* 下拉进度
*/
private float progress = 0;
/**
* view的宽高
*/
private int viewheight, viewwdith;

/**
* 大圆半径
*/
private float GreatCircleRadius = 50;
/**
* 小圆半径
*/
private float SmallCircleRadius = 50;
/**
* 大圆和小圆分别Y轴的坐标
*/
private float GreatCircleY = 60, SmallCircleY = 60;
/**
* 绘制路径
*/
private Path mPath;
/**
* 第一次按下的Y轴坐标
*/
float firstY = 0;

public MyView(Context context) {
super(context);
init(null, 0);
}

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}

private void init(AttributeSet attrs, int defStyle) {
// Load attributes
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(0xff0000ff);
mPaint.setStyle(Paint.Style.FILL);
mPath = new Path();

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
viewwdith = w;
viewheight = h;

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

//路径重置
mPath.reset();

//绘制大圆圆弧
mPath.arcTo(new RectF(viewwdith / 2 - GreatCircleRadius, GreatCircleY - GreatCircleRadius,
viewwdith / 2 + GreatCircleRadius, GreatCircleY + GreatCircleRadius), 0, -180);
//绘制左边的二次曲线
mPath.quadTo(viewwdith / 2 - SmallCircleRadius, (GreatCircleY + SmallCircleY) / 2, viewwdith / 2 - SmallCircleRadius, SmallCircleY);
//把点移动到大半圆的右边
mPath.moveTo(viewwdith / 2 + GreatCircleRadius, GreatCircleY);
//绘制右边的二次曲线
mPath.quadTo(viewwdith / 2 + SmallCircleRadius, (GreatCircleY + SmallCircleY) / 2, viewwdith / 2 + SmallCircleRadius, SmallCircleY);
//绘制小圆圆弧
mPath.arcTo(new RectF(viewwdith / 2 - SmallCircleRadius, SmallCircleY - SmallCircleRadius,
viewwdith / 2 + SmallCircleRadius, SmallCircleY + SmallCircleRadius), 0, 180);

canvas.drawPath(mPath, mPaint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
firstY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
float dy = event.getY() - firstY;
if (Math.abs(dy) > 2 &&(SmallCircleY-GreatCircleY)<viewheight) {
if (dy<0&&SmallCircleY<GreatCircleY){

}else{

SmallCircleY = SmallCircleY + dy;
if (SmallCircleY<GreatCircleY)
SmallCircleY=GreatCircleY;
}
jisuanR();
}
firstY = event.getY();
Log.v("xingyun", "dy=" + dy);
invalidate();
break;

case MotionEvent.ACTION_UP:
//开启线程匀速返回
new MyTread().start();
break;

}
return true;
}

/**
* 根据下拉的距离来计算两个圆的半径
*/
private void jisuanR(){
float dy=SmallCircleY-GreatCircleY;

progress=dy/(viewheight);
SmallCircleRadius=(float)(50*(1-0.9*progress));
GreatCircleRadius= (float) (50*(1-0.5*progress));

}

/**
* 回弹的线程
*/
class MyTread extends Thread{
@Override
public void run() {
while (SmallCircleY-GreatCircleY>0){
SmallCircleY=SmallCircleY-10;
if (SmallCircleY<GreatCircleY){
SmallCircleY=GreatCircleY;
}
jisuanR();
postInvalidate();
try {
Thread.sleep(10);
} catch (InterruptedException e) {
e.printStackTrace();
}

}
}
}

}

如想用用在下拉刷新处也是非常简单的，监听到下拉的距离，用此来设置圆心距即可、~

如有问题，或者更好的实现方法也可以分享一下，谢谢~