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

时间:2022-04-27
本文章向大家介绍一个类似于进度和打卡进度的自定义view,主要内容包括看GIF岂不是更好、这个view在现在的app中挺常见的,基本都是这个套路,、自定义view中获取属性、确定自定义view的大小、计算我们需要绘制的内容坐标,这个其实是view的思路的最重要的,我们需要知道我们要绘制的东西在那个坐标上,大概就是初中坐标系的知识,回想一下,基本都能绘制出来,至于怎么绘制,就是谷歌提供给我们的API没什么技术难度,、计算每个小球的位置、脑细胞累死了,休息休息下,拿着计算好的坐标去canvas绘制吧、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

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


如下图:

看GIF岂不是更好


这个view在现在的app中挺常见的,基本都是这个套路,


之前写过一个可以双向滑动的和这个view的类似,那个滑动的view处理的onTouch事件,以及判断了我们应该滑动哪个小球,有兴趣的可以看下之前的连接 双向滑动的SeekBar:http://blog.csdn.net/givemeacondom/article/details/52397589


这个就比较简单了,都是静态的绘制,唯一的交互就是UI中的签到按钮,点击一次通知自定义view绘制;


  • 透漏自定义属性
  • 确定view的size,以及处理测量模式
  • 根据确定的比例,计算我们自定义view中需要的坐标(背景,矩形区域,圆形的白色点,以及选中状态下的,对号的path坐标)
  • 然后就是绘制,透漏外界设置数据接口

上面就是实现的思路,我们一步步看下代码,最后会奉上源代码的下载链接;

这是自定义属性的抽取

 <declare-styleable name="SignInView">     <attr name="sign_in_bg_clor" format="color" />
     <attr name="sign_in_pb_clor" format="color" />
     <attr name="sign_in_check_clor" format="color" />
     <attr name="sign_in_text_clor" format="color" />
     <attr name="sign_in_text_size" format="dimension" />
 </declare-styleable>

自定义view中获取属性

确定自定义view的大小

根据需求我们的这个view默认充满屏幕,所以只需要处理height的测量模式即可

计算我们需要绘制的内容坐标,这个其实是view的思路的最重要的,我们需要知道我们要绘制的东西在那个坐标上,大概就是初中坐标系的知识,回想一下,基本都能绘制出来,至于怎么绘制,就是谷歌提供给我们的API没什么技术难度,

计算每个小球的位置


脑细胞累死了,休息休息下,拿着计算好的坐标去canvas绘制吧

重要的在这里,源代码下载地址

https://github.com/GuoFeilong/BehivorDemo