Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save MattCheetham/e5b8b23bc0e2234f3c43e7e3f7dca8fb to your computer and use it in GitHub Desktop.
Save MattCheetham/e5b8b23bc0e2234f3c43e7e3f7dca8fb to your computer and use it in GitHub Desktop.
A circular progress view. Essentially it is a circle broken up into segments much like the loading indicator on watchOS when installing and update. It's also IBDesignable to make your life easier.
//
// SegmentedCircularProgressView.swift
//
// Created by Matthew Cheetham on 18/06/2018.
//
import UIKit
@IBDesignable
/// A circular progress view broken out into individual segments. You can highlight individual segments to indicate progress in a clockwise fashion
class SegmentedCircularProgressView: UIView {
/// The number of segments to break the circle in to
@IBInspectable var totalSegments: Int = 8
/// The number of segments that should be highlighted the activeColour. To indicate progress
@IBInspectable var activeSegments: Int = 1
/// The colour to use the for the active segments
@IBInspectable var activeColour: UIColor = UIColor.white
/// The colour to use for the inactive segments
@IBInspectable var inactiveColour: UIColor = UIColor.white.withAlphaComponent(0.5)
/// The size of the gaps between the segments
@IBInspectable var gapSize: CGFloat = 0.004
/// The thickness of the line the makes up the circle
@IBInspectable var lineWidth: CGFloat = 10
override func draw(_ rect: CGRect) {
let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.width/2, y: rect.height/2), radius: (rect.width - lineWidth)/2, startAngle: -CGFloat.pi/2, endAngle: (3*CGFloat.pi)/2, clockwise: true)
let segmentAngle: CGFloat = (360 / CGFloat(totalSegments)) / 360
for i in 0 ... totalSegments-1 {
let circleLayer = CAShapeLayer()
circleLayer.path = circlePath.cgPath
circleLayer.strokeStart = segmentAngle * CGFloat(i)
circleLayer.strokeEnd = circleLayer.strokeStart + segmentAngle - gapSize
circleLayer.lineWidth = lineWidth
if i <= activeSegments-1 {
circleLayer.strokeColor = activeColour.cgColor
} else {
circleLayer.strokeColor = inactiveColour.cgColor
}
circleLayer.fillColor = UIColor.clear.cgColor
layer.addSublayer(circleLayer)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment