关于安卓自定义进度条(一)

效果如下图第一个控件


image.png

源码在文末

自定义一个渐变色的进度条,需要怎样定义?又会遇到什么坑?
带着这些问题,开始发车。

思考

1如何绘制

2遇到什么坑

如何绘制

只要安卓开发中,扯上了自定义控件这个字眼,那么,使用canvas就八九不离十了。本次实践中,自定义的是一个进度条,那么,进度条,有什么最最基本要素?
(一)当前进度
(二)背景颜色
除了上述意外,还有一些要素,如:缓存进度等等。确实都是大同小异,只要了解实现的原理,那这些都是时间的产物而已。

话回正题,如何实现。
首先,定义好外部调用的时候,需要传入什么参数,这个很关键,定义不好,就会有很多返工的机会。
笔者针对当前开发需求,定义了一个外部传入对象,代码如下:

    //进度条背景色--resource color
    private int bgColor = R.color.color_a8a8a8;
    //进度条开始颜色
    private int progressStartColor = R.color.colorPrimaryDark;
    //进度条结束颜色
    private int progressEndColor = R.color.blue_light;
    //进度条圆角
    private int radius = 20;
    //进度条文字大小,文字颜色,显示的文字
    private int textSize = 16;
    private int textColor = R.color.color_ffffff;
    private String text = "100%";
    //文字是否加粗
    private boolean textBold = false;
    //进度--最大100
    private int progress = 6;

上图中的定义,基本满足当时的需求了。定义好以后,就可以进行自定义view中的canvas开发了。

canvas绘制是有层级的,所以,绘制背景,是第一个操作,再者,就是当前进度,最后,就是进度的文字了。
其中,绘制的字体的时候,注意canvas的drawtext中,y的真正含义。具体可以自行了解开发文档。
绘制进度条背景核心代码如下:

  int radius = dp2px(mDrawInfo.getRadius());
  mPaint.setColor(getResources().getColor(mDrawInfo.getBgColor()));
  canvas.drawRoundRect(0, 0, mViewWidth, mViewHeight, radius, radius, mPaint);

其实就是一个drawRoundRect的api调用,没什么特别的。

绘制当前进度核心代码如下:

        mPaint.setShader(new LinearGradient(0, 0, mDrawProgress, mViewHeight,
                getResources().getColor(mDrawInfo.getProgressStartColor()),
                getResources().getColor(mDrawInfo.getProgressEndColor()),
                Shader.TileMode.CLAMP
        ));
        RectF rectProgress = new RectF(0, 0, mDrawProgress, mViewHeight);
        canvas.drawRoundRect(rectProgress, radius, radius, mPaint);

因为需求需要当前进度显示一个渐变的颜色,所以,就要对paint画笔对象,设置一个过渡效果,调用setShader对象即可。

最后,绘制文字,核心代码如下:

  canvas.drawText(mDrawText, mDrawTextX,
  mViewHeight - mDrawTextHeightInterval, mPaint);

其实就是也是一个drawText方法调用,没什么特别的。

至此,思路已经说完了。但是实际开发中,会有一些地方需要注意的,下面开始发车。

遇到的问题

一、当画笔对象setShader后,若下一个绘制操作不需要,记得要调用setShader(null)。否则会继续保持。
二、对于进度值很少的时候,会出现一个很特别的情况,由于调用的是drawRoundRect方法,所以圆角的地方,会不重合,开发者可以试一下。
如何解决?这就要使用Paint.setXfermode的方法中的PorterDuff.Mode.SRC_IN方法。此外,还要禁用硬件加速setLayerType(View.LAYER_TYPE_SOFTWARE, null)。注意!!!画笔在调用setXfermode方法后,记得及时set null。

动画

对于设置进度的动画,用插值器实现就好,这里不一一叙述。

写在最后

对于自定义控件,难的不是调用canvas的接口,而是调用完这些接口以后,如何保证结果如期,如何调整整合带来的兼容问题。

that's all----------------------------------------------------------------------------------------------

代码地址

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,337评论 6 524
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,560评论 3 406
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,632评论 0 370
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,219评论 1 303
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,219评论 6 401
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,670评论 1 316
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,018评论 3 431
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 41,000评论 0 280
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,552评论 1 326
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,565评论 3 347
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,692评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,280评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,009评论 3 341
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,435评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,587评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,276评论 3 383
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,752评论 2 367

推荐阅读更多精彩内容