码迷,mamicode.com
首页 > 移动开发 > 详细

安卓自定义View实现图片上传进度显示(仿QQ)

时间:2015-05-12 15:49:23      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:自定义view

     首先看下我们想要实现的效果如下图(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下载地址http://download.csdn.net/detail/baiyuliang2013/8690773

安卓自定义View实现图片上传进度显示(仿QQ)

标签:自定义view

原文地址:http://blog.csdn.net/baiyuliang2013/article/details/45668695

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!