最近一直在整自定义view接下来要做的是青芒杂志上的一个打勾的动画
做的不太完整不过基本效果基本思路是有了
首先在初始化代码中实现画笔 的初始化
Paint circlePaint;//圆环的paint
Paint fillPaint;//向内不断延伸的圆
Paint arcPaint;//向外不断延伸并收缩的圆
private void init() {
circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(Color.RED);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeWidth(2);
fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
fillPaint.setColor(Color.RED);
fillPaint.setStyle(Paint.Style.FILL);
arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
arcPaint.setColor(Color.RED);
arcPaint.setStyle(Paint.Style.STROKE);
arcPaint.setStrokeWidth(2);
}
然后在onMeasure中画出外接矩形确定远的外切矩形
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int maxLength = Math.max(getMeasureDate(widthMeasureSpec, 450), getMeasureDate(heightMeasureSpec, 450));
setMeasuredDimension(maxLength, maxLength);
centerX = maxLength / 2;
centerY = maxLength / 2;
rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);//设置圆的外切矩形
}
最后就是我们的绘制过程了
1.先画出外圆
if (swapAngle < 360) {//画外圆
swapAngle += 1;
circlePaint.setStyle(Paint.Style.STROKE);
canvas.drawArc(rectF, 90, swapAngle, false, circlePaint);
invalidate();
return;
}
2.再画出不断向内延伸的矩形
if (swapRadios <= radius) {//画内圆
fillPaint.setColor(Color.RED);
canvas.drawCircle(centerX, centerY, radius, fillPaint);
fillPaint.setColor(Color.WHITE);
swapRadios++;
canvas.drawCircle(centerX, centerY, radius - swapRadios, fillPaint);
fillPaint.setColor(Color.RED);
invalidate();
return;
}
3.最后画向外延伸又收回的矩形
canvas.drawCircle(centerX, centerY, radius, fillPaint);//先画上内圆
arcStrockWidth++;
int width = 0;
if (maxStrockWidth >= arcStrockWidth) {//扩张
width = arcStrockWidth;
} else if (arcStrockWidth < 2 * maxStrockWidth) {//缩小
width = 2 * maxStrockWidth - arcStrockWidth;
} else {//固定
width = 0;
}
if (width != 0) {
arcPaint.setStrokeWidth(width);
canvas.drawArc(rectF, 90, 360, false, arcPaint);
invalidate();
}
完整代码如下
public class TickViewNew extends View {
Paint circlePaint;//圆环的paint
Paint fillPaint;//向内不断延伸的圆
Paint arcPaint;//向外不断延伸并收缩的圆
RectF rectF = new RectF();//圆环外切矩形
int radius = 200;//半径
int swapAngle = 0;//每次增加滑动角度
int swapRadios = 1;//每次减小的半径
int centerX, centerY;//圆心坐标
int arcStrockWidth = 1;//扩张宽度
int maxStrockWidth = 30;//最大扩张距离
public TickViewNew(Context context) {
this(context, null);
}
public TickViewNew(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public TickViewNew(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(Color.RED);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeWidth(2);
fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
fillPaint.setColor(Color.RED);
fillPaint.setStyle(Paint.Style.FILL);
arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
arcPaint.setColor(Color.RED);
arcPaint.setStyle(Paint.Style.STROKE);
arcPaint.setStrokeWidth(2);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int maxLength = Math.max(getMeasureDate(widthMeasureSpec, 450), getMeasureDate(heightMeasureSpec, 450));
setMeasuredDimension(maxLength, maxLength);
centerX = maxLength / 2;
centerY = maxLength / 2;
rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);//设置圆的外切矩形
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (swapAngle < 360) {//画外圆
swapAngle += 1;
circlePaint.setStyle(Paint.Style.STROKE);
canvas.drawArc(rectF, 90, swapAngle, false, circlePaint);
invalidate();
return;
}
if (swapRadios <= radius) {//画内圆
fillPaint.setColor(Color.RED);
canvas.drawCircle(centerX, centerY, radius, fillPaint);
fillPaint.setColor(Color.WHITE);
swapRadios++;
canvas.drawCircle(centerX, centerY, radius - swapRadios, fillPaint);
fillPaint.setColor(Color.RED);
invalidate();
return;
}
canvas.drawCircle(centerX, centerY, radius, fillPaint);//先画上内圆
arcStrockWidth++;
int width = 0;
if (maxStrockWidth >= arcStrockWidth) {//扩张
width = arcStrockWidth;
} else if (arcStrockWidth < 2 * maxStrockWidth) {//缩小
width = 2 * maxStrockWidth - arcStrockWidth;
} else {//固定
width = 0;
}
if (width != 0) {
arcPaint.setStrokeWidth(width);
canvas.drawArc(rectF, 90, 360, false, arcPaint);
invalidate();
}
}
private int getMeasureDate(int measureSpec, int defaultValue) {
switch (MeasureSpec.getMode(measureSpec)) {
case MeasureSpec.EXACTLY:
return MeasureSpec.getSize(measureSpec);
case MeasureSpec.AT_MOST:
case MeasureSpec.UNSPECIFIED:
default:
return defaultValue;
}
}
}
如有疑问欢迎大家提问
参考自 Android自定义View:一个精致的打钩小动画