別的不多說(shuō)，直接上代碼
創(chuàng)建自定義類(lèi) CustomProgress 繼承 View
CustomProgress類(lèi) 如下：/***********************開(kāi)始**********************/
private int mCurrent;//當(dāng)前進(jìn)度
private PaintmPaintOut;
private PaintmPaintCurrent;
private PaintmPaintText;
private float mPaintWidth;//畫(huà)筆寬度
private int mPaintColor = Color.RED;//畫(huà)筆顏色
private int mTextColor = Color.BLACK;//字體顏色
private float mTextSize;//字體大小
private int location;//從哪個(gè)位置開(kāi)始
private float startAngle;//開(kāi)始角度
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));//默認(rèn)4dp
? ? mPaintColor = array.getColor(R.styleable.CustomProgress_progress_paint_color,mPaintColor);
mTextSize = array.getDimension(R.styleable.CustomProgress_progress_text_size,dip2px(context,18));//默認(rèn)18sp
? ? mTextColor = array.getColor(R.styleable.CustomProgress_progress_text_color,mTextColor);
array.recycle();
//畫(huà)筆->背景圓弧
? ? mPaintOut =new Paint();
mPaintOut.setAntiAlias(true);
mPaintOut.setStrokeWidth(mPaintWidth);
mPaintOut.setStyle(Paint.Style.STROKE);
mPaintOut.setColor(Color.GRAY);
mPaintOut.setStrokeCap(Paint.Cap.ROUND);
//畫(huà)筆->進(jìn)度圓弧
? ? mPaintCurrent =new Paint();
mPaintCurrent.setAntiAlias(true);
mPaintCurrent.setStrokeWidth(mPaintWidth);
mPaintCurrent.setStyle(Paint.Style.STROKE);
mPaintCurrent.setColor(mPaintColor);
mPaintCurrent.setStrokeCap(Paint.Cap.ROUND);
//畫(huà)筆->繪制字體
? ? mPaintText =new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setStyle(Paint.Style.FILL);
mPaintText.setColor(mTextColor);
mPaintText.setTextSize(mTextSize);
if (location ==1) {//默認(rèn)從左側(cè)開(kāi)始
? ? ? ? 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);
}
// 然后調(diào)用onDraw 進(jìn)行繪制 看看效果：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//繪制背景圓弧,因?yàn)楫?huà)筆有一定的寬度，所有畫(huà)圓弧的范圍要比View本身的大小稍微小一些，不然畫(huà)筆畫(huà)出來(lái)的東西會(huì)顯示不完整
? ? RectF rectF =new RectF(mPaintWidth /2,mPaintWidth /2, getWidth() -mPaintWidth /2, getHeight() -mPaintWidth /2);
canvas.drawArc(rectF,0,360,false,mPaintOut);
//繪制當(dāng)前進(jìn)度
? ? float sweepAngle =360 *mCurrent /100;
canvas.drawArc(rectF,startAngle, sweepAngle,false,mPaintCurrent);
//繪制進(jìn)度數(shù)字
? ? 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();
}
}
/**
* 獲取當(dāng)前進(jìn)度值
*
* @return
*/
public int getmCurrent() {
return mCurrent;
}
/**
* 設(shè)置當(dāng)前進(jìn)度并重新繪制界面
*
* @param mCurrent
*/
public void setmCurrent(int mCurrent) {
this.mCurrent = mCurrent;
invalidate();
}
public void setOnLoadingCompleteListener(OnLoadingCompleteListener loadingCompleteListener) {
this.mLoadingCompleteListener = loadingCompleteListener;
}
public interface OnLoadingCompleteListener {
void complete();
}
/**
* 根據(jù)手機(jī)的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素)
*/
public static int dip2px(Context context,float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale +0.5f);
}
/***********************結(jié)束**********************/
2.在values目錄下創(chuàng)建attrs ? ? 《************開(kāi)始**********》
<declare-styleable name="CustomProgress">
<!--畫(huà)筆寬度-->
<attr name="progress_paint_width" format="dimension"/>
<!--畫(huà)筆顏色-->
<attr name="progress_paint_color" format="color"/>
<!--字體顏色-->
<attr name="progress_text_color" format="color"/>
<!--字體尺寸-->
<attr name="progress_text_size" format="dimension"/>
<!--加載進(jìn)度的開(kāi)始位置-->
-<attr name="location" format="enum"><enum name="left" value="1"/><enum name="top" value="2"/><enum name="right" value="3"/><enum name="bottom" value="4"/></attr></declare-styleable>
? ?《************結(jié)束 如下圖：**********》
到這里就基本結(jié)束了；在Activity中 設(shè)置動(dòng)畫(huà) 如下：
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();
如圖：
? ?
