参考:
效果图:
自定义控件:
自定义属性自己可以添加,其他具体看注释。
public class MyCountDownView extends View {
private static final int DEFAULT_WIDTH = 500;
private static final int DEFAULT_HEIGHT = 500;
private Paint arcPaint;
private Paint circlePaint;
private int radius;
private RectF arcRectF;
private int viewWidth;
private int viewHeight;
private Paint textPaint;
private String timeStr;
private int seconds;
private int perSecondProgress;
private float mCurrentProgress = 0;
private boolean isReverse;
public MyCountDownView(Context context) {
super(context);
init();
}
public MyCountDownView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public MyCountDownView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
arcPaint = new Paint();
arcPaint.setAntiAlias(true);
arcPaint.setColor(Color.RED);
arcPaint.setStyle(Paint.Style.STROKE);
circlePaint = new Paint();
circlePaint.setStrokeWidth(5);
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.parseColor("#33000000"));
circlePaint.setStyle(Paint.Style.FILL);
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setStrokeWidth(2);
textPaint.setColor(Color.WHITE);
textPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getProperSize(DEFAULT_WIDTH, widthMeasureSpec);
int height = getProperSize(DEFAULT_HEIGHT, heightMeasureSpec);
int result = Math.min(width, height);
setMeasuredDimension(result, result);
}
private int getProperSize(int defaultSize, int measureSpec) {
int result;
int mode = MeasureSpec.getMode(measureSpec);
int size = MeasureSpec.getSize(measureSpec);
if (mode == MeasureSpec.EXACTLY) {
result = size;
} else {
result = defaultSize;
if (mode == MeasureSpec.AT_MOST) {
result = Math.min(result, size);
}
}
return result;
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
radius = w / 2;
viewWidth = w;
viewHeight = h;
//圆弧宽度与大小
float defaultStrokeWidth = (float) (radius * 0.1);
arcPaint.setStrokeWidth(defaultStrokeWidth);
arcRectF = new RectF();
arcRectF.left = defaultStrokeWidth / 2;
arcRectF.top = defaultStrokeWidth / 2;
arcRectF.right = w - defaultStrokeWidth / 2;
arcRectF.bottom = h - defaultStrokeWidth / 2;
//字体大小
float textSize = (float) (radius * 0.5);
textPaint.setTextSize(textSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制背景圆
canvas.drawCircle(viewWidth / 2, viewHeight / 2, radius, circlePaint);
//绘制进度
if (isReverse) {
canvas.drawArc(arcRectF, -90, (mCurrentProgress / 100) * 360, false, arcPaint);
} else {
canvas.drawArc(arcRectF, -90, -(mCurrentProgress / 100) * 360, false, arcPaint);
}
//绘制文字
for (int i = seconds; i > 0; i--) {
if (mCurrentProgress > perSecondProgress * (i - 1)) {
timeStr = i + "秒";
break;
} else if (mCurrentProgress == 0) {
timeStr = "跳过";
}
}
//文字宽度
int textWidth = (int) textPaint.measureText(timeStr);
//文字baseline
Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
int baseline = (viewHeight - fontMetrics.bottom - fontMetrics.top) / 2;//view高度居中
//绘制文本
canvas.drawText(timeStr, (viewWidth - textWidth) / 2, baseline, textPaint);
}
public void start(int duration, boolean isReverse) {
this.seconds = duration / 1000;
this.perSecondProgress = 100 / seconds;
this.isReverse = isReverse;
ValueAnimator progressAnimator = ValueAnimator.ofFloat(100, 0);
progressAnimator.setDuration(duration);
progressAnimator.setInterpolator(new LinearInterpolator());
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentProgress = (float) valueAnimator.getAnimatedValue();
invalidate();
}
});
progressAnimator.start();
}
}
复制代码
使用:
MyCountDownView myCountDownView = ((MyCountDownView) this.findViewById(R.id.countdownview));
myCountDownView.start(5 * 1000, true);
myCountDownView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你点击了我", Toast.LENGTH_SHORT).show();
}
});
复制代码