初尝自定义View和属性动画:实现一个转动的进度条

最近看到了郭霖大神写的博客,关于属性动画的使用的。Android属性动画完全解析(上),初识属性动画的基本用法

觉得讲的真的是很有意思,通俗易懂。一口气看完上中下三篇,腰不疼气不喘呀哈哈。。。

刚好公司的UI设计师来跟我说现在新的设计中会有一个评价好评率,到时旁边要有一个圆环来代表进度,最好还要有动画效果,就那种一开始就转动,从0转到当前进度的效果。UI大概长这个样子:

其实这个的效果就很像是京东小白信用的那个动画效果了。


刚好看完郭霖大神对于属性动画的讲解,感觉这个应该难度不是很大。于是说干就干。

首先是要先分析一下View的构成

也就是说其实这个View可以分为三层:

1、最底下一层,是一个不会变的圆

2、一个深色的,代表进度的扇形

3、中间的的小圆

其中1和3是不会变的,所谓的进度其实就是2中扇形的圆心角的度数了

所以我们要分层的把View画出来

先创建一个自定义的View


在自定义的View中先定义好即将要用到的变量,同时重写一下最重要的 onDraw();

然后是先定义好xml中即将要用到的自定义View的属性

定义在项目的attrs.xml文件中

然后重写自定义View构造函数

把xml中的属性读取进来,同时初始化一下即将要用的画笔



PS:使用完 TypeArray 之后记得调用一下 TypeArray.recycle()释放资源

好了,准备工作做的差不多了,我们来先画第一个圆

在onDraw()中调用一下,看下效果


效果


第一个圆已经成功的画出来了

现在画代表进度的扇形


效果


为了能看到效果,先让扇形的角度等于270,实际上扇形的角度是要给属性动画控制的,根据动画的时长来控制

再画一个中间的小圆


调用一下


效果

呐,现在是不是已经长得有点像射鸡狮要求的了啦,可能你会说颜色不对啊,可别忘记了我们早就预留了自定义属性呢


修改成射鸡狮制定的颜色及圆环的宽度之后,是不是基本就是这个圆了。


但目前为止,自定义View是画完了,接下来就是添加动画了

动画是使用新的属性动画,以前的补间动画和帧动画已经不能满足我们的需要了

如果对于属性动画不了解的可以看看Android属性动画完全解析(上),初识属性动画的基本用法,然后顺便把它接下去的中、下篇也看一下,就能理解了。

最后,实现动画效果


动画的实现很简单,只是对目标角度进行一个平滑的过渡,然后在过渡的过程中不断的重画扇形

调用动画

效果

动画是不是已经很顺畅的跑起来了

可以开始整理代码了

首先我们肯定不满足参数只能在xml指定,特别是代表进度的扇形的角度,这个必须是拿到真实数据之后才能计算得到的。所以,有必要把一些接口给暴露出来

考虑到View的可定制性,我暴露以下这些

这样就可以供我们在得到实际数据之后对View进行定制了


最终,在我编写的UI界面中使用


好吧,其实我好困,把文章写成了流水账了。。。不过没关系,主要只是记录一下这一次的心得,同时也分享一下,不能总是只看不分享吧哈哈~睡觉睡觉,有空再改改好了~


如果这篇文章又帮到你的话,请点一下‘喜欢’,我会更努力的创作的

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,544评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,595评论 4 59
  • 古代君王多自称寡人,意为寡德之人,作为一个谦称,来昭告天下自己是上苍派来的有德之人。 而朱元璋用行动告诉你,寡人并...
    小P的P阅读 658评论 0 9
  • 网易云课堂-IOS 与Android设计规范 引入:红灯停,绿灯行 设计规范是为了培养/适应用户的使用习惯. 1....
    罗尹伊阅读 269评论 0 2
  • 或许是儿时语文老师给我的回忆太过深刻,所以如今的我迷上了看书。 或许是骨子里的文人血脉得到觉醒,所以现在的我沉迷于...
    贰拾一_阅读 603评论 12 20