本文共 1458 字,大约阅读时间需要 4 分钟。
首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果):
再看下图我们实现的效果:
实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方开源库,其次,需要自定义一个View并重写onDraw方法,此例中的进度是开启了一个线程,然后模仿进度递增,然后将进度值通过自定义View调用一个自定义方法传进自定义View并根据进度进行重绘。
绘制分为三部分:
1.绘制矩形(图片面积)上半部分阴影区;
2.绘制矩形(图片面积)下半部分非阴影区;
3.绘制中间进度值(文字);
onDraw代码:
- @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);
-
- }
传入进度值的方法:
- public void setProgress(int progress){
- this.progress=progress;
- postInvalidate();
- };
主界面调用方法:
- 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下载地址 :