专栏首页非著名程序员Android 自定义 view 动画按钮

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),作者:givemeacondom

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个类似于进度和打卡进度的自定义view

    一个类似于进度和打卡进度的自定义view ---- 如下图: ? 看GIF岂不是更好 ? ---- 这个view在现在的app中挺常见的,基本都是这个套路, -...

    非著名程序员
  • 自封装Android软键盘工具类ImeUtil

    在我们的开发过程中,键盘的显示和隐藏是经常遇到的,因为在该显示的时候显示,该隐藏的时候隐藏是非常人性化的表现,不用用户再次的点击触发。为此,我专门写了一个工具类...

    非著名程序员
  • 吐血推荐:这个开源工具你值得拥有,让你轻松面对各种调试

    前天晚上分享了一篇国人把 GitHub 玩出新高度的文章,培训机构的学员为了找工作买卖 GitHub 账号,很多人说:其实面试的时候,只要深度一点的询问,一问就...

    非著名程序员
  • SAP ABAP CDS view里的注解在ABAP后台是如何被解析的?

    我们在ABAP Development Tool里编写SAP CDS view,为视图维护这些以@开头的注解,同Java Spring里广泛应用的annotat...

    Jerry Wang
  • 通过 PHP 原生代码实现视图模板引擎的解析和渲染

    上篇教程学院君给大家简单介绍了什么是 MVC 设计模式,并演示了如何基于原生 PHP 代码编写简单的 HTTP 控制器,控制器对应 MVC 模式中的 C(Con...

    学院君
  • Dubbo 常见错误及解决方法

    Dubbo 作为高性能 RPC(Remote Procedure Call)框架已经成为 Apache 的顶级项目,意味着在全球被数以千计的公司所采用来其实现...

    kirito-moe
  • ImportError: cannot import name ‘audio_ops‘ (TensorFlow)

    tensorflow 报错: from tensorflow.python.framework import ops as tf_ops

    于小勇
  • 十行代码实现一个量化交易入门程序

    1 在浏览器中打开 www.joinquant.com 2 编写策略代码 点击顶部的“我的策略”,选择子菜单“我的策略”,在左侧输入python代码 def i...

    海天一树
  • 【DB笔试面试490】 如何导出csv和html文件?

    有关本小节的更多内容可以参考我的BLOG:http://blog.itpub.net/26736162/viewspace-2149543/

    小麦苗DBA宝典
  • 创意饼图的制作技巧——图标填充饼图!

    今天给大家介绍一种创意饼图的制作技巧——图标填充饼图! 创意饼图 ▽ 觉得默认的饼图不够炫酷、不够养眼,木有逼格 没关系,今天就交给大家一种创意饼图的制作技...

    数据小磨坊

扫码关注云+社区

领取腾讯云代金券