Android 自定义 View 实现带动画效果网格布局抽奖控件

673 阅读1分钟

本篇涉及到的知识包括:实现自定义 View;Paint、Canvas、RectF 等对象相关方法的使用;ValueAnimator、AnimatorSet 等动画相关对象的使用。

功能分析

最近实现了一个抽奖功能。

要求如下:

  • 抽奖控件包括两行,需要显示 0-9 这 10 个数字,每行 5 个数字;
  • 点击开始之后有一个平移效果的动画在这 10 个数字上显示;
  • 获取到抽奖结果平移动画正好定位到中奖值所在位置;

效果截图:

初始状态 初始状态

点击选中状态 选中状态

中奖码选中状态 中奖码选中状态

附带动画的整体效果 整体效果

思考及尝试实现

只看默认布局,使用 RecycleView 就可以实现这样的布局,点击选中/取消选中可在 Adapter 对应的 Item 中实现。这种方式实现的话平移效果动画实现有难度,尤其最后要停在中奖码的位置。

接下来就是从自定义 view 实现这种实现方式进行思考:

  • 画 10 个数字(其实就是 drawBitmap()),需要区分当时是否为选中状态;
  • 重写 onTouchEvent 方法,实现选中/取消选中数字;
  • 画动画滑动(也是 drawBitmap());
  • 动画结束滑块显示在(通过 RectF 确定);
  • 平移动画其实就是画滑块在线段上的平移(找好起点、终点),连续性可以使用 AnimatorSet 将动画串联起来;

最终代码

源码

详细说明见代码中注释

注意

切图别留外边距,否则显示上会有奇怪的现象发生。