安卓自定义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 ...
随机推荐
- UOJ #30. 【CF Round #278】Tourists
Description Cyberland 有 n 座城市,编号从 1 到 n,有 m 条双向道路连接这些城市.第 j 条路连接城市 aj 和 bj.每天,都有成千上万的游客来到 Cyberland ...
- ●线段树的三个题(poj 3225,hdu 1542,hdu 1828)
●poj 3225 Help with Intervals(线段树区间问题) ○赘述题目 给出以下集合操作: 然后有初始的一个空集S,和以下题目给出的操作指令,并输入指令: 要求进行指令操作后,按格式 ...
- [bzoj4625][BeiJing2016]水晶
来自FallDream的博客,未经允许,请勿转载,谢谢. 不用惊慌,今天的题都不是小强出的.——融入了无数心血的作品,现在却不得不亲手毁掉,难以体会他的心情啊 .——那也是没有办法的事情,能量共振不消 ...
- 单纯形求解线性规划(BZOJ1061)
推荐一篇论文:http://wenku.baidu.com/view/ce5784754a7302768f99391d 我们设xi为第i个志愿者的招募次数,以样例为例,则不难列出如下的线性规划方程: ...
- A Problem-Solving FlowChart || 如何解决编程问题
This is from book Cracking the coding interview, Gayle Laakmann Mcdowell. The flowchart can be used ...
- VMware下安装Linux(CentOs6.3)操作系统
VMware 10.0.2 CentOs 6.3 VMware的安装以及CentOs的下载比较简单,这里不再描述 1.创建新的虚拟机 2.选择典型 3.选择稍后安装操作系统 4.选择如图所示 5.虚拟 ...
- mysql 使用问题?
linux中安装了mysql客户端和服务器端,为什么无法使用,总是报错呢 解决办法:使用dpkg -r mysql命令删除掉mysql-client和mysql-server了,还是不行,而且查看软件 ...
- 谷歌发布 TensorFlow Serving
TensorFlow服务是一个灵活的,高性能的机器学习模型的服务系统,专为生产环境而设计. TensorFlow服务可以轻松部署新的算法和实验,同时保持相同的服务器体系结构和API. TensorFl ...
- Linux平台安装MongoDB
MongoDB 提供了 linux 各发行版本 64 位的安装包,你可以在官网下载安装包. 下载地址:https://www.mongodb.com/download-center#community ...
- Django笔记--视图
URLconf 在settings.py文件中通过ROOT_URLCONF指定根级url的配置 urlpatterns是一个url()实例的列表 一个url()对象包括: 正则表达式 视图函数 名称n ...