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

一个类似于进度和打卡进度的自定义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