Android自定义view之（CSDN应用splash界面的倒计时View）

最近有点闲，准确来说是很闲，每天早上要在公车上度过一段时间，一般我就会打开csdn应用看看别人的博客，哎哟~！ 看到CSDN欢迎页的倒计时view还不错哦，正好最近在学自定义View,所以就捣腾了一下，以前感觉遥不可及的东西真正做起来也不难哈，菜鸟一个，大牛勿喷^~^！！

先看一下效果图：



思路：

1、肯定是自定义个View了，偷懒下一个，为了不自己定义progress就直接继承ProgressBar,通过getProgress和getMax获取当前进度跟最大值。

2、重写onMeasure,测量View,自定义View的老套路了，测量的规则大概是这样的，如果明确了宽高就用定义的宽高，如果没有也就是wrap_content类型的时候，拿到文本也就是这里的“跳过”字的长度+一个自定义的offset偏移量的东西。

3、在ondraw里面不断的绘制，通过改变弧的startAngle绘制。

4、当达到最大值的时候开始回调（我这里为了测试通过监听动画结束来实现回调了）

atrr文件：

<!-- countdown view-->
<attr name="text" format="string"></attr>
<attr name="progress_color" format="color"></attr>
<attr name="center_bg" format="color"></attr>
<attr name="text_color" format="color"></attr>
<attr name="progress_width" format="dimension"></attr>
<declare-styleable name="count_down" >
<attr name="text" />
<attr name="progress_color" />
<attr name="center_bg" />
<attr name="text_color" />
<attr name="text_size"/>
<attr name="progress_width" />
</declare-styleable>

第一步：自定义一个CountDownView继承ProgressBar,照样是覆盖三个构造方法。

public class CountDownView extends ProgressBar {
/**
* 结束的位置
*/
private int endAngle=270;
private Paint mTextPaint;
private Paint mBgPaint;
/**
* 绘画的半径
*/
private int mRadius=dp2px(30);
/**
* 进度条color默认红色
*/
private int mProgressColor = Color.RED;
/**
* 进度条宽度，默认2dp
*/
private int mProgressWidth = dp2px(2);
/**
* 文本
*/
private String mText="跳过";
/**
* 文本颜色
*/
private int mTextColor=Color.WHITE;
/**
* 文本大小，默认14.5sp
*/
private int mTextSize=sp2px(14.5f);
/**
* 默认中心背景色
*/
private int centerBg=Color.GRAY;
/**
* 当wrapcontent的时候
* 控件的宽高为文字的宽度加上offset
*/
private float offset=15;
public CountDownView(Context context) {
this(context, null);
}

public CountDownView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
/**
获取参数和初始化Paint
*/
obtainStyleAttr(context, attrs, defStyleAttr);
////////////////测试
setMax(100);
startAnim();
///////////////测试
}
/**
* 获取参数
* @param context
* @param attrs
* @param defStyleAttr
*/
private void obtainStyleAttr(Context context, AttributeSet attrs, int defStyleAttr) {
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.count_down, defStyleAttr, 0);
int count=a.getIndexCount();
for (int i = 0; i < count; i++) {
int attr=a.getIndex(i);
switch (attr){
case R.styleable.count_down_center_bg:
centerBg=a.getColor(attr,centerBg);
break;
case R.styleable.count_down_text:
mText=a.getString(attr);
break;
case R.styleable.count_down_progress_color:
mProgressColor=a.getColor(attr,mProgressColor);
break;
case R.styleable.count_down_text_color:
mTextColor=a.getColor(attr,mTextColor);
break;
case R.styleable.count_down_text_size:
mTextSize=a.getDimensionPixelSize(attr,mTextSize);
break;
case R.styleable.count_down_progress_width:
mProgressWidth=a.getDimensionPixelSize(attr,mProgressWidth);
break;
}
}
a.recycle();
mTextPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setDither(true);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setColor(mTextColor);
mTextPaint.setStyle(Paint.Style.FILL);

mBgPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mBgPaint.setDither(true);
mBgPaint.setStyle(Paint.Style.STROKE);
mBgPaint.setStrokeCap(Paint.Cap.ROUND);
mBgPaint.setStrokeJoin(Paint.Join.ROUND);
mBgPaint.setStrokeWidth(mProgressWidth);
mBgPaint.setColor(mProgressColor);
}
}

第二步：重写onMeasure方法告诉父控件大小

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
/**
* 当为wrap_content的时候，返回的大小为 （文本的长度+红色进度条的宽度*2+一个自定义的offset）
*/
int result= (int) (getPaddingLeft()+getPaddingRight()+mTextPaint.measureText(mText)+mProgressWidth*2)+dp2px(offset);
/**
* 传入一个result，当widthMode为MeasureSpec.UNSPECIFIED的时候返回result，
* 否则为设定的值
*/
MeasureSpec.UNSPECIFIED
int width=resolveSize(result, widthMeasureSpec);
int height=resolveSize(result,heightMeasureSpec);
result=Math.min(width,height);
setMeasuredDimension(result, result);
mRadius=getMeasuredWidth()/2;

}

点进resolveSize方法的代码你就懂了，

public static int resolveSizeAndState(int size, int measureSpec, int childMeasuredState) {
final int specMode = MeasureSpec.getMode(measureSpec);
final int specSize = MeasureSpec.getSize(measureSpec);
final int result;
switch (specMode) {
case MeasureSpec.AT_MOST:
if (specSize < size) {
result = specSize | MEASURED_STATE_TOO_SMALL;
} else {
result = size;
}
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
case MeasureSpec.UNSPECIFIED:
default:
result = size;
}
return result | (childMeasuredState & MEASURED_STATE_MASK);
}

是不是很熟悉。嘻嘻！~ 没事多ctrl+左键一下就可以了~

第三步：来到了最关键的代码了

@Override
protected synchronized void onDraw(Canvas canvas) {
//画中间的圈
mTextPaint.setColor(centerBg);
canvas.drawCircle(mRadius, mRadius, mRadius-mProgressWidth/2, mTextPaint);
//绘制文本
mTextPaint.setColor(mTextColor);
int baseX= (int) (mRadius-mTextPaint.measureText(mText)/2);
int baseY= (int) (mRadius+(mTextPaint.getFontMetrics().bottom-mTextPaint.getFontMetrics().top)/2
-mTextPaint.getFontMetrics().bottom);
canvas.drawText(mText, baseX, baseY, mTextPaint);
/**
* 绘制进度条，
* 比如从startAngle从-90度的位置开始，endAngle为270位置（y的负轴位置）
* 需要绘制的角度为
* 270--90（开始）=360；
* 270-0（开始）=270
* 270-90（开始）=180
* 所以sweepAngle=startAngle-270(endAngle)
*/
int startAngle= (int) ((getProgress()*1.0f/getMax())*360)-90;
canvas.drawArc(new RectF(0+mProgressWidth/2, 0+mProgressWidth/2,mRadius*2-mProgressWidth/2, mRadius*2-mProgressWidth/2), startAngle, endAngle-startAngle, false, mBgPaint);
}

附带sp2px，dp2px的方法

/**
* dp2px
* -90 360  0 270 90 180
* @param value
* @return px
*/
private int dp2px(float value) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, getResources().getDisplayMetrics());
}

/**
* sp2px
*
* @param value
* @return px
*/
private int sp2px(float value) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, value, getResources().getDisplayMetrics());
}

第四步：打工告成了，测试一下（我们这就偷偷懒，用属性动画测试了，不过开发中可以换子线程+Handler或者别的方式实现，因为属性动画不兼容低版本）

public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
obtainStyleAttr(context, attrs, defStyleAttr);
////////////////测试
setMax(100);
startAnim();
}
private void startAnim() {
ValueAnimator a=ValueAnimator.ofInt(0, getMax() + 1);
a.setDuration(5000);
a.setInterpolator(new LinearInterpolator());
a.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int value = (int) animation.getAnimatedValue();
setProgress(value);
postInvalidate();
}
});
a.start();
a.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {

}

@Override
public void onAnimationEnd(Animator animation) {
Toast.makeText(getContext(), "计时完成，进入主页", Toast.LENGTH_SHORT).show();
}

@Override
public void onAnimationCancel(Animator animation) {

}

@Override
public void onAnimationRepeat(Animator animation) {

}
});
}

其实很简单吧，加起来才几十行代码，以前总感觉自定义view离我是那么的远，只要动手敲敲，摸索着前进，一定会有结果的~！！！

最后附上CountDownView代码：

package com.cisetech.customer.customer.Animation;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.animation.LinearInterpolator;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.cisetech.customer.customer.R;

/**
* Author:Yqy
* Date:2016-08-08
* Desc:倒计时View
* Company:cisetech
*/
public class CountDownView extends ProgressBar {
/**
* 结束的位置
*/
private int endAngle=270;
private Paint mTextPaint;
private Paint mBgPaint;
/**
* 绘画的半径
*/
private int mRadius=dp2px(30);
/**
* 进度条color默认红色
*/
private int mProgressColor = Color.RED;
/**
* 进度条宽度，默认2dp
*/
private int mProgressWidth = dp2px(2);
/**
* 文本
*/
private String mText="跳过";
/**
* 文本颜色
*/
private int mTextColor=Color.WHITE;
/**
* 文本大小，默认14.5sp
*/
private int mTextSize=sp2px(14.5f);
/**
* 默认中心背景色
*/
private int centerBg=Color.GRAY;
/**
* 当wrapcontent的时候
* 控件的宽高为文字的宽度加上offset
*/
private float offset=15;

public CountDownView(Context context) {
this(context, null);
}

public CountDownView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
obtainStyleAttr(context, attrs, defStyleAttr);
////////////////测试
setMax(100);
startAnim();
}

private void startAnim() {
ValueAnimator a=ValueAnimator.ofInt(0, getMax() + 1);
a.setDuration(5000);
a.setInterpolator(new LinearInterpolator());
a.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int value = (int) animation.getAnimatedValue();
setProgress(value);
postInvalidate();
}
});
a.start();
a.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {

}

@Override
public void onAnimationEnd(Animator animation) {
Toast.makeText(getContext(), "完成", Toast.LENGTH_SHORT).show();
}

@Override
public void onAnimationCancel(Animator animation) {

}

@Override
public void onAnimationRepeat(Animator animation) {

}
});
}

/**
* 获取参数
* @param context
* @param attrs
* @param defStyleAttr
*/
private void obtainStyleAttr(Context context, AttributeSet attrs, int defStyleAttr) {
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.count_down, defStyleAttr, 0);
int count=a.getIndexCount();
for (int i = 0; i < count; i++) {
int attr=a.getIndex(i);
switch (attr){
case R.styleable.count_down_center_bg:
centerBg=a.getColor(attr,centerBg);
break;
case R.styleable.count_down_text:
mText=a.getString(attr);
break;
case R.styleable.count_down_progress_color:
mProgressColor=a.getColor(attr,mProgressColor);
break;
case R.styleable.count_down_text_color:
mTextColor=a.getColor(attr,mTextColor);
break;
case R.styleable.count_down_text_size:
mTextSize=a.getDimensionPixelSize(attr,mTextSize);
break;
case R.styleable.count_down_progress_width:
mProgressWidth=a.getDimensionPixelSize(attr,mProgressWidth);
break;
}
}
a.recycle();
mTextPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setDither(true);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setColor(mTextColor);
mTextPaint.setStyle(Paint.Style.FILL);

mBgPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mBgPaint.setDither(true);
mBgPaint.setStyle(Paint.Style.STROKE);
mBgPaint.setStrokeCap(Paint.Cap.ROUND);
mBgPaint.setStrokeJoin(Paint.Join.ROUND);
mBgPaint.setStrokeWidth(mProgressWidth);
mBgPaint.setColor(mProgressColor);
}

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
/**
* 当为wrap_content的时候，返回的大小为 （文本的长度+红色进度条的宽度*2+一个自定义的offset）
*/
int result= (int) (getPaddingLeft()+getPaddingRight()+mTextPaint.measureText(mText)+mProgressWidth*2)+dp2px(offset);
/**
* 传入一个result，当widthMode为MeasureSpec.UNSPECIFIED的时候返回result，
* 否则为设定的值
*/
int width=resolveSize(result, widthMeasureSpec);
int height=resolveSize(result,heightMeasureSpec);
result=Math.min(width,height);
setMeasuredDimension(result, result);
mRadius=getMeasuredWidth()/2;

}
@Override
protected synchronized void onDraw(Canvas canvas) {
//画中间的圈
mTextPaint.setColor(centerBg);
canvas.drawCircle(mRadius, mRadius, mRadius-mProgressWidth/2, mTextPaint);
//绘制文本
mTextPaint.setColor(mTextColor);
int baseX= (int) (mRadius-mTextPaint.measureText(mText)/2);
int baseY= (int) (mRadius+(mTextPaint.getFontMetrics().bottom-mTextPaint.getFontMetrics().top)/2
-mTextPaint.getFontMetrics().bottom);
canvas.drawText(mText, baseX, baseY, mTextPaint);
/**
* 绘制进度条，
* 比如从startAngle从-90度的位置开始，endAngle为270位置（y的负轴位置）
* 需要绘制的角度为
* 270--90（开始）=360；
* 270-0（开始）=270
* 270-90（开始）=180
* 所以sweepAngle=startAngle-270(endAngle)
*/
int startAngle= (int) ((getProgress()*1.0f/getMax())*360)-90;
canvas.drawArc(new RectF(0+mProgressWidth/2, 0+mProgressWidth/2,mRadius*2-mProgressWidth/2, mRadius*2-mProgressWidth/2), startAngle, endAngle-startAngle, false, mBgPaint);
}
/**
* dp2px
* -90 360  0 270 90 180
* @param value
* @return px
*/
private int dp2px(float value) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, getResources().getDisplayMetrics());
}

/**
* sp2px
*
* @param value
* @return px
*/
private int sp2px(float value) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, value, getResources().getDisplayMetrics());
}
}