第Android模擬實(shí)現(xiàn)華為系統(tǒng)升級進(jìn)度條目錄前言實(shí)現(xiàn)步驟1.用DashPathEffect給paint加上虛線效果2.畫出進(jìn)度條3.繪制文字4.加入動畫效果完整代碼

前言

之前用華為Android系統(tǒng)的時候總是會想到這種虛線進(jìn)度條是怎么實(shí)現(xiàn)的，因?yàn)橹苯佑胏anvas的drawArc方法畫出來的是實(shí)線，所以最近在網(wǎng)上搜了很多進(jìn)度條相關(guān)的文章，也了解到了其中的原理，下面分享給大家。下面這兩篇文章是我之前寫的Android進(jìn)度條相關(guān)的文章，有興趣的朋友們可以看看：

Android實(shí)現(xiàn)絢麗的自定義進(jìn)度條

詳解Android如何自定義view實(shí)現(xiàn)圓形進(jìn)度條

下面開始講解虛線進(jìn)度條的實(shí)現(xiàn)方法，首先看一張圖：

實(shí)現(xiàn)步驟

大家可以先想想這種進(jìn)度條是怎么實(shí)現(xiàn)的？網(wǎng)上有各種各樣的方法，也有人用path的lineTo()方法實(shí)現(xiàn)了類似的效果。但是我個人覺得canvas的drawArc方法也是個不錯的選擇，適合自己的才是最好的。

canvas.drawArc(rectF,0,process,false,mPaint);

閱讀了大量文章，最后發(fā)現(xiàn)改變paint的樣式是最簡單好用的方法。給paint設(shè)置一個effect就好了。

1.用DashPathEffect給paint加上虛線效果

DashPathEffectdashPathEffect=newDashPathEffect(newfloat[]{8,6},0);

mPaintBack.setPathEffect(dashPathEffect);

build一下項目，看到的結(jié)果是這樣的：

能實(shí)現(xiàn)這個效果就大功告成了，如果看過我前面兩篇文章的朋友們就知道，后面的步驟就簡單了，加個進(jìn)度條和動畫效果就可以了。

privatevoiddrawBack(Canvascanvas){

RectFrectF=newRectF(strokeWidth,strokeWidth,getWidth()-strokeWidth,getHeight()-strokeWidth);

PathEffecteffects=newDashPathEffect(newfloat[]{8,6},0);

mPaintBack.setPathEffect(effects);

canvas.drawArc(rectF,0,360,false,mPaintBack);

2.畫出進(jìn)度條

畫進(jìn)度條和畫背景完全一樣，只是畫筆顏色和小點(diǎn)個數(shù)不一樣。

代碼如下：

privatevoiddrawProgress(Canvascanvas){

RectFrectF=newRectF(strokeWidth,strokeWidth,getWidth()-strokeWidth,getHeight()-strokeWidth);

PathEffecteffects=newDashPathEffect(newfloat[]{8,6},0);

mPaint.setPathEffect(effects);

canvas.drawArc(rectF,0,process,false,mPaint);

3.繪制文字

接下來是繪制文字，實(shí)現(xiàn)文字居中的效果。思路是計算出圓心，調(diào)用canvas.drawText的方法就能在canvas上面繪制文字了。這里不需要更新進(jìn)度文字，所以就更省事了。

EMUI下面的10.0.0也是一樣的方法，只是給Y坐標(biāo)加一下55，往下移一點(diǎn)就好。

//繪制文字

privatevoiddrawText(Canvascanvas){

intmTxtWidth=getTextWidth();

intmTxtHeight=getTextHeight();

intx=getWidth()/2-mTxtWidth/2;

inty=getHeight()/2+mTxtHeight/4;

canvas.drawText(getResources().getString(R.string.defaultTextEmui),x,y,mPaintText);

//繪制下方文字

privatevoiddrawTextBlow(Canvascanvas){

intmTxtWidth=getTextWidthBlow();

intmTxtHeight=getTextHeight();

intx=getWidth()/2-mTxtWidth/2;

inty=getHeight()/2+mTxtHeight/4+55;

canvas.drawText(getResources().getString(R.string.defaultTextBelow),x,y,mPaintTextLevel);

4.加入動畫效果

/**

*設(shè)置動畫效果

publicvoidstart(){

ValueAnimatorvalueAnimator=ValueAnimator.ofInt(0,360);

valueAnimator.setDuration(duration);

valueAnimator.setInterpolator(newLinearInterpolator());

valueAnimator.addUpdateListener(animation-{

process=(int)animation.getAnimatedValue();

invalidate();

valueAnimator.start();

最終效果：

完整代碼

packagecom.example.floatingwindow.widget;

importandroid.animation.ValueAnimator;

importandroid.content.Context;

importandroid.graphics.Canvas;

importandroid.graphics.DashPathEffect;

importandroid.graphics.Paint;

importandroid.graphics.PathEffect;

importandroid.graphics.RectF;

importandroid.util.AttributeSet;

importandroid.util.TypedValue;

importandroid.view.View;

importandroid.view.animation.LinearInterpolator;

importandroidx.annotation.Nullable;

importcom.example.floatingwindow.R;

publicclassDottedLineProgressBarextendsView{

privatePaintmPaint;

privatePaintmPaintBack;

privatePaintmPaintText;

privatePaintmPaintTextLevel;

privateintstrokeWidth=30;

privateinttextSize=22;

privateinttextSizeBlow=15;

privatelongduration=3500;

privateintprocess;

publicDottedLineProgressBar(Contextcontext){

super(context);

init();

publicDottedLineProgressBar(Contextcontext,@NullableAttributeSetattrs){

super(context,attrs);

init();

publicDottedLineProgressBar(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){

super(context,attrs,defStyleAttr);

init();

publicvoidsetStrokeWidth(intwidth){

strokeWidth=width;

publicvoidsetTextSize(inttextSize){

this.textSize=textSize;

publicvoidsetDuration(longduration){

this.duration=duration;

publicvoidsetTextSizeBlow(inttextSizeBlow){

this.textSizeBlow=textSizeBlow;

//初始化畫筆

privatevoidinit(){

mPaintBack=newPaint();//圓角矩形

mPaintBack.setColor(getResources().getColor(R.color.gray));//圓角矩形顏色

mPaintBack.setAntiAlias(true);//抗鋸齒效果

mPaintBack.setStyle(Paint.Style.STROKE);//設(shè)置畫筆樣式

mPaintBack.setStrokeWidth(strokeWidth);//設(shè)置畫筆寬度

mPaint=newPaint();

mPaint.setColor(getResources().getColor(R.color.blue));

mPaint.setAntiAlias(true);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeWidth(strokeWidth);

mPaintText=newPaint();

mPaintText.setAntiAlias(true);

mPaintText.setStyle(Paint.Style.FILL);

mPaintText.setColor(getResources().getColor(R.color.blue));

mPaintText.setTextSize(sp2px(textSize));

mPaintTextLevel=newPaint();

mPaintTextLevel.setAntiAlias(true);

mPaintTextLevel.setStyle(Paint.Style.FILL);

mPaintTextLevel.setColor(getResources().getColor(R.color.gray));

mPaintTextLevel.setTextSize(sp2px(textSizeBlow));

@Override

protectedvoidonDraw(Canvascanvas){

super.onDraw(canvas);

drawBack(canvas);

drawProgress(canvas);

drawText(canvas);

drawTextBlow(canvas);

privatevoiddrawBack(Canvascanvas){

RectFrectF=newRectF(strokeWidth,strokeWidth,getWidth()-strokeWidth,getHeight()-strokeWidth);

PathEffecteffects=newDashPathEffect(newfloat[]{8,6},0);

mPaintBack.setPathEffect(effects);

canvas.drawArc(rectF,0,360,false,mPaintBack);

privatevoiddrawProgress(Canvascanvas){

RectFrectF=newRectF(strokeWidth,strokeWidth,getWidth()-strokeWidth,getHeight()-strokeWidth);

PathEffecteffects=newDashPathEffect(newfloat[]{8,6},0);

mPaint.setPathEffect(effects);

canvas.drawArc(rectF,0,process,false,mPaint);

//繪制文字

privatevoiddrawText(Canvascanvas){

intmTxtWidth=getTextWidth();

intmTxtHeight=getTextHeight();

intx=getWidth()/2-mTxtWidth/2;

inty=getHeight()/2+mTxtHeight/4;

canvas.drawText(getResources().getString(R.string.defaultTextEmui),x,y,mPaintText);

//繪制下方文字

privatevoiddrawTextBlow(Canvascanvas){

intmTxtWidth=getTextWidthBlow();

intmTxtHeight=getTextHeight();

intx=getWidth()/2-mTxtWidth/2;

inty=getHeight()/2+mTxtHeight/4+55;

canvas.drawText(getResources().getString(R.string.defaultTextBelow),x,y,mPaintTextLevel);

privateintgetTextWidth(){

Stringtext=getResources().getString(R.string.defaultTextEmui);

return(int)mPaintText.measureText(text,0,text.length());

privateintgetTextWidthBlow(){

Stringtext=getResources().getString(R.string.defaultTextBelow);

return(int)mPaintTextLevel.measureText(text,0,text.length());

privateintgetTextHeight(){

Paint.FontMetricsfm=mPaintText.getFontMetrics();

return(int)Math.ceil(fm.descent-fm.ascent);

privateintsp2px(intsp){

return(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,sp,

getResources().getDisplayMetrics());

*設(shè)置動畫效果

publicvoidstart(){

ValueAnimatorvalueAnimator=ValueAnimator.ofInt(0,360);

valueAnimator.setDuration(duration