时间:2021-05-20
最近看到一些应用在下载文件的时候,并没有额外弹出进度条,而是很炫的使用启动下载任务的Button直接显示文件的下载进度,通过改变其背景色,从左向右推进,直到填满整个Button时,意味着下载任务的完成。
除了这种效果,还看到某酷的视频客户端,在观看过的视频对应的按钮上,会给该按钮添加一个描边效果,4条边,每条边代表25%的进度,由上沿开始,顺时针最终到左边沿,则代表100%的进度,这种效果也很不错。
自己也研究了一下,写了个自定义的button,下面是效果,
普通的填充效果:
描边的效果:
自定义Button的主要实现就是继承Button,并重写onDraw()方法,填充的效果实现起来相对简单一点:
描边效果实现起来相对复杂一点,确切说是繁琐:
else if(currentType == TYPE_STROKE) { //初始化画笔 mPaint.setAntiAlias(true); mPaint.setColor(getContext().getResources().getColor(R.color.green_yellow)); mPaint.setAlpha(255); //获取Button的边框 Rect rect = new Rect(); canvas.getClipBounds(rect); Paint paint1, paint2, paint3, paint4; //根据当前进度,确定是绘制哪条边,其实也是绘制一个矩形,只不过这个矩形比较扁或是比较窄而已,类似一条边 if(mProgress >= 0 && mProgress < 25) { paint1 = new Paint(mPaint); Rect temp = new Rect(rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.left + mProgress * (getWidth() - getPaddingLeft() - getPaddingRight()) / 25 - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(temp, paint1); } else if(mProgress < 50) { paint1 = new Paint(mPaint); Rect rect1 = new Rect(rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(rect1, paint1); paint2 = new Paint(mPaint); Rect rect2 = new Rect(rect.right - getPaddingRight() - 2, rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + (mProgress - 25) * (getHeight() - getPaddingTop() - getPaddingBottom()) / 25); canvas.drawRect(rect2, paint2); } else if(mProgress < 75) { paint1 = new Paint(mPaint); Rect rect1 = new Rect(rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(rect1, paint1); paint2 = new Paint(mPaint); Rect rect2 = new Rect(rect.right - getPaddingRight() - 2, rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.bottom - getPaddingBottom()); canvas.drawRect(rect2, paint2); paint3 = new Paint(mPaint); Rect rect3 = new Rect( rect.right - getPaddingRight() - (mProgress - 50) * (getWidth() - getPaddingLeft() - getPaddingRight()) / 25, rect.bottom - getPaddingBottom() - 2, rect.right - getPaddingRight(), rect.bottom - getPaddingBottom()); canvas.drawRect(rect3, paint3); } else if(mProgress <= 100) { paint1 = new Paint(mPaint); Rect rect1 = new Rect( rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(rect1, paint1); paint2 = new Paint(mPaint); Rect rect2 = new Rect( rect.right - getPaddingRight() - 2, rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.bottom - getPaddingBottom()); canvas.drawRect(rect2, paint2); paint3 = new Paint(mPaint); Rect rect3 = new Rect( rect.left + getCompoundPaddingLeft(), rect.bottom - getPaddingBottom() - 2, rect.right - getPaddingRight(), rect.bottom - getPaddingRight()); canvas.drawRect(rect3, paint3); paint4 = new Paint(mPaint); Rect rect4 = new Rect( rect.left + getCompoundPaddingLeft(), rect.bottom - getPaddingBottom() - (mProgress - 75) * (getHeight() - getPaddingTop() - getPaddingBottom()) / 25, rect.left + getPaddingLeft() + 2, rect.bottom - getPaddingBottom()); canvas.drawRect(rect4, paint4); } }记得最后执行 super.onDraw(canvas);
这样会让填充或是描边绘制在最底层,不会挡住Button原有的内容。
然后添加一个API,用于更新进度:
Demo的代码上传到了github上:https://github.com/YoungLeeForeverBoy/ProgressButton
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言:前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一),Android自定义控件之自定义属性(二),Android自定义控件之自定义组合
Android实现环形进度条的效果图如下:自定义控件:AttendanceProgressBar代码如下:publicclassAttendanceProgre
前言:前两篇介绍了自定义控件的基础原理Android自定义控件基本原理详解(一)、Android自定义控件之自定义属性(二)。今天重点介绍一下如何通过自定义组合
本文讲述绘制Android自定义各种图形效果,为自定义控件的入门篇相关视频链接:Android自定义控件系列http://edu.csdn.net/course
如果你对Android系统自带的UI控件感觉不够满意,可以尝试下自定义控件,我们就以Button为例,很早以前Android123就写到过AndroidButt