Swift/UIView Draw something like tachometer - swift

Question

I think I am having kind of a blackout but I am not able to simply work with BezierPaths within Swift. Want I want to do is something like on the screenshot:
So it's just something like a tachometer with three colours:
What I do have is the following:
diagram.layer.borderWidth = 4.0
diagram.layer.borderColor = UIColor.black.cgColor
let pi = CGFloat(Float.pi)
let start:CGFloat = 0.0
let end :CGFloat = pi
let radius : CGFloat = diagram.frame.width/3
let middle = CGPoint(x: diagram.frame.size.width/2, y:diagram.frame.size.height/2)
let path: UIBezierPath = UIBezierPath();
path.addArc(
withCenter: CGPoint(x: middle.x, y: middle.y),
radius: radius,
startAngle: start,
endAngle: end,
clockwise: false
)
let layer = CAShapeLayer()
layer.fillColor = UIColor.clear.cgColor
layer.strokeColor = UIColor.red.cgColor
layer.path = path.cgPath
diagram.layer.addSublayer(layer)
That is just the first arc, but it makes me crazy. It is not centred, which is odd because I am using the size of my Uiview for it. My UIView is obviously called "diagram".
Does anyone have a great example with Swift how to do something like on the screenshot?
Thanks for reading!
=======
This is just code relating to the answer of andykkt
func drawCompareGauge(frame: CGRect = CGRect(x: 0, y: 0, width: 180, height: 92), leftPercentage: CGFloat = 0.5) {
//// General Declarations
let context = UIGraphicsGetCurrentContext()
//// Color Declarations
let leftColor = UIColor(red: 0.278, green: 0.757, blue: 0.749, alpha: 1.000)
let rightColor = UIColor(red: 0.557, green: 0.400, blue: 0.867, alpha: 1.000)
//// Variable Declarations
let leftDashed: CGFloat = 247 * leftPercentage
//// rightRing Drawing
let rightRingPath = UIBezierPath()
rightRingPath.move(to: CGPoint(x: frame.minX + 11.5, y: frame.minY + 91.5))
rightRingPath.addCurve(to: CGPoint(x: frame.minX + 42.73, y: frame.minY + 28.82), controlPoint1: CGPoint(x: frame.minX + 11.5, y: frame.minY + 65.89), controlPoint2: CGPoint(x: frame.minX + 23.76, y: frame.minY + 43.15))
rightRingPath.addCurve(to: CGPoint(x: frame.minX + 90, y: frame.minY + 13), controlPoint1: CGPoint(x: frame.minX + 55.88, y: frame.minY + 18.89), controlPoint2: CGPoint(x: frame.minX + 72.25, y: frame.minY + 13))
rightRingPath.addCurve(to: CGPoint(x: frame.minX + 168.5, y: frame.minY + 91.5), controlPoint1: CGPoint(x: frame.minX + 133.35, y: frame.minY + 13), controlPoint2: CGPoint(x: frame.minX + 168.5, y: frame.minY + 48.15))
rightColor.setStroke()
rightRingPath.lineWidth = 23
context?.saveGState()
//CGContextSetLineDash(context, 0, [247, 247], 2)
//context!.setLineDash(phase: <#T##CGFloat#>, lengths: <#T##[CGFloat]#>)
context?.setLineDash(phase: 0, lengths: [247,247])
//problem
rightRingPath.stroke()
context?.restoreGState()
//// leftRing Drawing
let leftRingPath = UIBezierPath()
leftRingPath.move(to: CGPoint(x: frame.minX + 11.5, y: frame.minY + 91.5))
leftRingPath.addCurve(to: CGPoint(x: frame.minX + 42.73, y: frame.minY + 28.82), controlPoint1: CGPoint(x: frame.minX + 11.5, y: frame.minY + 65.89), controlPoint2: CGPoint(x: frame.minX + 23.76, y: frame.minY + 43.15))
leftRingPath.addCurve(to: CGPoint(x: frame.minX + 90, y: frame.minY + 13), controlPoint1: CGPoint(x: frame.minX + 55.88, y: frame.minY + 18.89), controlPoint2: CGPoint(x: frame.minX + 72.25, y: frame.minY + 13))
leftRingPath.addCurve(to: CGPoint(x: frame.minX + 168.5, y: frame.minY + 91.5), controlPoint1: CGPoint(x: frame.minX + 133.35, y: frame.minY + 13), controlPoint2: CGPoint(x: frame.minX + 168.5, y: frame.minY + 48.15))
leftColor.setStroke()
leftRingPath.lineWidth = 23
context?.saveGState()
//context!.setLineDash(context, 0, [leftDashed, 247], 2)
//Problem
context?.setLineDash(phase: 0, lengths: [leftDashed,247])
leftRingPath.stroke()
context?.restoreGState()
//// Text Drawing
let textRect = CGRect(x: frame.minX + 7, y: frame.minY + 74, width: 11, height: 21)
let textTextContent = NSString(string: "L")
let textStyle = NSMutableParagraphStyle()
textStyle.alignment = .left
let textFontAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: UIFont.systemFontSize), NSAttributedStringKey.foregroundColor: UIColor.white, NSAttributedStringKey.paragraphStyle: textStyle]
let textTextHeight: CGFloat = textTextContent.boundingRect(with: CGSize(width: textRect.width, height: CGFloat.infinity), options: NSStringDrawingOptions.usesLineFragmentOrigin, attributes: textFontAttributes, context: nil).size.height
context?.saveGState()
context?.clip(to: textRect)
textTextContent.draw(in: CGRect(x: textRect.minX, y: textRect.minY + (textRect.height - textTextHeight) / 2, width: textRect.width, height: textTextHeight), withAttributes: textFontAttributes)
context?.restoreGState()
//// Text 2 Drawing
let text2Rect = CGRect(x: frame.minX + 164, y: frame.minY + 76, width: 11, height: 17)
let text2TextContent = NSString(string: "R")
let text2Style = NSMutableParagraphStyle()
text2Style.alignment = .left
let text2FontAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: UIFont.systemFontSize), NSAttributedStringKey.foregroundColor: UIColor.white, NSAttributedStringKey.paragraphStyle: text2Style]
let text2TextHeight: CGFloat = text2TextContent.boundingRect(with: CGSize(width: text2Rect.width, height: CGFloat.infinity), options: NSStringDrawingOptions.usesLineFragmentOrigin, attributes: text2FontAttributes, context: nil).size.height
context?.saveGState()
context?.clip(to: text2Rect)
//CGContextClipToRect(context!, text2Rect)
text2TextContent.draw(in: CGRect(x: text2Rect.minX, y: text2Rect.minY + (text2Rect.height - text2TextHeight) / 2, width: text2Rect.width, height: text2TextHeight), withAttributes: text2FontAttributes)
context?.restoreGState()
}

Answer 1

I draw it from "PaintCode" as an example, you can use paintcode to draw how you want it to be.
#IBDesignable class GaugeView: UIView {
#IBInspectable var leftPercentage: CGFloat = 0.708 {
didSet {
setNeedsDisplay()
}
}
#IBInspectable var otherPercentage: CGFloat = 0.206 {
didSet {
setNeedsDisplay()
}
}
override func draw(_ rect: CGRect) {
// Drawing code
drawCompareGauge(frame: bounds, leftPercentage: leftPercentage, otherPercentage: otherPercentage)
}
func drawCompareGauge(frame: CGRect = CGRect(x: 0, y: 0, width: 180, height: 92), leftPercentage: CGFloat = 0.708, otherPercentage: CGFloat = 0.206) {
//// General Declarations
guard let context = UIGraphicsGetCurrentContext() else { return }
//// Color Declarations
let leftColor = UIColor(red: 0.278, green: 0.757, blue: 0.749, alpha: 1.000)
let rightColor = UIColor(red: 0.557, green: 0.400, blue: 0.867, alpha: 1.000)
let otherColor = UIColor(red: 0.800, green: 0.320, blue: 0.320, alpha: 1.000)
//// Variable Declarations
let leftDashed: CGFloat = 247 * leftPercentage
let otherDashed: CGFloat = 247 * otherPercentage
//// rightRing Drawing
let rightRingPath = UIBezierPath()
rightRingPath.move(to: CGPoint(x: frame.minX + 11.5, y: frame.minY + 91.5))
rightRingPath.addCurve(to: CGPoint(x: frame.minX + 42.73, y: frame.minY + 28.82), controlPoint1: CGPoint(x: frame.minX + 11.5, y: frame.minY + 65.89), controlPoint2: CGPoint(x: frame.minX + 23.76, y: frame.minY + 43.15))
rightRingPath.addCurve(to: CGPoint(x: frame.minX + 90, y: frame.minY + 13), controlPoint1: CGPoint(x: frame.minX + 55.88, y: frame.minY + 18.89), controlPoint2: CGPoint(x: frame.minX + 72.25, y: frame.minY + 13))
rightRingPath.addCurve(to: CGPoint(x: frame.minX + 168.5, y: frame.minY + 91.5), controlPoint1: CGPoint(x: frame.minX + 133.35, y: frame.minY + 13), controlPoint2: CGPoint(x: frame.minX + 168.5, y: frame.minY + 48.15))
rightColor.setStroke()
rightRingPath.lineWidth = 23
context.saveGState()
context.setLineDash(phase: 0, lengths: [247, 247])
rightRingPath.stroke()
context.restoreGState()
//// leftRing Drawing
let leftRingPath = UIBezierPath()
leftRingPath.move(to: CGPoint(x: frame.minX + 11.5, y: frame.minY + 91.5))
leftRingPath.addCurve(to: CGPoint(x: frame.minX + 42.73, y: frame.minY + 28.82), controlPoint1: CGPoint(x: frame.minX + 11.5, y: frame.minY + 65.89), controlPoint2: CGPoint(x: frame.minX + 23.76, y: frame.minY + 43.15))
leftRingPath.addCurve(to: CGPoint(x: frame.minX + 90, y: frame.minY + 13), controlPoint1: CGPoint(x: frame.minX + 55.88, y: frame.minY + 18.89), controlPoint2: CGPoint(x: frame.minX + 72.25, y: frame.minY + 13))
leftRingPath.addCurve(to: CGPoint(x: frame.minX + 168.5, y: frame.minY + 91.5), controlPoint1: CGPoint(x: frame.minX + 133.35, y: frame.minY + 13), controlPoint2: CGPoint(x: frame.minX + 168.5, y: frame.minY + 48.15))
leftColor.setStroke()
leftRingPath.lineWidth = 23
context.saveGState()
context.setLineDash(phase: 0, lengths: [leftDashed, 247])
leftRingPath.stroke()
context.restoreGState()
//// leftRing 2 Drawing
let leftRing2Path = UIBezierPath()
leftRing2Path.move(to: CGPoint(x: frame.minX + 11.5, y: frame.minY + 91.5))
leftRing2Path.addCurve(to: CGPoint(x: frame.minX + 42.73, y: frame.minY + 28.82), controlPoint1: CGPoint(x: frame.minX + 11.5, y: frame.minY + 65.89), controlPoint2: CGPoint(x: frame.minX + 23.76, y: frame.minY + 43.15))
leftRing2Path.addCurve(to: CGPoint(x: frame.minX + 90, y: frame.minY + 13), controlPoint1: CGPoint(x: frame.minX + 55.88, y: frame.minY + 18.89), controlPoint2: CGPoint(x: frame.minX + 72.25, y: frame.minY + 13))
leftRing2Path.addCurve(to: CGPoint(x: frame.minX + 168.5, y: frame.minY + 91.5), controlPoint1: CGPoint(x: frame.minX + 133.35, y: frame.minY + 13), controlPoint2: CGPoint(x: frame.minX + 168.5, y: frame.minY + 48.15))
otherColor.setStroke()
leftRing2Path.lineWidth = 23
context.saveGState()
context.setLineDash(phase: 0, lengths: [otherDashed, 247])
leftRing2Path.stroke()
context.restoreGState()
}
I have changed the code to class and support latest xcode & swift. You can just place a this view on view controller to see the result and change leftPercentage animate gauge.
==============================
I have updated the code to display 3 different value as gauge, I hope this help you to figure it out. Please see below gif for this control in action.