今天无意中发现一个圆形进度，想想自己实现一个，如下图：
基本思路是这样的：
1.首先绘制一个实心圆
2.绘制一个白色实心的正方形，遮住实心圆
3.在圆的中心动态绘制当前进度的百分比字符
4.绘制一个与之前实心圆相同颜色的空心圆
5.逐渐改变当前的百分比
6.根据百分比，逐渐改变正方形的大小，逐渐减小正方形的底部y轴的坐标，不断重绘，直到达到100%
首先看看自定义的属性
在values目录下新建attrs.xml内容如下：
定义绘制圆形的背景色，和绘制圆形的半径大小
<?xml version="1.0" encoding="utf-8"?><resources> <attr name="circlecolor" format="color"></attr> <attr name="half" format="dimension"></attr> <declare-styleable name="myCircleImage"> <attr name="circlecolor"></attr> <attr name="half"></attr> </declare-styleable></resources>
自定义视图
import android.annotation.SuppressLint;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.text.TextPaint;import android.util.AttributeSet;import android.util.Log;import android.view.View;public class CirclePro extends View { private Paint paint; private int circleBack;//圆的背景色
private int mschedual = 0;//用于控制动态变化
float circleHalf; //圆的半径
String percent = "";//绘制百分比的字符串
@SuppressLint("Recycle") public CirclePro(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);
paint = new Paint();
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.myCircleImage, defStyleAttr,0); @SuppressWarnings("unused") int leng = array.length(); //获取自定义的属性，这里注意是R.styleable.myCircleImage_circlecolor而不是R.attr.circlecolor
circleBack = array.getColor(R.styleable.myCircleImage_circlecolor,Color.GREEN);
circleHalf = array.getDimension(R.styleable.myCircleImage_half,200.f);
System.out.println(circleBack);
} /**
* 这个构造参数，当在布局文件中引用该view的时候，必须重写该构造函数
* @param context
* @param attrs
*/
public CirclePro(Context context, AttributeSet attrs) { this(context, attrs, 0);//调用自己的构造函数
} /**
* 根据文本的
* @param text
* @param textSize
* @return
*/
public float getTextWidth(String text,float textSize) {
TextPaint textPaint = new TextPaint();
textPaint.setTextSize(textSize); return textPaint.measureText(text);
} @Override
protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub
super.onDraw(canvas); float height = getHeight(); float width = getWidth();// float circleHalf = (float) (width*0.7/2);
paint.setColor(circleBack);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(width/2,height/2,circleHalf, paint);//画实心圆
if (mschedual <= 100) {//，如果当前进度小于100，画实心矩形
paint.setColor(Color.WHITE);
canvas.drawRect(width/2-circleHalf,height/2-circleHalf,width/2+circleHalf,height/2+circleHalf - mschedual*circleHalf/50, paint);
} //画当前进度的字符串
paint.setColor(Color.BLACK);
paint.setTextSize(30.f);
percent = mschedual+" %";
canvas.drawText(percent, width/2-getTextWidth(percent,30)/2,height/2+paint.getTextSize()*3/8, paint);//字体的高度=paint.getTextSize()*3/4
//画空心圆
paint.setColor(circleBack);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(width/2,height/2,circleHalf, paint); if (mschedual < 100) {//更改当前进度值，并重绘
mschedual++;
invalidate();
}
}
}在activity_main.xml中，需要用到自定义的属性，首先添加命名空间： xmlns:liu=”http://schemas.android.com/apk/res/com.example.androidcirclepro”
其中liu是自定义的一个前缀，随意命名的，com.example.androidcirclepro是我们的应用的包名
activity_main.xmln内容如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:liu="http://schemas.android.com/apk/res/com.example.androidcirclepro" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.example.androidcirclepro.CirclePro android:layout_width="match_parent" android:layout_height="match_parent" liu:half="90dp" liu:circlecolor="#fff0f0" /></RelativeLayout>
至此一个自定义的圆形进度条就完成了，是不是很简单。源码下载
原文链接：http://www.codeceo.com/article/android-circle-prograssbar.html
随时随地看视频
