android自定义view制作圆形进度条效果
程序员文章站
2024-02-20 10:54:41
还是我们自定view的那几个步骤:
1、自定义view的属性
2、在view的构造方法中获得我们自定义的属性
[ 3、重写onmesure ]
4、重写ondraw...
还是我们自定view的那几个步骤:
1、自定义view的属性
2、在view的构造方法中获得我们自定义的属性
[ 3、重写onmesure ]
4、重写ondraw
1、自定义属性:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="customtitleview"> <attr name="mspeed" format="integer" /> <attr name="mfirstcolor" format="color" /> <attr name="msecondcolor" format="color" /> <attr name="mcirclewidth" format="dimension"/> <attr name="textsize" format="dimension"/> </declare-styleable> </resources>
2、在view的构造方法中获得我们自定义的属性
/** * 当前进度 */ private int mprogress; /** * 第一圈的颜色 */ private int mfirstcolor; /** * 第二圈的颜色 */ private int msecondcolor; /** * 圈的宽度 */ private int mcirclewidth; /** * 速度 */ private int mspeed; /** * 中间进度百分比的字符串的字体 */ private float textsize; private boolean isnext = false; private paint mpaint; public customtitleview(context context, attributeset attrs) { super(context, attrs); typedarray typearray = context.obtainstyledattributes(attrs, r.styleable.customtitleview); int count= typearray.getindexcount(); for(int i=0;i<count;i++){ int attr =typearray.getindex(i); switch(attr){ case r.styleable.customtitleview_mfirstcolor: mfirstcolor=typearray.getcolor(attr,color.black); break; case r.styleable.customtitleview_msecondcolor: msecondcolor=typearray.getcolor(attr,color.red); break; case r.styleable.customtitleview_mcirclewidth: mcirclewidth = typearray.getdimensionpixelsize(attr,(int)typedvalue.applydimension( typedvalue.complex_unit_px,20,getresources().getdisplaymetrics())); break; case r.styleable.customtitleview_textsize: textsize = typearray.getdimensionpixelsize(attr,(int)typedvalue.applydimension( typedvalue.complex_unit_px,30,getresources().getdisplaymetrics())); break; case r.styleable.customtitleview_mspeed: mspeed = typearray.getint(attr,100);// 默认100 break; } } log.v("----",mspeed+""); typearray.recycle(); mpaint = new paint(); new thread() { public void run() { while (true) { mprogress++; if (mprogress == 360) { mprogress = 0; if (!isnext) isnext = true; else isnext = false; } postinvalidate(); try { thread.sleep(mspeed); } catch (interruptedexception e) { e.printstacktrace(); } } }; }.start(); }
3、直接重写ondraw,这不需要重写onmeasure
protected void onmeasure(int widthmeasurespec, int heightmeasurespec){ super.onmeasure(widthmeasurespec, heightmeasurespec); } protected void ondraw(canvas canvas) { /** * 画进度百分比 */ mpaint.setstrokewidth(0); mpaint.setcolor(color.black); mpaint.settextsize(textsize); mpaint.settypeface(typeface.default_bold); //设置字体 int percent = (int)(((float)mprogress / (float)360) * 100); int centre = getwidth() / 2; // 获取圆心的x坐标 int radius = centre - mcirclewidth / 2;// 半径 float textwidth = mpaint.measuretext(percent + "%"); //测量字体宽度,我们需要根据字体的宽度设置在圆环中间 canvas.drawtext(percent + "%",centre-textwidth/ 2,centre+textsize/2, mpaint); //画出进度百分比 mpaint.setstrokewidth(mcirclewidth); // 设置圆环的宽度 mpaint.setantialias(true); // 消除锯齿 mpaint.setstyle(paint.style.stroke); // 设置空心 rectf oval = new rectf(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限 if(isnext){ mpaint.setcolor(msecondcolor); // 设置圆环的颜色 canvas.drawcircle(centre, centre, radius, mpaint); // 画出圆环 mpaint.setcolor(mfirstcolor); // 设置圆环的颜色 canvas.drawarc(oval, -90, mprogress, false, mpaint); // 根据进度画圆弧 }else{ mpaint.setcolor(mfirstcolor); // 设置圆环的颜色 canvas.drawcircle(centre, centre, radius, mpaint); // 画出圆环 mpaint.setcolor(msecondcolor); // 设置圆环的颜色 canvas.drawarc(oval, -90, mprogress, false, mpaint); // 根据进度画圆弧 } }
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="20dp" > <view.customtitleview android:layout_width="200dp" android:layout_height="400dp" custom:mspeed="50" custom:mfirstcolor="#7300e6" custom:msecondcolor="#39ac39" custom:mcirclewidth="10px" custom:textsize="20px" android:id="@+id/one" /> <view.customtitleview android:layout_toendof="@id/one" android:layout_width="200dp" android:layout_height="400dp" custom:mspeed="100" custom:mfirstcolor="#0040ff" custom:msecondcolor="#40ff00" custom:mcirclewidth="20px" custom:textsize="30px" /> </relativelayout>
效果预览
源码下载:http://xiazai.jb51.net/201701/yuanma/androidprogressbar(jb51.net).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。