自定义进度条
一、先上效果图
效果图二、思路
1、绘制底色(灰色)
2、绘制进度(蓝色)
3、绘制最大的进度(纯蓝色)
三、实现
1)绘制底色
RectF rf = new RectF(0, 0, mWidth, mHeight);
/*绘制圆角矩形,背景色为画笔颜色*/
mPaint.setColor(Color.rgb(220, 220, 220));
canvas.drawRoundRect(rf, round, round, mPaint);
/*设置progress内部是灰色*/
mPaint.setColor(Color.rgb(242, 241, 246));
RectF rectBlackBg = new RectF(3, 3, mWidth - 3, mHeight - 3);
canvas.drawRoundRect(rectBlackBg, round, round, mPaint);
2)绘制进度
isMax 判断是否为最大的进度
//设置进度条进度及颜色
float section = currentCount / maxCount;
RectF rectProgressBg = new RectF(0, 0, mWidth * section, mHeight);
if (section != 0.0f) {
if (isMax){
mPaint.setColor(Color.rgb(75, 199, 247));
canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
}else {
RectF s1 = new RectF(0, 0, mWidth * section, mHeight);
mPaint.setColor(Color.rgb(83, 202, 247));
canvas.drawRoundRect(s1, round, round, mPaint);
RectF s2 = new RectF(3, 3, mWidth * section-3, mHeight-3);
mPaint.setColor(Color.rgb(210, 232, 245));
canvas.drawRoundRect(s2, round, round, mPaint);
}
} else {
mPaint.setColor(Color.TRANSPARENT);
canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
}
3)ProgressView完整代码
public class ProgressView extends View {
/**
* 进度条最大值
*/
private float maxCount;
/**
* 进度条当前值
*/
private float currentCount;
/**
* 画笔
*/
private Paint mPaint;
/**
* 设置为最大项
**/
private boolean isMax;
private int mWidth, mHeight;
public ProgressView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
}
public ProgressView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public ProgressView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
/***
* 设置最大的进度值
* @param maxCount
*/
public void setMaxCount(float maxCount) {
this.maxCount = maxCount;
}
/***
* 设置为最大项
*/
public void setIsMax(boolean b) {
this.isMax = b;
}
/***
* 设置当前的进度值
* @param currentCount
*/
public void setCurrentCount(float currentCount) {
this.currentCount = currentCount > maxCount ? maxCount : currentCount;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
mPaint = new Paint();
//设置抗锯齿效果
mPaint.setAntiAlias(true);
//设置画笔颜色
mPaint.setColor(Color.BLACK);
int round = mHeight / 2;
RectF rf = new RectF(0, 0, mWidth, mHeight);
/*绘制圆角矩形,背景色为画笔颜色*/
mPaint.setColor(Color.rgb(220, 220, 220));
canvas.drawRoundRect(rf, round, round, mPaint);
/*设置progress内部是灰色*/
mPaint.setColor(Color.rgb(242, 241, 246));
RectF rectBlackBg = new RectF(3, 3, mWidth - 3, mHeight - 3);
canvas.drawRoundRect(rectBlackBg, round, round, mPaint);
//设置进度条进度及颜色
float section = currentCount / maxCount;
RectF rectProgressBg = new RectF(0, 0, mWidth * section, mHeight);
if (section != 0.0f) {
if (isMax){
mPaint.setColor(Color.rgb(75, 199, 247));
canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
}else {
RectF s1 = new RectF(0, 0, mWidth * section, mHeight);
mPaint.setColor(Color.rgb(83, 202, 247));
canvas.drawRoundRect(s1, round, round, mPaint);
RectF s2 = new RectF(3, 3, mWidth * section-3, mHeight-3);
mPaint.setColor(Color.rgb(210, 232, 245));
canvas.drawRoundRect(s2, round, round, mPaint);
}
} else {
mPaint.setColor(Color.TRANSPARENT);
canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
}
}
private int dipToPx(int dip) {
float scale = getContext().getResources().getDisplayMetrics().density;
return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
//MeasureSpec.EXACTLY,精确尺寸
if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
mWidth = widthSpecSize;
} else {
mWidth = 0;
}
//MeasureSpec.AT_MOST,最大尺寸,只要不超过父控件允许的最大尺寸即可,MeasureSpec.UNSPECIFIED未指定尺寸
if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
mHeight = dipToPx(20);
} else {
mHeight = heightSpecSize;
}
//设置控件实际大小
setMeasuredDimension(mWidth, mHeight);
}
}
如有意见和建议,及时沟通。
网友评论