分享一个环形进度条供大家参考，项目地址

效果如图

image

下面是该自定义进度条的代码，目前属于简陋版本，不过注释很详细，方便扩展。

首先是自定View的代码

/**

* 作者：GJP on 2018/7/26 15:12

* 邮箱：xiaoxiao9575@126.com

* 描述：

*/

public class CircularProgressView extends View {

private Context mContext;

private Paint mPaint;

private int mProgress = 0;

private static int MAX_PROGRESS = 100;

/** * 弧度 */

private int mAngle;

/** * 中间的文字 */

private String mText;

/** * 外圆颜色 */

private int outRoundColor;

/** * 内圆的颜色 */

private int inRoundColor;

/** * 线的宽度 */

private int roundWidth;

private int style;

/*** 字体颜色*/

private int textColor;

/** * 字体大小 */

private float textSize;

/** * 字体是否加粗 */

private boolean isBold;

/** * 进度条颜色 */

private int progressBarColor;

public CircularProgressView(Context context) {

this(context, null);

}

public CircularProgressView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public CircularProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);

mContext = context;

init(attrs);

}

@TargetApi(21)

public CircularProgressView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {

super(context, attrs, defStyleAttr, defStyleRes);

mContext = context;

init(attrs);

}

/**

* 解析自定义属性

* @param attrs

*/

public void init(AttributeSet attrs) {

mPaint = new Paint();

TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);

outRoundColor = typedArray.getColor(R.styleable.CircleProgressBar_outCircleColor, getResources().getColor(R.color.colorPrimary));

inRoundColor = typedArray.getColor(R.styleable.CircleProgressBar_inCircleColor, getResources().getColor(R.color.colorPrimaryDark));

progressBarColor = typedArray.getColor(R.styleable.CircleProgressBar_progressColor, getResources().getColor(R.color.colorAccent));

isBold = typedArray.getBoolean(R.styleable.CircleProgressBar_textBold, false);

textColor = typedArray.getColor(R.styleable.CircleProgressBar_textColor, Color.BLACK);

roundWidth = typedArray.getDimensionPixelOffset(R.styleable.CircleProgressBar_lineWidth, 20);

typedArray.recycle();

}

@Override

protected void onDraw(Canvas canvas) { /** * 画外圆 */

super.onDraw(canvas);

int center = getWidth() / 2;//圆心

int radius = (center - roundWidth / 2);// 半径

mPaint.setColor(outRoundColor); //外圆颜色

mPaint.setStrokeWidth(roundWidth); //线的宽度

mPaint.setStyle(Paint.Style.STROKE); //空心圆

mPaint.setAntiAlias(true); //消除锯齿

canvas.drawCircle(center, center, radius, mPaint); //内圆

mPaint.setColor(inRoundColor);

radius = radius - roundWidth;

canvas.drawCircle(center, center, radius, mPaint); //画进度是一个弧线

mPaint.setColor(progressBarColor);

RectF rectF = new RectF(center - radius, center - radius, center + radius, center + radius);//圆弧范围的外接矩形

canvas.drawArc(rectF, -90, mAngle, false, mPaint);

canvas.save(); //平移画布之前保存之前画的

// 画进度终点的小球,旋转画布的方式实现

mPaint.setStyle(Paint.Style.FILL);

// 将画布坐标原点移动至圆心

canvas.translate(center, center);

// 旋转和进度相同的角度,因为进度是从-90度开始的所以-90度

canvas.rotate(mAngle - 90);

// 同理从圆心出发直接将原点平移至要画小球的位置

canvas.translate(radius, 0);

canvas.drawCircle(0, 0, roundWidth, mPaint);

// 画完之后恢复画布坐标

canvas.restore();

// 画文字将坐标平移至圆心

canvas.translate(center, center);

mPaint.setStrokeWidth(0);

mPaint.setColor(textColor);

if (isBold) { //字体加粗

mPaint.setTypeface(Typeface.DEFAULT_BOLD);

} if (!TextUtils.isEmpty(mText)) {

// 动态设置文字长为圆半径,计算字体大小

float textLength = mText.length();

textSize = radius / textLength;

mPaint.setTextSize(textSize);

// 将文字画到中间

float textWidth = mPaint.measureText(mText);

canvas.drawText(mText, -textWidth / 2, textSize / 2, mPaint);

}

}

public int getProgress() {

return mProgress;

}

/**

* 设置进度

* @return

*/

public void setProgress(int p) {

if (p > MAX_PROGRESS) {

mProgress = MAX_PROGRESS;

mAngle = 360;

} else {

mProgress = p;

mAngle = 360 * p / MAX_PROGRESS;

}

//更新画布

invalidate();

}

public String getText() {

return mText;

}

/**

* 设置文本

* @param mText

*/

public void setText(String mText) {

this.mText = mText;

invalidate();

}

}

styles.xml中需要添加

再布局文件中引用的示例代码

android:id="@+id/progress_bar"

android:layout_centerInParent="true"

android:layout_centerHorizontal="true"

android:layout_width="150dp"

android:layout_height="150dp"

app:inCircleColor="#DCDCDC"

app:outCircleColor="#F0F0F0"

app:progressColor="#50CE7B"

app:textBold="true"

app:textColor="#50CE7B"

app:lineWidth="5dp" />

Activity中具体控制进度

public class MainActivity extends AppCompatActivity {

private CircularProgressView progress_bar;

@SuppressLint("HandlerLeak")

private Handler handler = new Handler(){

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

progress_bar.setProgress(msg.what);

progress_bar.setText(progress_bar.getProgress()+"%");

addProgress(msg.what);

}

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

}

private void initView() {

progress_bar = (CircularProgressView) findViewById(R.id.progress_bar);

progress_bar.setProgress(0);

progress_bar.setText(progress_bar.getProgress()+"%");

addProgress(0);

}

private void addProgress(int i) {

if (i>=100){

i = 0;

}else {

++i;

}

handler.sendEmptyMessageDelayed(i, 100);

}

}

关于这个自定义的环形进度条没什么说的，代码注释很详细，使用方法都粘贴出来了，因为扩展起来很方便所以粘贴出来供大家参考和自己留作记录，如果有时间后续会发一个完善些的圆形进度条到GitHub上。