Created
June 19, 2018 15:10
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// 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