自定义倒计时跳过按钮

效果很简单，现在很多APP都有这种效果。

直接上效果图

先说一下源码地址吧，急用的同学直接拿去用
https://github.com/likangA/CountdownView/tree/master/library/src/main

用法：
XML中直接设置：

        app:center_text="跳过"app:center_text_color="@color/colorAccent"app:center_text_size="12sp"app:duration="5000"app:progress_color="@color/colorPrimary"app:progress_light_color="@color/colorAccent"

Java：

        mCountdownView.setDuration(5000);mCountdownView.setProgressColor(0xFF3F51B5);mCountdownView.setProgressLightColor(0xFFFF4081);mCountdownView.setText("跳过");mCountdownView.setTextSize(12);mCountdownView.setTextColor(0xFFFF4081);mCountdownView.setCountdownListener(new CountdownView.CountdownListener() {@Overridepublic void onProgressListener(int progress, boolean isFinish) {if (isFinish) {Toast.makeText(MainActivity.this, "倒计时完成", Toast.LENGTH_SHORT).show();}}});mCountdownView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "跳过", Toast.LENGTH_SHORT).show();}});

第一步、自定义属性

res/values/attrs中添加下面自定义属性

<declare-styleable name="CountdownView"><attr name="duration" format="float"/>  <!-- 倒计时时长 --><attr name="progress_color" format="color"/>  <!-- 默认的时候进度颜色 --><attr name="progress_light_color" format="color"/>  <!-- 倒计时转过的进度颜色 --><attr name="center_text" format="string"/>  <!-- 中间文字 --><attr name="center_text_color" format="color"/>  <!-- 中间文字颜色 --><attr name="center_text_size" format="dimension"/>  <!-- 中间文字大小 -->
</declare-styleable>

获取自定属性

private void obtainAttr(AttributeSet attrs) {TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CountdownView);mDuration = (long) (typedArray.getFloat(R.styleable.CountdownView_duration, 3) * 1000);mProgressColor = typedArray.getColor(R.styleable.CountdownView_progress_color,DEFAULT_PROGRESS_COLOR);mProgressLightColor = typedArray.getColor(R.styleable.CountdownView_progress_light_color,  DEFAULT_PROGRESS_LIGHT_COLOR);if (typedArray.hasValue(R.styleable.CountdownView_center_text)) {mCenterText = typedArray.getString(R.styleable.CountdownView_center_text);mIsShowInterval = false;}mTextColor = typedArray.getColor(R.styleable.CountdownView_center_text_color, DEFAULT_TEXT_COLOR);mTextSize = typedArray.getDimension(R.styleable.CountdownView_center_text_size, sp2px(getContext(), 12));typedArray.recycle();
}

画笔的基础设置

    private void initPaint() {//Paint config for default progress.默认进度画笔设置mProgressPaint = new Paint();mProgressPaint.setStrokeWidth(mProgressWidth = dip2px(getContext(), 3));mProgressPaint.setStyle(Paint.Style.STROKE);//Paint config for light progress.倒计时转过的画笔设置mProgressLightPaint = new Paint();mProgressLightPaint.setStrokeWidth(mProgressWidth = dip2px(getContext(), 3));mProgressLightPaint.setStyle(Paint.Style.STROKE);//Paint config for text progress.文字画笔设置mTextPaint = new Paint();mTextPaint.setStyle(Paint.Style.FILL);}

第一步的代码在构造函数中调用，第二步的代码在onDraw中调用

第二步、下面开始绘制，首先是默认状态下的进度条

就是一个圆圈

    private void drawProgress(Canvas canvas) {canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2 - mProgressWidth,mProgressPaint);}

倒计时转过的圆圈

    private void drawProgressLight(Canvas canvas) {//画布的方向是从X轴正方形开始为0度，但我们需要的是从Y轴正方向开始，所以画布需要逆时针旋转90度canvas.save();canvas.rotate(-90, getWidth() / 2, getHeight() / 2);RectF progressLightRect = new RectF(mProgressWidth, mProgressWidth,getWidth() - mProgressWidth, getHeight() - mProgressWidth);//扫过的角度大小float sweep = obtainPercent() * 360;canvas.drawArc(progressLightRect, 0, sweep, false, mProgressLightPaint);canvas.restore();}

obtainPercent函数是获取当前百分比进度，就一句话。可以看到红色扫过的长度跟mCurProgress有关

先手动给mCurProgress一个初始值，可以看到已经有了效果

    private float obtainPercent() {return (float) mCurProgress / 100;}

然后是中间的文字

    private void drawText(Canvas canvas) {Rect textBound = new Rect();mTextPaint.getTextBounds(mCenterText, 0, mCenterText.length(), textBound);Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();//文字垂直居中的y：getHeight() / 2 - fontMetrics.descent + (fontMetrics.descent - fontMetrics.ascent) / 2canvas.drawText(mCenterText, getWidth() / 2 - textBound.width() / 2,getHeight() / 2 - fontMetrics.descent + (fontMetrics.descent - fontMetrics.ascent) / 2,mTextPaint);}

文字垂直居中可以百度一下drawText怎么垂直居中。刚开始我也是很糊涂

第三步、该让红色自动画圆了

上面说道红色扫过的长度跟mCurProgress有关，所以只要能自动改变mCurProgress的值，扫过的红色自然就跟着变了，这里选择了ValueAnimator来控制

public void startAnim() {final ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 100);valueAnimator.setDuration(mDuration);valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mCurProgress = (int) animation.getAnimatedValue();//...invalidate();}});valueAnimator.start();}

现在调用一下看效果

CountdownView mCountdownView = (CountdownView) findViewById(R.id.countdown);
mCountdownView.startAnim();

最后就是倒计时结束的监听了，我们用ValueAnimator实现的倒计时，所以监听也应该在ValueAnimator这实现，在ValueAnimator的onAnimationUpdate中添加几行代码即可

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mCurProgress = (int) animation.getAnimatedValue();mSurplusDuration = mDuration - animation.getCurrentPlayTime();//进度监听if (mCountdownListener != null) {mCountdownListener.onProgressListener(mCurProgress, mCurProgress == 100);}invalidate();}});

进度监听接口定义

    public interface CountdownListener {void onProgressListener(int progress, boolean isFinish);}

对了，如果想显示倒计时还剩多少秒的话可以去掉文字设置或者setCenterText(null)就行了。怎么实现的很简单，看一下源码就能看懂。效果：

好了，就是这么简单
其实学Android以来从来没怎么写过自定义View，博客更是没写过，感觉这篇更像是笔记吧，不过有个好的开端也是好的