安卓自定义View实现图片上传进度显示(仿QQ)
首先看下我们想要实现的效果如下图(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)的更多相关文章
- ruby on rails爬坑(三):图片上传及显示
一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...
- 图片上传即时显示javascript代码
这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...
- 图片上传并显示(兼容ie),图片大小判断
图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...
- silverlight漂亮的文件上传进度显示原理及示例
silverlight漂亮的文件上传进度显示原理及示例 作者:chenxumi 出处:博客园 2009/11/27 13:37:11 阅读 1219 次 概述:在网站根目录web.config里配 ...
- vue 上传进度显示
参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...
- 图片上传和显示——上传图片——上传文件)==ZJ
http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...
- ueditor图片上传和显示问题
图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...
- struts中用kindeditor实现的图片上传并且显示在页面上
做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...
随机推荐
- 【BZOJ1951】【SDOI2010】古代猪文
Background "在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心--" --选自猪王国民歌 很久很 ...
- 【BZOJ3573】【HNOI2014】米特运输
Description 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题. D星上有N个城市,我们将其顺序编号为1到N,1号城市 ...
- 51 nod 1456 小K的技术(强连通 + 并查集)
1456 小K的技术 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 苏塞克王国是世界上创新技术的领先国家,在王国中有n个城市 ...
- Codeforces 2B. The least round way
There is a square matrix n × n, consisting of non-negative integer numbers. You should find such a w ...
- bzoj3944Sum
3944: Sum Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 5149 Solved: 1385[Submit][Status][Discuss ...
- 使用PL/SQL Developer连接远程DB(本机不安装Oracle客户端)
本文内容亲测可行环境: 服务端:centos6.7 ,oracle 11g r2 ,动态注册,监听端口号:1521 用户端:win7 ,没有安装ORACLE及其客户端 准备文件:plsql ...
- 解决ansible首次连接host服务器需验证问题
问题描述: [root@iZm5e79rtwsq2hm57teyk5Z ansible]# ansible aofeng -f 5 -m ping 47.93.18.191 | FAILED! =&g ...
- 一个成功的 Git 分支模型(适用于商业应用开发)
在这篇文章中,我将推广一下大约一年前我介绍过的一些项目(公私皆有)中使用的开发模型,它们的结果都非常成功.有段时间我非常想写出来分享一下,但是我至今才抽出时间来.我不会言及任何项目细节,仅讨论分支策略 ...
- jquery easyui panel title文字格式设置
$('#txtLeftPercent').panel({ title: '剩余权重:' + '<b style="color:red">' + 100 + '%< ...
- 手把手教你全家桶之React(一)
前言 最近项目用到react,其实前年我就开始接触react,时光匆匆,一直没有时间整理下来(太懒啦)!如今再次用到,称工作间隙,对全家桶做一次总结,项目源码地址.废话不多说,上码. 创建一个文件目录 ...