效果图
public class CirclePercentBar extends View {
private Context mContext;
private int mArcColor;
private int mArcWidth;
private int mCenterTextColor;
private int mCenterTextSize;
private int mCircleRadius;
private Paint arcPaint;
private Paint arcCirclePaint;
private Paint centerTextPaint;
private RectF arcRectF;
private Rect textBoundRect;
private int mCurData=0;
private int arcStartColor;
private int arcEndColor;
private Paint startCirclePaint;
public CirclePercentBar(Context context) {
this(context, null);
}
public CirclePercentBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CirclePercentBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext=context;
//color_FFEBEEF5
TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.CirclePercentBar,defStyleAttr,0);
mArcColor = typedArray.getColor(R.styleable.CirclePercentBar_arcColor,0xff0000);
mArcWidth = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_arcWidth, DisplayUtil.dp2px(context, 20));
mCenterTextColor = typedArray.getColor(R.styleable.CirclePercentBar_centerTextColor, 0x0000ff);
mCenterTextSize = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_centerTextSize, DisplayUtil.dp2px(context, 20));
mCircleRadius = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_circleRadius, DisplayUtil.dp2px(context, 100));
arcStartColor = typedArray.getColor(R.styleable.CirclePercentBar_arcStartColor,
ContextCompat.getColor(mContext, R.color.color_FFF9612D));
arcEndColor = typedArray.getColor(R.styleable.CirclePercentBar_arcEndColor,
ContextCompat.getColor(mContext, R.color.color_FF58C89E));
typedArray.recycle();
initPaint();
}
private void initPaint() {
startCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
startCirclePaint.setStyle(Paint.Style.FILL);
//startCirclePaint.setStrokeWidth(mArcWidth);
startCirclePaint.setColor(arcStartColor);
arcCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
arcCirclePaint.setStyle(Paint.Style.STROKE);
arcCirclePaint.setStrokeWidth(mArcWidth);
//底部默认的圆环色 color_FFF96857 color_FFEBEEF5
arcCirclePaint.setColor(ContextCompat.getColor(mContext,R.color.color_FFF96857));
arcCirclePaint.setStrokeCap(Paint.Cap.ROUND);
arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
arcPaint.setStyle(Paint.Style.STROKE);
arcPaint.setStrokeWidth(mArcWidth);
arcPaint.setColor(mArcColor);
arcPaint.setStrokeCap(Paint.Cap.ROUND);
centerTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
centerTextPaint.setStyle(Paint.Style.STROKE);
centerTextPaint.setColor(mCenterTextColor);
centerTextPaint.setTextSize(mCenterTextSize);
//圓弧的外接矩形
arcRectF = new RectF();
//文字的边界矩形
textBoundRect = new Rect();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(measureDimension(widthMeasureSpec),measureDimension(heightMeasureSpec));
}
private int measureDimension(int measureSpec) {
int result;
int specMode=MeasureSpec.getMode(measureSpec);
int specSize=MeasureSpec.getSize(measureSpec);
if(specMode==MeasureSpec.EXACTLY){
result=specSize;
}else{
result=mCircleRadius*2;
if(specMode==MeasureSpec.AT_MOST){
result=Math.min(result,specSize);
}
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
canvas.rotate(-90, getWidth()/ 2, getHeight()/ 2);
arcRectF.set(getWidth()/2-mCircleRadius+mArcWidth/2,getHeight()/2-mCircleRadius+mArcWidth/2
,getWidth()/2+mCircleRadius-mArcWidth/2,getHeight()/2+mCircleRadius-mArcWidth/2);
canvas.drawArc(arcRectF, 0,360,false,arcCirclePaint);
arcPaint.setShader(new SweepGradient(getWidth()/2,getHeight()/2,arcStartColor,arcEndColor));
canvas.drawArc(arcRectF, 0,360* mCurData /100,false,arcPaint);
canvas.rotate(90, getWidth()/ 2, getHeight()/ 2);
canvas.drawCircle(getWidth()/2,getHeight()/2-mCircleRadius+mArcWidth/2,mArcWidth/2,startCirclePaint);
String data= String.valueOf(mCurData) +"%";
centerTextPaint.getTextBounds(data,0,data.length(),textBoundRect);
canvas.drawText(data,getWidth()/2-textBoundRect.width()/2,getHeight()/2+textBoundRect.height()/2,centerTextPaint);
}
public void setPercentData(int data, TimeInterpolator interpolator){
ValueAnimator valueAnimator=ValueAnimator.ofInt(mCurData,data);
valueAnimator.setDuration((long) (Math.abs(mCurData-data)*30));
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int value= (int) valueAnimator.getAnimatedValue();
mCurData=(int) (Math.round(value*10))/10;
invalidate();
}
});
valueAnimator.setInterpolator(interpolator);
valueAnimator.start();
}
}
attrs中
<resources>
<declare-styleable name="CirclePercentBar">
<attr name="arcColor" format="color"/>
<attr name="arcWidth" format="dimension"/>
<attr name="centerTextColor" format="color"/>
<attr name="centerTextSize" format="dimension"/>
<attr name="circleRadius" format="dimension"/>
<attr name="arcStartColor" format="color"/>
<attr name="arcEndColor" format="color"/>
</declare-styleable>
</resources>
布局引用,设置颜色
<com.example.javaexo.circ.CirclePercentBar
android:id="@+id/cir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_gravity="center_horizontal"
app:arcWidth="30dp"
app:circleRadius="100dp"
app:centerTextSize="30sp"
app:arcColor="@color/colorPrimary"
app:centerTextColor="@color/colorAccent"
app:arcStartColor="@android:color/holo_green_light"/>
主布局
Button btn = findViewById(R.id.start_btn);
CirclePercentBar cir = findViewById(R.id.cir);
cir.setPercentData(55,new DecelerateInterpolator());
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cir.setPercentData((int) (100*Math.random()),new DecelerateInterpolator());
}
});
链接:添加链接描述