使用 Swift 构建自定义的ActivityIndicator View

目前在自己的个人项目里,已经开始使用Swift去编写代码。这篇文章把项目中自己设计的一个ActivityIndicator View展示给大家。

在开始之前,我们先看看最终的效果,如下图:

我建议大家下载本文对应在Github分享的完整项目,以便跟着本篇文章来阅读代码。

需求分析

我们需要实现一个自定义的和 UIActivityIndicatorView 提供相似功能的一个Loading效果。我们将使用 Core Graphics 来绘制这样的效果,并使用 Core Animation让它动起来。

让我们先分析一下这个控件的组成,为我们实际编码提供具体的思路。

首先,这个loading效果图,是由8个圆弧组成的一个圆。

我们先要会画圆弧:

像这样画8个不同颜色的圆弧,围成一个圆,形成动画的一帧:

实现该动画至少需要8种不同情况的圆,然后通过Core Animation的CAKeyframeAnimation关键帧动画让它动起来。

绘制圆弧

这里我们使用 UIBezierPath 类去构建路径,然后通过绘制路径的方式绘制圆弧。

通过如上的方式,我们就可以成功画出一个圆弧。其中:

这个方法构建路径的解释是 center 为圆点坐标,radius 为半径,startAngle 为开始的弧度,endAngle 为结束的弧度,clockwise 表示的是顺时针还是逆时针。

绘制一帧Contents:8个圆弧

当我们可以成功在绘图上下文绘制出圆弧时,我们应该开始着手绘制效果图中的8个圆弧,并让它在正确的位置,带上不同颜色。

这里是效果图的一些参数设置,包括半径,宽度,颜色等信息:

我们可以在循坏中绘制8个圆弧,生成一张image,做为动画的一帧,此时完整的代码看上去像这样:

使用for循环绘制8次,产生8个圆弧,并且设置不同的颜色。这里的frame用来确定当前image所处的帧数。通过它和当前index的绝对值,我们可以获得当前圆弧应该显示的颜色。

动起来

在设计一个ActivityIndicator View的时候,我们应该像UIKit提供的 UIActivityIndicatorView 一样,至少需要实现这三组API:

感谢 @传人Joe的评价,这里把原先通过timer执行的动画换成了CoreAnimation来实现。

这里需要注意的是:考虑不同iPhone分辨率的情况,我们在绘制image作为视图Layer的contents的时候,使用UIScreen.mainScreen().nativeScale的大小构造image context上下文环境

总结

到这个时候,我们应该就能看到和效果图一样的动画效果。但是写一个可供使用的自定义控件时,应该考虑更多的细节工作。比如初始化,视图移除,intrinsicContentSize,是否需要支持 @IBInspectable 和 @IBDesignable 等等,来让使用我们控件的开发者更加友好。更加详细的代码和Demo可以去这里查看:https://github.com/yechunjun/CCActivityIndicatorView


1 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部