• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

使用Swift构建自定义的ActivityIndicatorView

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

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

需求分析

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

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

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

我们先要会画圆弧:

像这样画8个圆弧,围成一个圆:

然后通过重复改变每一个圆弧的颜色,让它动起来。

我们继承UIView, 重写drawRect方法绘制界面,第一步得到当前绘图的上下文:

1
let context = UIGraphicsGetCurrentContext()

绘制圆弧

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 初始化一个 UIBezierPath 实例
let arcPath = UIBezierPath()
 
// 构建Arc路径
arcPath.addArcWithCenter(CGPointMake(CGFloat(self.frame.size.width/2), CGFloat(self.frame.size.height/2)), radius: CGFloat(Config.CC_ARC_DRAW_RADIUS), startAngle: CGFloat(DegreesToRadians(startAngle)), endAngle: CGFloat(DegreesToRadians(startAngle + Config.CC_ARC_DRAW_DEGREE)), clockwise: true)
 
// 把路径添加到当前绘图的上下文
CGContextAddPath(context, arcPath.CGPath)
 
// 设置线段宽度
CGContextSetLineWidth(context, CGFloat(Config.CC_ARC_DRAW_WIDTH))
 
// 设置线段颜色
CGContextSetStrokeColorWithColor(context, strokeColor)
 
// 绘制        
CGContextStrokePath(context)

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

1
func addArcWithCenter(center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)

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

绘制8个圆弧

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

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

1
2
3
4
5
6
7
8
struct Config {
    static let CC_ACTIVITY_INDICATOR_VIEW_WIDTH = 40
    static let CC_ARC_DRAW_PADDING = 3.0
    static let CC_ARC_DRAW_DEGREE = 39.0
    static let CC_ARC_DRAW_WIDTH = 6.0
    static let CC_ARC_DRAW_RADIUS = 10.0
    static let CC_ARC_DRAW_COLORS = [UIColor(red: 242/255.0, green: 242/255.0, blue: 242/255.0, alpha: 1.0).CGColor, UIColor(red: 230/255.0, green: 230/255.0, blue: 230/255.0, alpha: 1.0).CGColor, UIColor(red: 179/255.0, green: 179/255.0, blue: 179/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor, UIColor(red: 128/255.0, green: 128/255.0, blue: 128/255.0, alpha: 1.0).CGColor]
    }

我们可以在drawRect方法,循坏绘制8个圆弧,此时完整的代码看上去像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
override func drawRect(rect: CGRect) {
 
    let context = UIGraphicsGetCurrentContext()
 
    var startAngle = Config.CC_ARC_DRAW_PADDING
 
    for index in 1...8 {
        let arcPath = UIBezierPath()
        arcPath.addArcWithCenter(CGPointMake(CGFloat(self.frame.size.width/2), CGFloat(self.frame.size.height/2)), radius: CGFloat(Config.CC_ARC_DRAW_RADIUS), startAngle: CGFloat(DegreesToRadians(startAngle)), endAngle: CGFloat(DegreesToRadians(startAngle + Config.CC_ARC_DRAW_DEGREE)), clockwise: true)
        CGContextAddPath(context, arcPath.CGPath)
        startAngle += Config.CC_ARC_DRAW_DEGREE + (Config.CC_ARC_DRAW_PADDING * 2)
 
        CGContextSetLineWidth(context, CGFloat(Config.CC_ARC_DRAW_WIDTH))
        let colorIndex = abs(index - self.animateIndex)
        let strokeColor = Config.CC_ARC_DRAW_COLORS[colorIndex]
        CGContextSetStrokeColorWithColor(context, strokeColor)
        CGContextStrokePath(context)
    }
}

使用for循环绘制8次,产生8个圆弧,并且设置不同的颜色。这里的self.animateIndex用来跟踪整个动画的头一个颜色最浅圆弧的位置。通过它和当前index的绝对值,获得当前圆弧应该显示的颜色。

动起来

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

1
2
3
func startAnimating()
func stopAnimating()
func isAnimating() -> Bool

这里我们使用一个timer去改变self.animateIndex的值,不断重画当前视图,来产生动画效果,代码看起来像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 使用该值驱动改变圆弧颜色,产生动画效果
private var animateIndex: Int = 1
 
// 动画的Timer
private var animatedTimer: NSTimer?
 
// timer响应的事件,在这里setNeedsDisplay让UIKit重画当前视图,然后不断改变animateIndex值。
@objc private func animate () {
    if !self.hidden {
        self.setNeedsDisplay()
        self.animateIndex++
        if self.animateIndex > 8 {
            self.animateIndex = 1
        }
    }
}
 
// 开始动画
func startAnimating () {
 
    if self.hidden {
        self.hidden = false
    }
 
    if let timer = self.animatedTimer {
        timer.fire()
    else {
        self.animatedTimer = NSTimer(timeInterval: 0.1, target: self, selector: "animate", userInfo: nil, repeats: true)
        NSRunLoop.currentRunLoop().addTimer(self.animatedTimer!, forMode: NSRunLoopCommonModes)
    }
}

这里使用

1
init(timeInterval ti: NSTimeInterval, target aTarget: AnyObject, selector aSelector: Selector, userInfo: AnyObject?, repeats yesOrNo: Bool) -> NSTimer

而不是使用

1
class func scheduledTimerWithTimeInterval(ti: NSTimeInterval, target aTarget: AnyObject, selector aSelector: Selector, userInfo: AnyObject?, repeats yesOrNo: Bool) -> NSTimer

构建timer的原因是:当我们在使用自己的ActivityIndicator View的时候,我们可能把它放到UIScrollView上面。这个时候使用scheduledTimerWithTimeInterval创建的timer是加入到当前Run Loop中的,而UIScrollView在接收到用户交互事件时,主线程Run Loop会设置为UITrackingRunLoopMode。这个时候会导致timer失效。更详细的解答,我在走进Run Loop的世界 (一):什么是Run Loop?一文中有说明。

总结

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[Swift]LeetCode1168.水资源分配优化|OptimizeWaterDistributioninaVillage发布时间:2022-07-13
下一篇:
Swift数字类型之间的转换发布时间:2022-07-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap