自定义圆形进度条CricleProgressBar
2017-06-21 本文已影响103人
Owen270
1.自定义CircleProgressBar，继承View，并实现响应的构造函数
package client.itbt.yt.cn.customview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by shuij on 2017/5/31 0031.
*/
public class CircleProgressBar extends View {
/***
* 圆环颜色
*/
private int roundColor;
/****
* 圆环进度颜色
*/
private int roundProgressColor;
/***
* 圆环的宽度
*/
private float roundWidth;
/***
*中间字体大小
*/
private float textSize;
/***
*中间字体颜色
*/
private int textColor;
/***
*最大进度
*/
private int max;
/***
*是否中间允许文字绘制
*/
private boolean textIsDisplayable;
/***
*绘制风格
*/
private int style;
private final int STROKE=0;//空心
private final int FILL=1;//实心
/***
* 绘制內圆
*/
private Paint mInnerPaint;
/***
* 绘制文字画笔
*/
private Paint mTextPaint;
/****
* 绘制圆狐的画笔
*/
private Paint mProgressPaint;
/***
* 当前进度
*/
private int progress=0;
private String destine_time;
public CircleProgressBar(Context context) {
this(context,null);
}
public CircleProgressBar(Context context, AttributeSet attrs) {
this(context,attrs,0);//一定不能 this(context,null,0),否则包空异常
}
public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray mTypeArrayArray=context.obtainStyledAttributes(attrs,R.styleable.CircleProgressBar);
roundColor=mTypeArrayArray.getColor(R.styleable.CircleProgressBar_roundColor,getResources().getColor(R.color.borrow_bar_0));
roundProgressColor=mTypeArrayArray.getColor(R.styleable.CircleProgressBar_roundProgressColor,getResources().getColor(R.color.borrow_bar_0));
textColor=mTypeArrayArray.getColor(R.styleable.CircleProgressBar_textColor,getResources().getColor(R.color.borrow_bar_min));
roundWidth=mTypeArrayArray.getDimension(R.styleable.CircleProgressBar_roundWidth,3);
textSize=mTypeArrayArray.getDimension(R.styleable.CircleProgressBar_textSize,30);
max=mTypeArrayArray.getColor(R.styleable.CircleProgressBar_max,100);
textIsDisplayable=mTypeArrayArray.getBoolean(R.styleable.CircleProgressBar_textIsDisplayable,true);
style=mTypeArrayArray.getInt(R.styleable.CircleProgressBar_style,0);
mTypeArrayArray.recycle();
/**
* 初始化内圆画笔
*/
mInnerPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mInnerPaint.setStyle(Paint.Style.STROKE);//设置圆环为空心,不填充//这里Paint.Style.STROKE空心不填充和Paint.Style.FILL去除画笔宽度之后，进行颜色填充
mInnerPaint.setColor(roundColor);//设置圆环颜色
mInnerPaint.setStrokeWidth(roundWidth);//设置圆环的宽度
/**
* 初始化文字画笔
*/
mTextPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setStyle(Paint.Style.STROKE);
mTextPaint.setColor(textColor);
mTextPaint.setTextSize(textSize);
mTextPaint.setStrokeWidth(0);
/**
* 初始化圆弧的画笔
*/
mProgressPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mProgressPaint.setStyle(Paint.Style.STROKE);
mProgressPaint.setColor(textColor);
mProgressPaint.setStrokeWidth(roundWidth);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/***
* 画外层的大圆
*/
int center=getWidth()/2;//圆心坐标
int radius= (int) (center-roundWidth/2);//半径
canvas.drawCircle(center,center,radius,mInnerPaint);
/***
* 绘制中间文字
*/
if(progress>=0){
int percent=(int)(progress*max/100);
float textWidth=mTextPaint.measureText(percent+"%");
float textX=center-textWidth/2;//文字的x坐标
//Ascent：字符顶部到baseLine的距离 Descent：字符底部到baseLine的距离
float textY=center+(Math.abs((mTextPaint.ascent()+mTextPaint.descent())/2));//文字的Y轴坐标
if(textIsDisplayable&&style==STROKE){
} canvas.drawText(percent+"%",textX,textY,mTextPaint);
/****
* 画圆弧进度
*/
RectF oval=new RectF(center-radius,center-radius,center+radius,center+radius);
switch (style){
case STROKE://圆弧
canvas.drawArc(oval,270,360*progress/max,false,mProgressPaint);
break;
case FILL://扇形
mProgressPaint.setStyle(Paint.Style.FILL);
canvas.drawArc(oval,270,360*progress/max,true,mProgressPaint);
break;
}
}else{
//预告标 内容为预告时间
float textWidth = mTextPaint.measureText(destine_time); //测量字体宽度，我们需要根据字体的宽度设置在圆环中间
canvas.drawText(
destine_time,
center - textWidth / 2,
center
+ (Math.abs(mTextPaint.ascent()
+ mTextPaint.descent()) / 2), mTextPaint); // 画出预告时间
}
}
/**
* 设置进度的最大值
* @param max
*/
public synchronized void setMax(int max) {
if(max < 0){
throw new IllegalArgumentException("max not less than 0");
}
this.max = max;
}
/**
* 设置进度，此为线程安全控件，由于考虑多线的问题，需要同步
* 刷新界面调用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();
}
}
/****
* 设置圆环颜色
* @param roundColor
*/
public void setRoundColor(int roundColor) {
this.roundColor = roundColor;
mInnerPaint.setColor(roundColor);
invalidate();
}
/****
* 设置圆环进度条的颜色
* @param roundProgressColor
*/
public void setRoundProgressColor(int roundProgressColor) {
this.roundProgressColor = roundProgressColor;
mProgressPaint.setColor(roundProgressColor);
invalidate();
}
/**
* 设置文字颜色
* @param textColor
*/
public void setTextColor(int textColor) {
this.textColor = textColor;
mTextPaint.setColor(textColor);
invalidate();
}
/***
* 设置文字大小
* @param textSize
*/
public void setTextSize(float textSize) {
this.textSize = textSize;
mTextPaint.setTextSize(textSize);
invalidate();
}
/***
* 设置 圆环宽度
* @param
*/
public void setRoundWidth(float roundWidth) {
this.roundWidth = roundWidth;
mInnerPaint.setStrokeWidth(roundWidth);
mProgressPaint.setStrokeWidth(roundWidth);
invalidate();
}
/***
* 进度为0时设置显示的文本
* @param destine_time
*/
public void setDestine_time(String destine_time) {
this.destine_time = destine_time;
}
/*****
* 设置样式
* @param style
* 0圆弧
* 1圆环
*/
public void setStyle(int style) {
this.style = style;
}
}
2.属性文件attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircleProgressBar">
<attr name="roundColor" format="color"></attr>
<attr name="roundProgressColor" format="color"></attr>
<attr name="roundWidth" format="dimension"></attr>
<attr name="textSize" format="dimension"></attr>
<attr name="textColor" format="color"></attr>
<attr name="max" format="integer"></attr>
<attr name="textIsDisplayable" format="boolean"></attr>
<attr name="style">
<enum name="STROKE" value="0"></enum>
<enum name="FILE" value="1"></enum>
</attr>
</declare-styleable>
</resources>
3.MainActivity.java文件
package client.itbt.yt.cn.customview;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
public class MainActivity extends Activity {
private CircleProgressBar circlebar;
private String TAG="MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circlebar = (CircleProgressBar) findViewById(R.id.view_bar);
}
public void showYuanHuan(View view){
Log.i(TAG,"showYuanHuan");
circlebar.setStyle(0);
circlebar.setRoundColor(getResources().getColor(R.color.borrow_bar_min));
circlebar.setRoundProgressColor(getResources().getColor(R.color.colorAccent));
circlebar.setRoundWidth(6);
circlebar.setMax(100);
circlebar.setProgress(60);
}
public void showYuanHu(View view){
Log.i(TAG,"showYuanHu");
circlebar.setStyle(1);
circlebar.setRoundColor(getResources().getColor(R.color.borrow_bar_min));
circlebar.setRoundProgressColor(getResources().getColor(R.color.borrow_bar_min));
circlebar.setRoundWidth(6);
circlebar.setMax(100);
circlebar.setProgress(60);
}
}
4.运行效果如下
5685477-7cd71642bfb8a792.png
