Android 自定义 view 动画按钮

昨天偶偶然看见UI 给的一个交互的效果,原图如下

就是下面的loginbutton,于是大概模仿了一下, 并没有做这个UI的全部效果,有兴趣的可以完善后面展开的效果

下面是demo的button效果

这个View用到的知识点比较简单:

  1. view的坐标系知识,(大家没有不熟悉的吧)
  2. view的canvas基本API(画矩形,画扇形,)
  3. view的自定义属性(attr提供选项)
  4. 属性动画的知识(老生常谈的知识,ObjectAnimation和ValueAniamtion)

下面我们就一步步实现这个button

  • 我们写一个自定义的类继承View实现其构造,在构造函数中获取自定义属性的值
  • 重写view的onMeasue,确定和测量我们view的大小和测试模式的确定
  • 然后获取测量后view的宽和高
  • 然后就是最后一步了onDraw,几分钟,我们已经完成了百分之80的工作 最后20%就是让view的内容画到画布上,并且让其动起来就ok了
  • 画圆形的button,注意这个圆角button,动起来的时候量个半圆需要合并成一个完整的圈,所以倒角的半径就已经确定了,就是我们view高度的一半,这里需要注意下
  • 画button上面的文字
  • 小插曲,我们在绘制文字的时候为了让文字居中,我们需要获取文字测量后的信息如下
  • 画扇形的方法,这个方形就是我们那个loading的圆圈
  • ok到现在我们所有的图形元素都准备到位,剩下的就是提供两个方法,一个是开始登陆,button变成圆形,还有一个就是登陆的结果不管失败还是成功都要变成button,以及还有一个在变成圆球的时候旋转的动画

一步步来

  • 然后就是类似的一个方法,圆圈变成button的方法

这样我们view的全部工作都做完了,剩下的就是在Mainactivity里面用一下

由于 就一个这个demo就一个自定义view,项目就不上传了,把完整的代码给大家,有兴趣的可以放到AS里面跑一下,谢谢!

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-07-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web编程技术分享

三分钟学会用 js + css3 打造酷炫3D相册

90250
来自专栏九彩拼盘的叨叨叨

前端文章收藏

15120
来自专栏coding for love

CSS入门9-定位机制

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

7630
来自专栏我和未来有约会

用silverlight做动画-相机

用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,...

29040
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

21320
来自专栏24K纯开源

用Qt写软件系列四:定制个性化系统托盘菜单

导读     一款流行的软件,往往会在功能渐趋完善的时候,通过改善交互界面来提高用户体验。毕竟,就算再牛逼的产品,躲藏在糟糕的用户界面之后总会让用户心生不满。界...

426100
来自专栏BestSDK

9种最经典的导航模式,APP开发必备

一、标签式导航 标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航 底部导航一般...

54890
来自专栏编程微刊

前端css常用的选择小汇

13420
来自专栏xiaoxi666的专栏

博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

20450
来自专栏菩提树下的杨过

用Flex模拟智能手机表单输入的自动放大功能

用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次...

24360

扫码关注云+社区

领取腾讯云代金券