iOS 7 Style Progress Meter in Swift


Image of Swiftly Moving Traffic Hot on the heels of my recent post iOS 7 Style Progress Meter in C# is this version where we accomplish the same feat, but using Apple's new language Swift.

To refresh your memory, this is what we're looking to recreate:

Progress Indicator Example when downloading the vndr app

In more specific terms, we're looking at the circular progress meter that slowly advances as the download completes.

The Playground

One of the nicest features of Swift is the playground where we can write and evaluate code in fast iterations. Open up Xcode, create a new Swift playground, and drop this code in:

import UIKit
import QuartzCore

let circle = UIView();

circle.bounds = CGRect(x: 0,y: 0, width: 100, height: 100);
circle.frame = CGRectMake(0,0, 100, 100);


var progressCircle = CAShapeLayer();

let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2);
let circleRadius : CGFloat = circle.bounds.width / 2 * 0.83;

var circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.5 * M_PI), endAngle: CGFloat(1.5 * M_PI), clockwise: true    );

progressCircle = CAShapeLayer ();
progressCircle.path = circlePath.CGPath;
progressCircle.strokeColor = UIColor.greenColor().CGColor;
progressCircle.fillColor = UIColor.clearColor().CGColor;
progressCircle.lineWidth = 1.5;
progressCircle.strokeStart = 0;
progressCircle.strokeEnd = 0.22;


circle // before stroke extended

progressCircle.strokeEnd = 0.83;

circle // after stroke end extended

Here's what we see when we open up the timeline:

Swift Progress Meter Output

The Swift playground lets us create a UIView without having to create an entire iOS project. This way, we can fiddle with the code until the output looks like what we expect.

To animate the progress of the download from 0% to 100%, change the value of the stokeEnd property of the CAShapeLayer. Got it? Good. Now go listen to some music.

Music for this post: DJ Snake & Lil Jon: Turn Down for What #TDFW