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

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

原文发表时间:2016-10-12

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小灰灰

Css实战训练之图片点击放大

Css实战训练之图片点击放大 I. 背景 非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片 那么这个功能是怎么...

8574
来自专栏前端黑板报

canvas-入门

定义 canvas是HTML5新增的一个重要元素,先看下它的定义: <canvas> is an HTML element which can be used ...

22810
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

1823
来自专栏BestSDK

shift键在Excel中,还有这10种变态玩法?

电脑键盘上有很多「瑞士军刀」似的按键,掌握这些按键的使用技巧,你让你在Excel操作中,如虎添翼。 SHIFT键就是其中之一。 Excel中的技巧有很多,基本都...

4077
来自专栏生信宝典

WB图片处理-教你利用PPT做出漂亮的WB图片!

WB是很科研多小伙伴都会用到的实验技术,而对于最终WB图片的处理也是各自有各自的手段,不过主流主要分为两大派:PPT或者Adobe Photoshop/Illu...

1.6K2
来自专栏我的前端

如何用纯 CSS 创作一个小球上台阶的动画

https://github.com/comehope/front-end-daily-challenges

1162
来自专栏非著名程序员

基础篇章:React Native 之 View 和 Text 的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 从今天开始我们进入基础组件也就是一些简单控件...

3045
来自专栏我分享我快乐

响应式jquery小效果实现思路

有很多同学在实现jquery效果时,不知道怎样符合响应式布局。我写了个小案例,帮大家找找思路,希望能帮到你。 效果如下: ? 代码如下: <!doct...

38611
来自专栏AI研习社

GPU 加速到底是个啥?

众所周知,网页不仅应该被快速加载,同时还应该流畅运行,比如快速响应的交互,如丝般顺滑的动画…… 一. GPU 加速能做什么? ? 首先我们要了解什么是 16...

4247
来自专栏Guangdong Qi

iOS开发常用之图像浏览及处理

2435

扫码关注云+社区

领取腾讯云代金券