首先看下我们想要实现的效果如下图(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)的更多相关文章

  1. ruby on rails爬坑(三):图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  2. 图片上传即时显示javascript代码

    这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...

  3. 图片上传并显示(兼容ie),图片大小判断

    图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...

  4. silverlight漂亮的文件上传进度显示原理及示例

    silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园  2009/11/27 13:37:11 阅读 1219  次 概述:在网站根目录web.config里配 ...

  5. vue 上传进度显示

    参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...

  6. 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

    实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...

  7. 图片上传和显示——上传图片——上传文件)==ZJ

    http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...

  8. ueditor图片上传和显示问题

    图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...

  9. struts中用kindeditor实现的图片上传并且显示在页面上

    做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...

随机推荐

  1. UOJ #30. 【CF Round #278】Tourists

    Description Cyberland 有 n 座城市,编号从 1 到 n,有 m 条双向道路连接这些城市.第 j 条路连接城市 aj 和 bj.每天,都有成千上万的游客来到 Cyberland ...

  2. ●线段树的三个题(poj 3225,hdu 1542,hdu 1828)

    ●poj 3225 Help with Intervals(线段树区间问题) ○赘述题目 给出以下集合操作: 然后有初始的一个空集S,和以下题目给出的操作指令,并输入指令: 要求进行指令操作后,按格式 ...

  3. [bzoj4625][BeiJing2016]水晶

    来自FallDream的博客,未经允许,请勿转载,谢谢. 不用惊慌,今天的题都不是小强出的.——融入了无数心血的作品,现在却不得不亲手毁掉,难以体会他的心情啊 .——那也是没有办法的事情,能量共振不消 ...

  4. 单纯形求解线性规划(BZOJ1061)

    推荐一篇论文:http://wenku.baidu.com/view/ce5784754a7302768f99391d 我们设xi为第i个志愿者的招募次数,以样例为例,则不难列出如下的线性规划方程: ...

  5. A Problem-Solving FlowChart || 如何解决编程问题

    This is from book Cracking the coding interview, Gayle Laakmann Mcdowell. The flowchart can be used ...

  6. VMware下安装Linux(CentOs6.3)操作系统

    VMware 10.0.2 CentOs 6.3 VMware的安装以及CentOs的下载比较简单,这里不再描述 1.创建新的虚拟机 2.选择典型 3.选择稍后安装操作系统 4.选择如图所示 5.虚拟 ...

  7. mysql 使用问题?

    linux中安装了mysql客户端和服务器端,为什么无法使用,总是报错呢 解决办法:使用dpkg -r mysql命令删除掉mysql-client和mysql-server了,还是不行,而且查看软件 ...

  8. 谷歌发布 TensorFlow Serving

    TensorFlow服务是一个灵活的,高性能的机器学习模型的服务系统,专为生产环境而设计. TensorFlow服务可以轻松部署新的算法和实验,同时保持相同的服务器体系结构和API. TensorFl ...

  9. Linux平台安装MongoDB

    MongoDB 提供了 linux 各发行版本 64 位的安装包,你可以在官网下载安装包. 下载地址:https://www.mongodb.com/download-center#community ...

  10. Django笔记--视图

    URLconf 在settings.py文件中通过ROOT_URLCONF指定根级url的配置 urlpatterns是一个url()实例的列表 一个url()对象包括: 正则表达式 视图函数 名称n ...