Android自定义进度条

自定义进度条


一、先上效果图

效果图

二、思路

1、绘制底色(灰色)
2、绘制进度(蓝色)
3、绘制最大的进度(纯蓝色)

三、实现

1)绘制底色

1
2
3
4
5
6
7
8
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 判断是否为最大的进度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//设置进度条进度及颜色
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完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

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);


}

}

如有意见和建议,及时沟通。

0%