别的不多说,直接上代码
创建自定义类 CustomProgress 继承 View
CustomProgress类 如下:/***********************开始**********************/
private int mCurrent;//当前进度
private PaintmPaintOut;
private PaintmPaintCurrent;
private PaintmPaintText;
private float mPaintWidth;//画笔宽度
private int mPaintColor = Color.RED;//画笔颜色
private int mTextColor = Color.BLACK;//字体颜色
private float mTextSize;//字体大小
private int location;//从哪个位置开始
private float startAngle;//开始角度
private OnLoadingCompleteListenermLoadingCompleteListener;
public CustomProgress(Context context) {
this(context,null);
}
public CustomProgress(Context context,@Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public CustomProgress(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
super(context, attrs, defStyleAttr);//CircleProgressView
// TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CustomProgress);
location = array.getInt(R.styleable.CustomProgress_location,1);
mPaintWidth = array.getDimension(R.styleable.CustomProgress_progress_paint_width,dip2px(context,4));//默认4dp
mPaintColor = array.getColor(R.styleable.CustomProgress_progress_paint_color,mPaintColor);
mTextSize = array.getDimension(R.styleable.CustomProgress_progress_text_size,dip2px(context,18));//默认18sp
mTextColor = array.getColor(R.styleable.CustomProgress_progress_text_color,mTextColor);
array.recycle();
//画笔->背景圆弧
mPaintOut =new Paint();
mPaintOut.setAntiAlias(true);
mPaintOut.setStrokeWidth(mPaintWidth);
mPaintOut.setStyle(Paint.Style.STROKE);
mPaintOut.setColor(Color.GRAY);
mPaintOut.setStrokeCap(Paint.Cap.ROUND);
//画笔->进度圆弧
mPaintCurrent =new Paint();
mPaintCurrent.setAntiAlias(true);
mPaintCurrent.setStrokeWidth(mPaintWidth);
mPaintCurrent.setStyle(Paint.Style.STROKE);
mPaintCurrent.setColor(mPaintColor);
mPaintCurrent.setStrokeCap(Paint.Cap.ROUND);
//画笔->绘制字体
mPaintText =new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setStyle(Paint.Style.FILL);
mPaintText.setColor(mTextColor);
mPaintText.setTextSize(mTextSize);
if (location ==1) {//默认从左侧开始
startAngle = -180;
}else if (location ==2) {
startAngle = -90;
}else if (location ==3) {
startAngle =0;
}else if (location ==4) {
startAngle =90;
}
}
@Override
protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int size = width > height ? height : width;
setMeasuredDimension(size, size);
}
// 然后调用onDraw 进行绘制 看看效果:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制背景圆弧,因为画笔有一定的宽度,所有画圆弧的范围要比View本身的大小稍微小一些,不然画笔画出来的东西会显示不完整
RectF rectF =new RectF(mPaintWidth /2,mPaintWidth /2, getWidth() -mPaintWidth /2, getHeight() -mPaintWidth /2);
canvas.drawArc(rectF,0,360,false,mPaintOut);
//绘制当前进度
float sweepAngle =360 *mCurrent /100;
canvas.drawArc(rectF,startAngle, sweepAngle,false,mPaintCurrent);
//绘制进度数字
String text =mCurrent +"%";
//获取文字宽度
float textWidth =mPaintText.measureText(text,0, text.length());
float dx = getWidth() /2 - textWidth /2;
Paint.FontMetricsInt fontMetricsInt =mPaintText.getFontMetricsInt();
float dy = (fontMetricsInt.bottom - fontMetricsInt.top) /2 - fontMetricsInt.bottom;
float baseLine = getHeight() /2 + dy;
canvas.drawText(text, dx, baseLine,mPaintText);
if (mLoadingCompleteListener !=null &&mCurrent ==100) {
mLoadingCompleteListener.complete();
}
}
/**
* 获取当前进度值
*
* @return
*/
public int getmCurrent() {
return mCurrent;
}
/**
* 设置当前进度并重新绘制界面
*
* @param mCurrent
*/
public void setmCurrent(int mCurrent) {
this.mCurrent = mCurrent;
invalidate();
}
public void setOnLoadingCompleteListener(OnLoadingCompleteListener loadingCompleteListener) {
this.mLoadingCompleteListener = loadingCompleteListener;
}
public interface OnLoadingCompleteListener {
void complete();
}
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public static int dip2px(Context context,float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale +0.5f);
}
/***********************结束**********************/
2.在values目录下创建attrs 《************开始**********》
-
《************结束 如下图:**********》
到这里就基本结束了;在Activity中 设置动画 如下:
ValueAnimator animator = ValueAnimator.ofFloat(0,100);
animator.setDuration(4000);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float current = (float) animation.getAnimatedValue();
customPanel.setmCurrent((int) current);
}
});
animator.start();
如图: