view仿华为圆形加载进度条效果图
实现思路
可以看出该view可分为三个部分来实现
最外围的圆，该部分需要区分进度圆和底部的刻度圆，进度部分的刻度需要和底色刻度区分开来
中间显示的文字进度，需要让文字在view中居中显示
旋转的小圆点，小圆点需要模拟小球下落运动时的加速度效果，开始下落的时候慢，到最底部时最快，上来时速度再逐渐减慢
具体实现
先具体细分讲解，博客最后面给出全部源码
（1）首先为view创建自定义的xml属性
在工程的values目录下新建attrs.xml文件
<resources> <!-- 仿华为圆形加载进度条 --> <declare-styleable name="circleloading"> <attr name="indexcolor" format="color"/> <attr name="basecolor" format="color"/> <attr name="dotcolor" format="color"/> <attr name="textsize" format="dimension"/> <attr name="textcolor" format="color"/> </declare-styleable> </resources>
各个属性的作用：
indexcolor：进度圆的颜色
basecolor：刻度圆底色
dotcolor：小圆点颜色
textsize：文字大小
textcolor：文字颜色
（2）新建circleloadingview类继承view类，重写它的三个构造方法，获取用户设置的属性，同时指定默认值
我要评论
public circleloadingview(context context) {
this(context, null);
}
public circleloadingview(context context, attributeset attrs) {
this(context, attrs, 0);
}
public circleloadingview(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
// 获取用户配置属性
typedarray tya = context.obtainstyledattributes(attrs, r.styleable.circleloading);
basecolor = tya.getcolor(r.styleable.circleloading_basecolor, color.ltgray);
indexcolor = tya.getcolor(r.styleable.circleloading_indexcolor, color.blue);
textcolor = tya.getcolor(r.styleable.circleloading_textcolor, color.blue);
dotcolor = tya.getcolor(r.styleable.circleloading_dotcolor, color.red);
textsize = tya.getdimensionpixelsize(r.styleable.circleloading_textsize, 36);
tya.recycle();
initui();
}
我们从view绘制的第一步开始
（3）测量onmeasure，首先需要测量出view的宽和高，并指定view在wrap_content时的最小范围，对于view绘制流程还不熟悉的同学，可以先去了解下具体的绘制流程
浅谈android view绘制三大流程探索及常见问题
重写onmeasure方法，其中我们要考虑当view的宽高被指定为wrap_content时的情况，如果我们不对wrap_content的情况进行处理，那么当使用者指定view的宽高为wrap_content时将无法正常显示出view
@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
super.onmeasure(widthmeasurespec, heightmeasurespec);
int mywidthspecmode = measurespec.getmode(widthmeasurespec);
int mywidthspecsize = measurespec.getsize(widthmeasurespec);
int myheightspecmode = measurespec.getmode(heightmeasurespec);
int myheightspecsize = measurespec.getsize(heightmeasurespec);
// 获取宽
if (mywidthspecmode == measurespec.exactly) {
// match_parent/精确值
mwidth = mywidthspecsize;
} else {
// wrap_content
mwidth = densityutil.dip2px(mcontext, 120);
}
// 获取高
if (myheightspecmode == measurespec.exactly) {
// match_parent/精确值
mheight = myheightspecsize;
} else {
// wrap_content
mheight = densityutil.dip2px(mcontext, 120);
}
// 设置该view的宽高
setmeasureddimension(mwidth, mheight);
}
measurespec的状态分为三种exactly、at_most、unspecified，这里只要单独指定非精确值exactly之外的情况就好了。
本文中使用到的densityutil类，是为了将dp转换为px来使用，以便适配不同的屏幕显示效果
public static int dip2px(context context, float dpvalue) {
final float scale = context.getresources().getdisplaymetrics().density;
return (int) (dpvalue * scale + 0.5f);
}
（4）重写ondraw，绘制需要显示的内容
因为做的是单纯的view而不是viewgroup，内部没有子控件需要确定位置，所以可直接跳过onlayout方法，直接开始对view进行绘制
分为三个部分绘制，绘制刻度圆，绘制文字值，绘制旋转小圆点
@override
protected void ondraw(canvas canvas) {
drawarcscale(canvas);
drawtextvalue(canvas);
drawrotatedot(canvas);
}
绘制刻度圆
先画一个小竖线，通过canvas.rotate()方法每次旋转3.6度（总共360度，用100/360=3.6）得到一个刻度为100的圆，然后通过progress参数，得到要显示的进度数，并把小于progress的刻度变成进度圆的颜色
/**
* 画刻度
*/
private void drawarcscale(canvas canvas) {
canvas.save();
for (int i = 0; i < 100; i++) {
if (progress > i) {
mscalepaint.setcolor(indexcolor);
} else {
mscalepaint.setcolor(basecolor);
}
canvas.drawline(mwidth / 2, 0, mheight / 2, densityutil.dip2px(mcontext, 10), mscalepaint);
// 旋转的度数 = 100 / 360
canvas.rotate(3.6f, mwidth / 2, mheight / 2);
}
canvas.restore();
}
绘制中间文字
文字绘制的坐标是以文字的左下角开始绘制的，所以需要先通过把文字装载到一个矩形rect，通过画笔的gettextbounds方法取得字符串的长度和宽度，通过动态计算，来使文字居中显示
/**
* 画内部数值
*/
private void drawtextvalue(canvas canvas) {
canvas.save();
string showvalue = string.valueof(progress);
rect textbound = new rect();
mtextpaint.gettextbounds(showvalue, 0, showvalue.length(), textbound); // 获取文字的矩形范围
float textwidth = textbound.right - textbound.left; // 获得文字宽
float textheight = textbound.bottom - textbound.top; // 获得文字高
canvas.drawtext(showvalue, mwidth / 2 - textwidth / 2, mheight / 2 + textheight / 2, mtextpaint);
canvas.restore();
}
绘制旋转小圆点
这个小圆点就是简单的绘制一个填充的圆形就好
/**
* 画旋转小圆点
*/
private void drawrotatedot(final canvas canvas) {
canvas.save();
canvas.rotate(mdotprogress * 3.6f, mwidth / 2, mheight / 2);
canvas.drawcircle(mwidth / 2, densityutil.dip2px(mcontext, 10) + densityutil.dip2px(mcontext, 5), densityutil.dip2px(mcontext, 3), mdotpaint);
canvas.restore();
}
让它自己动起来可以通过两种方式，一种是开一个线程，在线程中改变mdotprogress的数值，并通过postinvalidate方法跨线程刷新view的显示效果
new thread() {
@override
public void run() {
while (true) {
mdotprogress++;
if (mdotprogress == 100) {
mdotprogress = 0;
}
postinvalidate();
try {
thread.sleep(50);
} catch (interruptedexception e) {
e.printstacktrace();
}
}
}
}.start();
开线程的方式不推荐使用，这是没必要的开销，而且线程不好控制，要实现让小圆点在运行过程中开始和结束时慢，运动到中间时加快这种效果不好实现，所以最好的方式是使用属性动画，需要让小圆点动起来时，调用以下方法就好了
/**
* 启动小圆点旋转动画
*/
public void startdotanimator() {
animator = valueanimator.offloat(0, 100);
animator.setduration(1500);
animator.setrepeatcount(valueanimator.infinite);
animator.setrepeatmode(valueanimator.restart);
animator.setinterpolator(new acceleratedecelerateinterpolator());
animator.addupdatelistener(new valueanimator.animatorupdatelistener() {
@override
public void onanimationupdate(valueanimator animation) {
// 设置小圆点的进度，并通知界面重绘
mdotprogress = (float) animation.getanimatedvalue();
invalidate();
}
});
animator.start();
}
在属性动画中可以通过setinterpolator方法指定不同的插值器，这里要模拟小球掉下来的重力效果，所以需要使用acceleratedecelerateinterpolator插值类，该类的效果就是在动画开始时和结束时变慢，中间加快
（5）设置当前进度值
对外提供一个方法，用来更新当前圆的进度
/**
* 设置进度
*/
public void setprogress(int progress) {
this.progress = progress;
invalidate();
}
通过外部调用setprogress方法就可以跟更新当前圆的进度了
源码
/**
* 仿华为圆形加载进度条
* created by zhuwentao on 2017-08-19.
*/
public class circleloadingview extends view {
private context mcontext;
// 刻度画笔
private paint mscalepaint;
// 小原点画笔
private paint mdotpaint;
// 文字画笔
private paint mtextpaint;
// 当前进度
private int progress = 0;
/**
* 小圆点的当前进度
*/
public float mdotprogress;
// view宽
private int mwidth;
// view高
private int mheight;
private int indexcolor;
private int basecolor;
private int dotcolor;
private int textsize;
private int textcolor;
private valueanimator animator;
public circleloadingview(context context) {
this(context, null);
}
public circleloadingview(context context, attributeset attrs) {
this(context, attrs, 0);
}
public circleloadingview(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
// 获取用户配置属性
typedarray tya = context.obtainstyledattributes(attrs, r.styleable.circleloading);
basecolor = tya.getcolor(r.styleable.circleloading_basecolor, color.ltgray);
indexcolor = tya.getcolor(r.styleable.circleloading_indexcolor, color.blue);
textcolor = tya.getcolor(r.styleable.circleloading_textcolor, color.blue);
dotcolor = tya.getcolor(r.styleable.circleloading_dotcolor, color.red);
textsize = tya.getdimensionpixelsize(r.styleable.circleloading_textsize, 36);
tya.recycle();
initui();
}
private void initui() {
mcontext = getcontext();
// 刻度画笔
mscalepaint = new paint();
mscalepaint.setantialias(true);
mscalepaint.setstrokewidth(densityutil.dip2px(mcontext, 1));
mscalepaint.setstrokecap(paint.cap.round);
mscalepaint.setcolor(basecolor);
mscalepaint.setstyle(paint.style.stroke);
// 小圆点画笔
mdotpaint = new paint();
mdotpaint.setantialias(true);
mdotpaint.setcolor(dotcolor);
mdotpaint.setstrokewidth(densityutil.dip2px(mcontext, 1));
mdotpaint.setstyle(paint.style.fill);
// 文字画笔
mtextpaint = new paint();
mtextpaint.setantialias(true);
mtextpaint.setcolor(textcolor);
mtextpaint.settextsize(textsize);
mtextpaint.setstrokewidth(densityutil.dip2px(mcontext, 1));
mtextpaint.setstyle(paint.style.fill);
}
@override
protected void ondraw(canvas canvas) {
drawarcscale(canvas);
drawtextvalue(canvas);
drawrotatedot(canvas);
}
/**
* 画刻度
*/
private void drawarcscale(canvas canvas) {
canvas.save();
for (int i = 0; i < 100; i++) {
if (progress > i) {
mscalepaint.setcolor(indexcolor);
} else {
mscalepaint.setcolor(basecolor);
}
canvas.drawline(mwidth / 2, 0, mheight / 2, densityutil.dip2px(mcontext, 10), mscalepaint);
// 旋转的度数 = 100 / 360
canvas.rotate(3.6f, mwidth / 2, mheight / 2);
}
canvas.restore();
}
/**
* 画内部数值
*/
private void drawtextvalue(canvas canvas) {
canvas.save();
string showvalue = string.valueof(progress);
rect textbound = new rect();
mtextpaint.gettextbounds(showvalue, 0, showvalue.length(), textbound); // 获取文字的矩形范围
float textwidth = textbound.right - textbound.left; // 获得文字宽
float textheight = textbound.bottom - textbound.top; // 获得文字高
canvas.drawtext(showvalue, mwidth / 2 - textwidth / 2, mheight / 2 + textheight / 2, mtextpaint);
canvas.restore();
}
/**
* 画旋转小圆点
*/
private void drawrotatedot(final canvas canvas) {
canvas.save();
canvas.rotate(mdotprogress * 3.6f, mwidth / 2, mheight / 2);
canvas.drawcircle(mwidth / 2, densityutil.dip2px(mcontext, 10) + densityutil.dip2px(mcontext, 5), densityutil.dip2px(mcontext, 3), mdotpaint);
canvas.restore();
}
/**
* 启动小圆点旋转动画
*/
public void startdotanimator() {
animator = valueanimator.offloat(0, 100);
animator.setduration(1500);
animator.setrepeatcount(valueanimator.infinite);
animator.setrepeatmode(valueanimator.restart);
animator.setinterpolator(new acceleratedecelerateinterpolator());
animator.addupdatelistener(new valueanimator.animatorupdatelistener() {
@override
public void onanimationupdate(valueanimator animation) {
// 设置小圆点的进度，并通知界面重绘
mdotprogress = (float) animation.getanimatedvalue();
invalidate();
}
});
animator.start();
}
/**
* 设置进度
*/
public void setprogress(int progress) {
this.progress = progress;
invalidate();
}
@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
super.onmeasure(widthmeasurespec, heightmeasurespec);
int mywidthspecmode = measurespec.getmode(widthmeasurespec);
int mywidthspecsize = measurespec.getsize(widthmeasurespec);
int myheightspecmode = measurespec.getmode(heightmeasurespec);
int myheightspecsize = measurespec.getsize(heightmeasurespec);
// 获取宽
if (mywidthspecmode == measurespec.exactly) {
// match_parent/精确值
mwidth = mywidthspecsize;
} else {
// wrap_content
mwidth = densityutil.dip2px(mcontext, 120);
}
// 获取高
if (myheightspecmode == measurespec.exactly) {
// match_parent/精确值
mheight = myheightspecsize;
} else {
// wrap_content
mheight = densityutil.dip2px(mcontext, 120);
}
// 设置该view的宽高
setmeasureddimension(mwidth, mheight);
}
}
总结
在的ondraw方法中需要避免频繁的new对象，所以把一些如初始化画笔paint的方法放到了最前面的构造方法中进行。
在分多个模块绘制时，应该使用canvas.save()和canvas.restore()的组合，来避免不同模块绘制时的相互干扰，在这两个方法中绘制相当于ps中的图层概念，上一个图层进行的修改不会影响到下一个图层的显示效果。
在需要显示动画效果的地方使用属性动画来处理，可自定义的效果强，在系统提供的插值器类不够用的情况下，我么还可通过继承animation类，重写它的applytransformation方法来处理各种复杂的动画效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）
网友评论