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:
In more specific terms, we're looking at the circular progress meter that slowly advances as the download completes.
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); circle.layoutIfNeeded() 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.layer.addSublayer(progressCircle); circle // before stroke extended progressCircle.strokeEnd = 0.83; circle // after stroke end extended
Here's what we see when we open up the timeline:
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