Android 仿应用宝下载进度条
一、介绍
- 一个横向进度条
- 下载完成区域有一个滑块不断从左往右滑动(最开始就是被这个吸引的,就想着这个怎么实现的)
- 进度条中间显示当前进度,值得注意的是,进度条文本包含在下载区域中的部分显示为白色
- 点击暂停,进度条颜色改变,进度文本改变
二、分析
根据以上简单介绍,可以抓住要实现的重难点是上面的第2、3点。
1. 进度条文本包含在下载区域中的部分显示为白色怎么实现?
这个和歌词变色的效果是一样的,所以实现原理应该差不多。canvas有一个save的方法,然后设置成CLIP_SAVE_FLAG标志,这个标志的解释是restore the current clip when restore() is called.然后结合canvas的clip方法和restore方法就能实现。后文见代码④。
2. 下载完成区域有一个滑块不断从左往右滑动怎么实现?
首先想到的是画这样一个滑块(其实是一张图片),然后不断根据当前进度修改位置实现移动。需要注意的是这个滑块的移动特点: 滑块的右边界开始进入,最后左边界消失,而且只在下载完成这个区域内有显示(右边界超出下载完成右边界部分不显示)这让我想到两个图层重叠时的显示模式,再看看这幅图,那么这里就可以使用SRC_ATOP模式。
三、实现
1.自定义属性
<declare-styleable name="FlikerProgressBar"><attr name="textSize" format="dimension|reference"/><attr name="loadingColor" format="color|reference"/><attr name="stopColor" format="color|reference"/></declare-styleable>
private void initAttrs(AttributeSet attrs) {if (attrs != null) {TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.FlikerProgressBar);textSize = (int) ta.getDimension(R.styleable.FlikerProgressBar_textSize, dp2px(12));loadingColor = ta.getColor(R.styleable.FlikerProgressBar_loadingColor, Color.parseColor("#40c4ff"));stopColor = ta.getColor(R.styleable.FlikerProgressBar_stopColor, Color.parseColor("#ff9800"));ta.recycle();}
}
2.重写onMeasure方法,当height设置为wrap_content时设置为默认高度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);int height = 0;switch (heightSpecMode){case MeasureSpec.AT_MOST:height = (int) dp2px(DEFAULT_HEIGHT_DP);break;case MeasureSpec.EXACTLY:case MeasureSpec.UNSPECIFIED:height = heightSpecSize;break;}setMeasuredDimension(widthSpecSize, height);
}
3.重写onDraw方法
@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);//1.边框drawBorder(canvas);//2.进度drawProgress();canvas.drawBitmap(pgBitmap, 0, 0, null);//3.进度textdrawProgressText(canvas);//4.变色处理drawColorProgressText(canvas);
}
①绘制边框
private void drawBorder(Canvas canvas) {bgPaint.setStyle(Paint.Style.STROKE);bgPaint.setColor(progressColor);bgPaint.setStrokeWidth(dp2px(1));canvas.drawRect(0, 0, getWidth(), getHeight(), bgPaint);
}
②绘制进度
private void drawProgress() {bgPaint.setStyle(Paint.Style.FILL);bgPaint.setStrokeWidth(0);bgPaint.setColor(progressColor);float right = (progress / MAX_PROGRESS) * getMeasuredWidth();pgBitmap = Bitmap.createBitmap((int) Math.max(right, 1), getMeasuredHeight(), Bitmap.Config.ARGB_8888);pgCanvas = new Canvas(pgBitmap);pgCanvas.drawColor(progressColor);if(!isStop){bgPaint.setXfermode(xfermode);pgCanvas.drawBitmap(flikerBitmap, flickerLeft, 0, bgPaint);bgPaint.setXfermode(null);}
}
③绘制进度条显示文本
private void drawProgressText(Canvas canvas) {textPaint.setColor(progressColor);progressText = getProgressText();textPaint.getTextBounds(progressText, 0, progressText.length(), textBouds);int tWidth = textBouds.width();int tHeight = textBouds.height();float xCoordinate = (getMeasuredWidth() - tWidth) / 2;float yCoordinate = (getMeasuredHeight() + tHeight) / 2;canvas.drawText(progressText, xCoordinate, yCoordinate, textPaint);
}
④进度条文本变色处理
private void drawColorProgressText(Canvas canvas) {textPaint.setColor(Color.WHITE);int tWidth = textBouds.width();int tHeight = textBouds.height();float xCoordinate = (getMeasuredWidth() - tWidth) / 2;float yCoordinate = (getMeasuredHeight() + tHeight) / 2;float progressWidth = (progress / MAX_PROGRESS) * getMeasuredWidth();if(progressWidth > xCoordinate){canvas.save(Canvas.CLIP_SAVE_FLAG);float right = Math.min(progressWidth, xCoordinate + tWidth);canvas.clipRect(xCoordinate, 0, right, getMeasuredHeight());canvas.drawText(progressText, xCoordinate, yCoordinate, textPaint);canvas.restore();}
}
四、效果图
五、下载
下载:https://github.com/LineChen/FlickerProgressBar
Android 仿应用宝下载进度条相关推荐
- 炫酷进度条:Android 仿应用宝下载进度条
2016-09-29 FlowLeaf 鸿洋 鸿洋 鸿洋 微信号 hongyangAndroid 功能介绍 你好,欢迎关注鸿洋的公众号,每天为您推送高质量文章,让你每天都能涨知识.点击历史消息,查看所 ...
- android 仿手机助手下载进度条效果
今天准备写一个关于类似一般手机助手下载的效果,先看效果就知道了, 实现这个效果要用到Paint类的一个很重要的方法就是setShader(),再加入动画了,使用的是属性动画,现在就动手开始写吧,今天没 ...
- android触摸进度条,Android仿IOS ViewPager滑动进度条
最近做项目,碰到如下的需求:ViewPager分页,如果是6页(包括6页)就用圆点,如果是6页以上就用进度条来切换.前面一种交互方法最常见,用小圆点来表示当前选中的页面,这些小圆点称为导航点,很多Ap ...
- progressblock 安卓自定义进度条 progressbar 高仿仿QQ下载进度条
progressblock 安卓自定义进度条 progressbar 高仿仿QQ下载进度条 附上我在公司做下载播放项目 主要使用方法 progressBlock = (ProgressBlock) f ...
- 仿苹果AppStore 环形下载进度条
以前项目自己写的 ,一个模仿苹果AppStore 下载进度条的winfrom用户控件,GDI绘制.效果如图 1 using System.Drawing; 2 using System.Windows ...
- 实战|仿应用宝下载并安装App(附源码)
学更好的别人, 做更好的自己. --<微卡智享> 本文长度为2499字,预计阅读7分钟 仿应用宝下载安装App 前面几章我们学习了检测App是否安装,能过AsyncTask下载App并调用 ...
- 仿iReader切换皮肤进度条
目录 仿iReader切换皮肤进度条 定义属性文件: 实现代码: 简单测试代码: 仿iReader切换皮肤进度条 标签(空格分隔): 自定义View 本以为使用paint.setXfermode(ne ...
- Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧 需要做一 ...
- android 流程指示,Android实现带有指示器的进度条
背景 当我们看到UI给我们设计的效果的时候,我们习惯性的思路就是看看google有没有为我们提供相应的控件或者是能否在网上找到一些合适的轮子拿过来直接用.但是,有时候很不巧的是没有这样的轮子供我们直接 ...
- Android仿淘宝首页UI(附代源代码及示例图片)
Android仿淘宝首页UI(附代源代码及示例图片) 可以收获 运行出来的效果 部分代码 源代码 可以收获 更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...
最新文章
- 解决git bash右键菜单消失的问题
- GDCM:读取两个DICOM文件保存在另外dicom文件中的测试程序
- html 图片点击查看大图_【神游千年,大美敦煌】北魏-260窟【高清大图】
- java 用流创建流_成为Java流大师–第1部分:创建流
- 使用telephonymanager真机调试 闪退_watchOS 上的一次 SKView 内存泄露调试
- Storyboard全解析-第二部分
- java盘点系统_2020年度综合大盘点:火爆IT业的7大Java技术,任何一项都是“卧槽牛逼”!...
- redist mysql_Windows下安装 MySQL
- Java构造方法解析
- 计算机主板的接口结构名称10,[pc玩家]主板接口大盘点,细数历年主流的主板接口:内部接口...
- 计算机信息资源管理岗位,信息资源管理专业的可以报考公务员的哪些职位?
- QCustomPlot系列(2)-绘制两条曲线+自动全显+鼠标拖放+rescaleAxes()函数简介
- python 导入自己写的类
- css3 实现图片闪过一道光效果 亲测可用
- python第一行代码_“少年py”001:下载Python软件,写第一行代码
- X710网卡RSS对称哈希
- 编译安装redis6.2.6
- 流程图规范(国家、ISO标准)
- “Big O”符号的简单英文解释是什么?
- UE4实现物体或人物透视效果(透视材质)