目录
- 前言
- 实现步骤
- 1.用dashpatheffect给paint加上虚线效果
- 2.画出进度条
- 3.绘制文字
- 4.加入动画效果
- 完整代码
上述就是android开发分享Android模拟实现华为系统升级进度条的全部内容，如果对大家有所用处且需要了解更多关于Android学习教程，希望大家多多关注—计算机技术网(www.ctvol.com)!
前言
之前用华为android系统的时候总是会想到这种虚线进度条是怎么实现的，因为直接用canvas的drawarc方法画出来的是实线，所以最近在网上搜了很多进度条相关的文章，也了解到了其中的原理，下面分享给大家。下面这两篇文章是我之前写的android进度条相关的文章，有兴趣的朋友们可以看看：
android实现绚丽的自定义进度条
详解android如何自定义view实现圆形进度条
下面开始讲解虚线进度条的实现方法，首先看一张图：
实现步骤
大家可以先想想这种进度条是怎么实现的？网上有各种各样的方法，也有人用path的lineto()方法实现了类似的效果。但是我个人觉得canvas的drawarc方法也是个不错的选择，适合自己的才是最好的。
canvas.drawarc(rectf, 0, process, false, mpaint);
阅读了大量文章，最后发现改变paint的样式是最简单好用的方法。给paint设置一个effect就好了。
1.用dashpatheffect给paint加上虚线效果
dashpatheffect dashpatheffect = new dashpatheffect(new float[]{8, 6}, 0); mpaintback.setpatheffect(dashpatheffect);
build一下项目，看到的结果是这样的：
能实现这个效果就大功告成了，如果看过我前面两篇文章的朋友们就知道，后面的步骤就简单了，加个进度条和动画效果就可以了。
private void drawback(canvas canvas) { rectf rectf = new rectf(strokewidth, strokewidth, getwidth() - strokewidth, getheight() - strokewidth); patheffect effects = new dashpatheffect(new float[]{8, 6}, 0); mpaintback.setpatheffect(effects); canvas.drawarc(rectf, 0, 360, false, mpaintback); }
2.画出进度条
画进度条和画背景完全一样，只是画笔颜色和小点个数不一样。
代码如下：
private void drawprogress(canvas canvas) { rectf rectf = new rectf(strokewidth, strokewidth, getwidth() - strokewidth, getheight() - strokewidth); patheffect effects = new dashpatheffect(new float[]{8, 6}, 0); mpaint.setpatheffect(effects); canvas.drawarc(rectf, 0, process, false, mpaint); }
3.绘制文字
接下来是绘制文字，实现文字居中的效果。思路是计算出圆心，调用canvas.drawtext的方法就能在canvas上面绘制文字了。这里不需要更新进度文字，所以就更省事了。
emui 下面的10.0.0也是一样的方法，只是给y坐标加一下55，往下移一点就好。
//绘制文字 private void drawtext(canvas canvas) { int mtxtwidth = gettextwidth(); int mtxtheight = gettextheight(); int x = getwidth() / 2 - mtxtwidth / 2; int y = getheight() / 2 + mtxtheight / 4; canvas.drawtext(getresources().getstring(r.string.defaulttextemui), x, y, mpainttext); } //绘制下方文字 private void drawtextblow(canvas canvas) { int mtxtwidth = gettextwidthblow(); int mtxtheight = gettextheight(); int x = getwidth() / 2 - mtxtwidth / 2; int y = getheight() / 2 + mtxtheight / 4 + 55; canvas.drawtext(getresources().getstring(r.string.defaulttextbelow), x, y, mpainttextlevel); }
4.加入动画效果
/** * 设置动画效果 */ public void start() { valueanimator valueanimator = valueanimator.ofint(0, 360); valueanimator.setduration(duration); valueanimator.setinterpolator(new linearinterpolator()); valueanimator.addupdatelistener(animation -> { process = (int) animation.getanimatedvalue(); invalidate(); }); valueanimator.start(); }
最终效果：
完整代码
package com.example.floatingwindow.widget; import android.animation.valueanimator; import android.content.context; import android.graphics.canvas; import android.graphics.dashpatheffect; import android.graphics.paint; import android.graphics.patheffect; import android.graphics.rectf; import android.util.attributeset; import android.util.typedvalue; import android.view.view; import android.view.animation.linearinterpolator; import androidx.annotation.nullable; import com.example.floatingwindow.r; public class dottedlineprogressbar extends view { private paint mpaint; private paint mpaintback; private paint mpainttext; private paint mpainttextlevel; private int strokewidth = 30; private int textsize = 22; private int textsizeblow = 15; private long duration = 3500; private int process; public dottedlineprogressbar(context context) { super(context); init(); } public dottedlineprogressbar(context context, @nullable attributeset attrs) { super(context, attrs); init(); } public dottedlineprogressbar(context context, @nullable attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); init(); } public void setstrokewidth(int width) { strokewidth = width; } public void settextsize(int textsize) { this.textsize = textsize; } public void setduration(long duration) { this.duration = duration; } public void settextsizeblow(int textsizeblow) { this.textsizeblow = textsizeblow; } //初始化画笔 private void init() { mpaintback = new paint();//圆角矩形 mpaintback.setcolor(getresources().getcolor(r.color.gray));//圆角矩形颜色 mpaintback.setantialias(true);// 抗锯齿效果 mpaintback.setstyle(paint.style.stroke);//设置画笔样式 mpaintback.setstrokewidth(strokewidth);//设置画笔宽度 mpaint = new paint(); mpaint.setcolor(getresources().getcolor(r.color.blue)); mpaint.setantialias(true); mpaint.setstyle(paint.style.stroke); mpaint.setstrokewidth(strokewidth); mpainttext = new paint(); mpainttext.setantialias(true); mpainttext.setstyle(paint.style.fill); mpainttext.setcolor(getresources().getcolor(r.color.blue)); mpainttext.settextsize(sp2px(textsize)); mpainttextlevel = new paint(); mpainttextlevel.setantialias(true); mpainttextlevel.setstyle(paint.style.fill); mpainttextlevel.setcolor(getresources().getcolor(r.color.gray)); mpainttextlevel.settextsize(sp2px(textsizeblow)); } @override protected void ondraw(canvas canvas) { super.ondraw(canvas); drawback(canvas); drawprogress(canvas); drawtext(canvas); drawtextblow(canvas); } private void drawback(canvas canvas) { rectf rectf = new rectf(strokewidth, strokewidth, getwidth() - strokewidth, getheight() - strokewidth); patheffect effects = new dashpatheffect(new float[]{8, 6}, 0); mpaintback.setpatheffect(effects); canvas.drawarc(rectf, 0, 360, false, mpaintback); } private void drawprogress(canvas canvas) { rectf rectf = new rectf(strokewidth, strokewidth, getwidth() - strokewidth, getheight() - strokewidth); patheffect effects = new dashpatheffect(new float[]{8, 6}, 0); mpaint.setpatheffect(effects); canvas.drawarc(rectf, 0, process, false, mpaint); } //绘制文字 private void drawtext(canvas canvas) { int mtxtwidth = gettextwidth(); int mtxtheight = gettextheight(); int x = getwidth() / 2 - mtxtwidth / 2; int y = getheight() / 2 + mtxtheight / 4; canvas.drawtext(getresources().getstring(r.string.defaulttextemui), x, y, mpainttext); } //绘制下方文字 private void drawtextblow(canvas canvas) { int mtxtwidth = gettextwidthblow(); int mtxtheight = gettextheight(); int x = getwidth() / 2 - mtxtwidth / 2; int y = getheight() / 2 + mtxtheight / 4 + 55; canvas.drawtext(getresources().getstring(r.string.defaulttextbelow), x, y, mpainttextlevel); } private int gettextwidth() { string text = getresources().getstring(r.string.defaulttextemui); return (int) mpainttext.measuretext(text, 0, text.length()); } private int gettextwidthblow() { string text = getresources().getstring(r.string.defaulttextbelow); return (int) mpainttextlevel.measuretext(text, 0, text.length()); } private int gettextheight() { paint.fontmetrics fm = mpainttext.getfontmetrics(); return (int) math.ceil(fm.descent - fm.ascent); } private int sp2px(int sp) { return (int) typedvalue.applydimension(typedvalue.complex_unit_sp, sp, getresources().getdisplaymetrics()); } /** * 设置动画效果 */ public void start() { valueanimator valueanimator = valueanimator.ofint(0, 360); valueanimator.setduration(duration); valueanimator.setinterpolator(new linearinterpolator()); valueanimator.addupdatelistener(animation -> { process = (int) animation.getanimatedvalue(); invalidate(); }); valueanimator.start(); } }
kotlin调用：
class mainactivity : appcompatactivity() { override fun oncreate(savedinstancestate: bundle?) { super.oncreate(savedinstancestate) setcontentview(r.layout.activity_main) dottedlineprogressbar.post { dottedlineprogressbar.start() } } }
xml:
<com.example.floatingwindow.widget.dottedlineprogressbar android:id="@+id/dottedlineprogressbar" android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center"> </com.example.floatingwindow.widget.dottedlineprogressbar>
以上就是完整的实现过程了。
项目源码：https://gitee.com/tu_erhongjiang/android-progress-bar
到此这篇关于android模拟实现华为系统升级进度条的文章就介绍到这了,更多相关android进度条内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/addevelopment/1037294.html