swift How to add view into layer correctly - ios

Question

I have a Gauge view. Here minimized code:
class GaugeView: UIView {
// MARK: PROPERTIES
private let labelFactory = LabelFactory()
/// Minimum value.
var minValue: Double = 0
/// Maximum value.
var maxValue: Double = 100
/// The thickness of the ring.
private var ringThickness: CGFloat = 30
private var startAngle: CGFloat = .pi * 3/4 + .pi/20
private var endAngle: CGFloat = .pi/4 + .pi * 2
private let points = 24
private lazy var ellipseLayer: CAShapeLayer = {
let layer = CAShapeLayer()
layer.contentsScale = UIScreen.main.scale
layer.fillColor = UIColor.clear.cgColor
layer.lineCap = CAShapeLayerLineCap.butt
layer.lineJoin = CAShapeLayerLineJoin.bevel
layer.strokeEnd = 0
return layer
}()
// MARK: DRAWING
override open func draw(_ rect: CGRect) {
addLayer(ellipseLayer)
drawBorderedLayer(&ellipseLayer)
let subView = buildCircleView(text: "1", size: 50)
addSubview(subView)
subView.snp.makeConstraints {
$0.size.equalTo(50)
}
}
private func drawBorderedLayer(_ subLayer: inout CAShapeLayer) {
let thickness: CGFloat = 30
let center = CGPoint(x: bounds.width/2, y: bounds.height / 2)
let radius: CGFloat = min(bounds.width, bounds.height) / 2 + 40
subLayer.strokeEnd = CGFloat((30 - minValue)/(maxValue - minValue))
subLayer.strokeColor = UIColor.white.cgColor
subLayer.frame = CGRect(x: center.x - radius - thickness / 2,
y: center.y - radius - thickness / 2,
width: (radius + thickness / 2 ) * 2,
height: (radius + thickness / 2) * 2)
subLayer.bounds = subLayer.frame
let smoothedPath = UIBezierPath(arcCenter: subLayer.position,
radius: radius,
startAngle: startAngle,
endAngle: endAngle,
clockwise: true)
subLayer.path = smoothedPath.cgPath
subLayer.lineWidth = CGFloat(thickness)
}
private func addLayer(_ subLayer: CAShapeLayer) {
if subLayer.superlayer == nil {
layer.addSublayer(subLayer)
}
}
private func addView(_ subView: UIView) {
if subView.superview == nil {
addSubview(subView)
}
}
private func buildCircleView(
text: String,
size: CGFloat) -> UIView {
let containerView = UIView()
let circleView = UIView(frame: .init(x: 0, y: 0, width: size, height: size))
circleView.layer.cornerRadius = size / 2
circleView.layer.borderWidth = 2
circleView.layer.borderColor = UIColor.white.cgColor
circleView.backgroundColor = Color.grayBackground
let label = labelFactory.make(withStyle: .headingH2,
text: text,
textColor: .white,
textAlignment: .center)
circleView.addSubview(label)
label.snp.makeConstraints { $0.center.equalToSuperview() }
containerView.addSubview(circleView)
return containerView
}
}
Image:
And I want to add circle view into the ellipse layer:
...
let subView = buildCircleView(text: "1", size: 50)
ellipseLayer.addSublayer(subView.layer)
subView.snp.makeConstraints {
$0.size.equalTo(50)
}
...
On screen displays just result:
How to add circle view correct way into ellipse. Like here:
Here my view controller:
class ViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .black
private let gaugeView = GaugeView()
gaugeView.layer.masksToBounds = false
gaugeView.setNeedsDisplay()
[gaugeView].forEach(view.addSubview(_:))
gaugeView.snp.makeConstraints {
$0.size.equalTo(300)
$0.center.equalToSuperview()
}
}
}