一、实现效果图
二、核心代码
自定义view的属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RingProgressBar">
<attr name="ringColor" format="color" />
<attr name="ringProgressColor" format="color" />
<attr name="ringWidth" format="dimension"></attr>
<attr name="textColor" format="color" />
<attr name="textSize" format="dimension" />
<attr name="max" format="integer"></attr>
<attr name="textIsDisplayable" format="boolean"></attr>
<attr name="style">
<enum name="STROKE" value="0"></enum>
<enum name="FILL" value="1"></enum>
</attr>
</declare-styleable>
</resources>
自定义view
package com.czhappy.ringprogressdemo.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import com.czhappy.ringprogressdemo.R;
/**
* Description:
* User: chenzheng
* Date: 2017/2/10 0010
* Time: 15:11
*/
public class RingProgressBar extends View {
/**
* 画笔对象的引用
*/
private Paint ringPaint;
private Paint ringProgressPaint;
private Paint txtPaint;
/**
* 圆环的颜色
*/
private int ringColor;
/**
* 圆环进度的颜色
*/
private int ringProgressColor;
/**
* 中间进度百分比的字符串的颜色
*/
private int textColor;
/**
* 中间进度百分比的字符串的字体
*/
private float textSize;
/**
* 圆环的宽度
*/
private float ringWidth;
/**
* 最大进度
*/
private int max;
/**
* 当前进度
*/
private int progress;
/**
* 是否显示中间的进度
*/
private boolean textIsDisplayable;
private Context mContext;
/**
* 进度的风格,实心或者空心
*/
private int style;
public static final int STROKE = 0;
public static final int FILL = 1;
public RingProgressBar(Context context) {
this(context, null);
}
public RingProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RingProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
// 获取自定义的属性
initAttrs(context, attrs);
initPaint();
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
R.styleable.RingProgressBar);
//获取自定义属性和默认值
ringColor = mTypedArray.getColor(R.styleable.RingProgressBar_ringColor, Color.GRAY);
ringProgressColor = mTypedArray.getColor(R.styleable.RingProgressBar_ringProgressColor, Color.GREEN);
textColor = mTypedArray.getColor(R.styleable.RingProgressBar_textColor, Color.GREEN);
textSize = mTypedArray.getDimension(R.styleable.RingProgressBar_textSize, 16);
ringWidth = mTypedArray.getDimension(R.styleable.RingProgressBar_ringWidth, 5);
max = mTypedArray.getInteger(R.styleable.RingProgressBar_max, 100);
textIsDisplayable = mTypedArray.getBoolean(R.styleable.RingProgressBar_textIsDisplayable, true);
style = mTypedArray.getInt(R.styleable.RingProgressBar_style, 0);
//资源回收
mTypedArray.recycle();
}
/**
* 初始化画笔
*/
private void initPaint() {
//圆环画笔
ringPaint = new Paint();
ringPaint.setColor(ringColor); //设置圆环的颜色
ringPaint.setStyle(Paint.Style.STROKE); //设置空心
ringPaint.setStrokeWidth(ringWidth); //设置圆环的宽度
ringPaint.setAntiAlias(true); //消除锯齿
//圆环进度画笔
ringProgressPaint = new Paint();
ringProgressPaint.setColor(ringProgressColor); //设置圆环的颜色
ringProgressPaint.setStrokeWidth(ringWidth); //设置圆环的宽度
ringProgressPaint.setAntiAlias(true); //消除锯齿
switch (style) {
case STROKE:
ringProgressPaint.setStyle(Paint.Style.STROKE);
break;
case FILL:
ringProgressPaint.setStyle(Paint.Style.FILL_AND_STROKE);
break;
}
//百分比文字画笔
txtPaint = new Paint();
txtPaint.setColor(textColor);
txtPaint.setTextSize(textSize);
txtPaint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//圆心坐标
int mXCenter = getWidth() / 2;
int mYCenter = getHeight() / 2;
int radius = (int) (mXCenter - ringWidth / 2); //圆环的半径
//绘制圆环
canvas.drawCircle(mXCenter, mYCenter, radius, ringPaint);
//绘制圆环进度
RectF oval = new RectF(mXCenter - radius, mYCenter - radius, mXCenter
+ radius, mYCenter + radius); //用于定义的圆弧的形状和大小的界限
switch (style) {
case STROKE:
canvas.drawArc(oval, -90, 360 * progress / max, false, ringProgressPaint); //根据进度画圆弧
break;
case FILL:
if (progress != 0)
canvas.drawArc(oval, -90, 360 * progress / max, true, ringProgressPaint); //根据进度画圆弧
break;
}
//绘制百分比数字
//文字绘制
String txt = progress + "%";
//文字的长度
float mTxtWidth = txtPaint.measureText(txt, 0, txt.length());
Log.e("tag", textIsDisplayable+","+progress+(style==STROKE));
if(textIsDisplayable && progress!=0 && style==STROKE){
canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter+textSize/2, txtPaint);
}
}
public synchronized int getMax() {
return max;
}
/**
* 设置进度的最大值
* @param max
*/
public synchronized void setMax(int max) {
if(max < 0){
throw new IllegalArgumentException("max not less than 0");
}
this.max = max;
}
/**
* 获取进度.需要同步
* @return
*/
public synchronized int getProgress() {
return progress;
}
/**
* 设置进度,此为线程安全控件,由于考虑多线程的问题,需要同步
* 刷新界面调用postInvalidate()能在非UI线程刷新
* @param progress
*/
public synchronized void setProgress(int progress) {
if(progress < 0){
throw new IllegalArgumentException("progress not less than 0");
}
if(progress > max){
progress = max;
}
if(progress <= max){
this.progress = progress;
postInvalidate();
}
}
public int getRingColor() {
return ringColor;
}
public void setRingColor(int ringColor) {
this.ringColor = ringColor;
}
public int getRingProgressColor() {
return ringProgressColor;
}
public void setRingProgressColor(int ringProgressColor) {
this.ringProgressColor = ringProgressColor;
}
public int getTextColor() {
return textColor;
}
public void setTextColor(int textColor) {
this.textColor = textColor;
}
public float getTextSize() {
return textSize;
}
public void setTextSize(float textSize) {
this.textSize = textSize;
}
public float getRingWidth() {
return ringWidth;
}
public void setRingWidth(float roundWidth) {
this.ringWidth = roundWidth;
}
}
MainActivity.java
package com.czhappy.ringprogressdemo.activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.czhappy.ringprogressdemo.R;
import com.czhappy.ringprogressdemo.view.RingProgressBar;
public class MainActivity extends AppCompatActivity {
private RingProgressBar myProgress;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myProgress = (RingProgressBar) findViewById(R.id.myProgress);
}
public void beginAnim(View view){
new Thread(){
@Override
public void run() {
super.run();
for(int i=0; i<=60; i++){
try {
Thread.sleep(20);
} catch (InterruptedException e) {
e.printStackTrace();
}
myProgress.setProgress(i);
}
}
}.start();
}
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ring="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:onClick="beginAnim"
android:layout_height="wrap_content"
android:text="开始动画"/>
<com.czhappy.ringprogressdemo.view.RingProgressBar
android:id="@+id/myProgress"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
ring:ringColor="@color/ring_color"
ring:ringProgressColor="@color/ring_progress_color"
ring:textColor="@color/ring_progress_color"
ring:textIsDisplayable="true"
ring:ringWidth="6dp"
ring:textSize="16sp"/>
</LinearLayout>