实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方开源库,其次,需要自定义一个View并重写onDraw方法,此例中的进度是开启了一个线程,然后模仿进度递增,然后将进度值通过自定义View调用一个自定义方法传进自定义View并根据进度进行重绘。
绘制分为三部分:
1.绘制矩形(图片面积)上半部分阴影区;
2.绘制矩形(图片面积)下半部分非阴影区;
3.绘制中间进度值(文字);
onDraw代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
@Override
protected
void
onDraw(Canvas canvas) {
super
.onDraw(canvas);
mPaint.setAntiAlias(
true
);
// 消除锯齿
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.parseColor(
"#70000000"
));
//半透明
canvas.drawRect(
0
,
0
, getWidth(), getHeight()-getHeight()*progress/
100
, mPaint);
mPaint.setColor(Color.parseColor(
"#00000000"
));
//全透明
canvas.drawRect(
0
, getHeight()-getHeight()*progress/
100
, getWidth(), getHeight(), mPaint);
mPaint.setTextSize(
30
);
mPaint.setColor(Color.parseColor(
"#FFFFFF"
));
mPaint.setStrokeWidth(
2
);
Rect rect=
new
Rect();
mPaint.getTextBounds(
"100%"
,
0
,
"100%"
.length(), rect);
//确定文字的宽度
canvas.drawText(progress+
"%"
, getWidth()/
2
-rect.width()/
2
,getHeight()/
2
, mPaint);
}
|
传入进度值的方法:
1
2
3
4
|
public
void
setProgress(
int
progress){
this
.progress=progress;
postInvalidate();
};
|
主界面调用方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
customView=(CustomView6) findViewById(R.id.customView);
//模拟图片上传进度
new
Thread(
new
Runnable() {
@Override
public
void
run() {
while
(
true
){
if
(progress==
100
){
//图片上传完成
handler.sendEmptyMessage(SUCCESS);
return
;
}
progress++;
customView.setProgress(progress);
try
{
Thread.sleep(
200
);
//暂停0.2秒
}
catch
(InterruptedException e){
e.printStackTrace();
}
}
}
}).start();
|
demo下载地址:http://download.youkuaiyun.com/detail/baiyuliang2013/8690773