If you are looking for a customizable circle graph to add to your project, you have come to the right place. This CircleGraph pods offers easy implementation with customizable parameters such as line width, size, color, multiple arcs and different animations (see some examples above).
If you didn't use CocoaPods before, install it first.
$ gem install cocoapods
$ pod setup
If you don't have a Podfile yet, navigate to your project file and run:
pod init
If the Podfile is there, simply append the following line to your Podfile.
pod 'CircleGraph', :git => 'https://github.com/pmgeurts/CircleGraph.git'
Then, run this command. 🎉
$ pod install
Drag this file into your project.
CircleGrapph/CircleGraph.swift And you can use CircleGraph. 🎉
Use this method if you purely want to use code to instantiate your Circle Graph:
//Instantiate graph:
let doubleArcGraph = CircleGraph(frame: CGRect(x: 0, y: 0, width: 120, height: 120), strokeWidth: 15, passiveColor: UIColor.purple, activeColor: UIColor.magenta, inBetweenColor: UIColor.red)
//Add Subview:
let doubleArcGraph = CircleGraph(frame: CGRect(x: 0, y: 0, width: 120, height: 120), strokeWidth: 15, passiveColor: UIColor.purple, activeColor: UIColor.magenta, inBetweenColor: UIColor.red)
//Set anchors:
NSLayoutConstraint.activate([ ... ])
//Call the graph method:
doubleArcGraph.drawTwoLayerArc(from: 0, to: 0.5, animationDuration: 0.5, animationType: .linear)Use this method if you define your Circle Graph container view in your XIB / Storyboard:
//Setup your container view in your view file
//Create an outlet:
@IBOutlet weak var: circleGRaphContainr: UIView!
//Create graph object:
var threeArcGraph: CircleGraph!
//Setup circle graph (the frame is taken from the container bounds):
threeArcGraph = CircleGraph(frame: circleGraphContainer.bounds, strokeWidth: 20, passiveColor: UIColor.lightGray, activeColor: UIColor.red, inBetweenColor: UIColor.orange)
//Add Subview:
circleGraphContainer.addSubview(threeArcGraph)
//Call the graph method:
threeArcGraph.drawThreeLayerArc(from: 0.75, to: 0.5, inBetween: 0.4, animationDuration: 1.5, animationType: .easeInEaseOut)Passive color: Background circle Active color: First animated circle Second active color: Circle between passive color and active color
Automatically determenied based on input values:
- From value smaller than to value: Clockwise
- From value bigger than to value: Counter clockwise
Duration of the animation can be specified in the drawing function
Feel free to reach out! pmgeurts@gmail.com