android粘性标签库banner,[Android开发]仿带有粘性的圆形刷新控件(1)

实现效果：

实现过程：

首先是图形的绘制实现：

采用两个圆，一个是在原地不动的起始圆S，一个是被拉伸出去的圆E，并用两条贝塞尔曲线接合，然后填充。

具体的图形就像下图，为了跟好的切合，选取了图一的方案，两条贝塞尔曲线的控制点选取O和P

为了绘制贝塞尔曲线，我们需要获取A,B,D,C,O,P这6个点的坐标。而我们已知圆S和E的圆心坐标和半径

可根据两圆心的距离和圆心坐标求出角R2R1X的cos和sin值。然后再加上两个圆的半径就可以求出A、B、C、D的坐标。O和P的坐标可以根据上面四个起点的坐标加上圆心距离和cos和sin就可以求出。具体计算代码如下：

private boolean calculateBezierCurve(Circle circleStart, Circle circleEnd){

float startRadius = circleStart.radius;

float endRadius = circleEnd.radius;

float startX = circleStart.centerPoint.x;

float startY = circleStart.centerPoint.y;

float endX= circleEnd.centerPoint.x;

float endY = circleEnd.centerPoint.y;

float mCircleDistance = getDistanceBetweenTwoPoints(startX,startY,endX,endY);

//两个圆重合就无需要绘制连接曲线

if(mCircleDistance == 0){

return false;

}

float cos = (startX - endX)/mCircleDistance;

float sin = (startY - endY)/mCircleDistance;

float ax = startX - startRadius * sin;

float ay = startY + startRadius * cos;

pStartA.x = ax;

pStartA.y = ay;

float bx = startX + startRadius * sin;

float by = startY - startRadius * cos;

pStartB.x = bx;

pStartB.y = by;

float cx = endX - endRadius * sin;

float cy = endY + endRadius * cos;

pEndA.x = cx;

pEndA.y = cy;

float dx = endX + endRadius * sin;

float dy = endY - endRadius * cos;

pEndB.x = dx;

pEndB.y = dy;

float ox = cx + mCircleDistance /2 * cos;

float oy = cy + mCircleDistance /2 * sin;

pControlO.x = ox;

pControlO.y = oy;

float px = dx + mCircleDistance /2 * cos;

float py = dy + mCircleDistance /2 * sin;

pControlP.x = px;

pControlP.y = py;

return true;

}

需要计算的还有两个圆的随手指移动，圆心坐标和半径的变化:downPoint和movePoint分别是手指第一次按下的点和随后滑动手指所在的点

private void calculateCircleSize(){

float mMoveDistance = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);

//两圆重合无需再计算

if(mMoveDistance <= 0) return;

mScale = mMoveDistance/MaxMoveDistance;

//开始圆按比例缩小

circleStart.radius = DEFAULT_RADIUS * (1- mScale);

//拉出圆按比例放大

circleEnd.radius = DEFAULT_RADIUS * mScale;

//开始圆的位置不变，拉出圆的位置根据滑动的距离移动

circleEnd.centerPoint.x = circleStart.centerPoint.x + movePoint.x - downPoint.x;

circleEnd.centerPoint.y = circleStart.centerPoint.y + movePoint.y - downPoint.y;

}

经过适当的计算后，就是绘制图形：

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//关闭硬件加速，否则部分path的绘制不生效

setLayerType(View.LAYER_TYPE_SOFTWARE,null);

//根据按下的和滑动的点两个点的距离计算，开始圆和拉出圆的中心坐标以及半径

calculateCircleSize();

canvas.drawCircle(circleStart.centerPoint.x, circleStart.centerPoint.y, circleStart.radius, mBezierPaint);

canvas.drawCircle(circleEnd.centerPoint.x, circleEnd.centerPoint.y, circleEnd.radius, mBezierPaint);

if(calculateBezierCurve(circleStart,circleEnd)){

drawBezierCurves(canvas);//绘制两圆间的贝塞尔曲线

}

if(loadAnimator.isRunning()){

drawLoading(canvas);//绘制旋转时，中心的圆弧

}else {

drawLoadingNormal(canvas);//绘制中心的圆弧和箭头

}

}

然后就是中心圆弧的绘制，因为在加载时和在拖拉时图形不同，就区分开来绘制

在拖拉时，中心是一段圆弧加上一个小箭头。绘制原理大概是在初始化的时候预先创建了一段接近360度的圆圈,因为直接360度的时候后续用PathMeasure测量长度可能不准

mLoadPath = new Path();

float loadCircleRadius = DEFAULT_RADIUS - DEFAULT_PADDING;

RectF circle = new RectF(-loadCircleRadius, -loadCircleRadius, loadCircleRadius, loadCircleRadius);

mLoadPath.addArc(circle, 0, 359.9f);

用PathMeasure获取之前创建圆圈Path的长度，选取圆圈上开始的长度start为0，就是圆圈开始的地方，再选取截取的长度stop为3/4的圆长。并且截取这段圆弧。这样中心的圆弧就有了。

同时，用PathMeasure获取截点stop的坐标以及正切角，用新建的path画一个小箭头，箭头的顶点在stop的坐标上。再根据正切角获取箭头需要旋转的角度。具体代码如下：

private void drawLoadingNormal(Canvas canvas){

//这里包含对画布坐标系的转换，快照一下，防止影响后续绘制

canvas.save();

//将画布中心移到开始圆的中心

canvas.translate(circleStart.centerPoint.x,circleStart.centerPoint.y);

//根据移动的距离比例，对画布缩小和旋转

canvas.scale(1 - mScale,1 - mScale);

canvas.rotate(360 * mScale);

pathMeasure.setPath(mLoadPath,false);//将中心圆圈的path和pathMeasure关联

float[] pos = new float[2];

float[] tan = new float[2];

float stop = pathMeasure.getLength() * 0.75f;

float start = 0;

pathMeasure.getPosTan(stop,pos,tan);//获取截取圆弧的结束点的坐标和方向趋势

//根据tan获取旋转的角度，用于旋转后面绘制的箭头

float degrees =(float)(Math.atan2(tan[1],tan[0])*180/Math.PI);

Matrix matrix = new Matrix();

Path triangle = new Path();

//绘制箭头，此时的箭头的顶点坐标还在原点

triangle.moveTo(pos[0] - 5, pos[1] + 5);

triangle.lineTo(pos[0],pos[1]);

triangle.lineTo(pos[0] + 5, pos[1] + 5);

triangle.close();

//将箭头移动到圆弧结束点的位置并旋转

matrix.setRotate(degrees+90, pos[0],pos[1]);

Path showPath = new Path();

//前面的箭头添加将要绘制的路径里面

showPath.addPath(triangle,matrix);

//截取圆圈从起始点到结束的圆弧并添加到要绘制的path中，true代表不将截取的圆弧的起点移动到之前path的最后一个点上

pathMeasure.getSegment(start,stop,showPath,true);

canvas.drawPath(showPath, mLoadPaint);

canvas.restore();

}

绘制加载时候的圆弧同理，只是少画了箭头，同时start和stop的位置根据animator给与的value来选取，这里的value的值由0慢慢变化到1

private void drawLoading(Canvas canvas){

//基本和绘制一般状态的时候一样，除了截取的起点和终点需要动态的计算

canvas.save();

canvas.translate(circleStart.centerPoint.x, circleStart.centerPoint.y);

canvas.scale(1 - mScale,1 - mScale);

pathMeasure.setPath(mLoadPath,false);

Path newPath = new Path();

float stop = pathMeasure.getLength() * mLoadAnimatorValue;

float start = (float)(stop - (0.5 - Math.abs(mLoadAnimatorValue - 0.5)) * 200f);

pathMeasure.getSegment(start,stop,newPath,true);

canvas.drawPath(newPath, mLoadPaint);

canvas.restore();

}

手指状态获取的代码如下：

@Override

public boolean onTouchEvent(MotionEvent event) {

float x = event.getX();

float y = event.getY();

//动画执行时，无需改变两点的坐标

switch (event.getAction()){

case MotionEvent.ACTION_DOWN:

if(!stickyAnimator.isRunning() && !loadAnimator.isRunning()){

downPoint.x = x;

downPoint.y = y;

movePoint.set(downPoint);

resetLoadAnimator();

}

break;

case MotionEvent.ACTION_MOVE:

if(!stickyAnimator.isRunning() && !loadAnimator.isRunning() && !loading){

movePoint.x = x;

movePoint.y = y;

float distanceMove = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);

//滑动距离在动作范围内，则开始执行回滚动画和loading动画

if(inLoadArea(distanceMove)){

loading = true;

executeAnimator(distanceMove);

}

invalidate();

}

break;

case MotionEvent.ACTION_UP:

case MotionEvent.ACTION_CANCEL:

if(!stickyAnimator.isRunning() && !loadAnimator.isRunning() && !loading){

movePoint.x = x;

movePoint.y = y;

float distanceUp = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);

//滑动距离在动作范围内，则开始执行回滚动画和loading动画，否则只开始回滚动画

if(inLoadArea(distanceUp)){

loading = true;

}

executeAnimator(distanceUp);

}

break;

}

return true;

}