UIView within StackView - Position of Layers - ios

Question

I'm pretty new to Swift and coding in general. I'm trying to just create 4 simple grey circles that are positioned within 4 UIViews that are inside 2 stackViews...etc
With the 4 UIViews, I have them basically in a grid square in the centre of the screen, I'll add a screenshot for clarity below. At the moment, it seems to render the bottom circles quite far below the boxes that I have laid out in the XCode IB.
I've tried a few different ways of trying to get the circles positioned properly, but I've hit a brick wall and can't seem to work out why it's not working. I can get them to position properly if I add a UIView within the UIViews (Named 'topLeftBox', 'topRightBox'...etc). And whilst it's a simple work around, I'm just trying to understand why I can't just add the layers in the original 4 UIViews.
Any help would be much appreciated, and apologies in advance for the glaring Newbie mistakes!
Heres a screenshot of the output as the code stands now and also the XCodeIB:
XCode Storyboard
Grey Circles Simulator Output
And here is the code:
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var topLeftBox: UIView!
#IBOutlet weak var topRightBox: UIView!
#IBOutlet weak var bottomLeftBox: UIView!
#IBOutlet weak var bottomRightBox: UIView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
drawCircle(box: topLeftBox)
drawCircle(box: bottomLeftBox)
drawCircle(box: topRightBox)
drawCircle(box: bottomRightBox)
}
func createCircle(lineColor: UIColor, strokeEnd: CGFloat) -> CAShapeLayer {
let layer = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: .zero, radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
// Styling for the circular line
layer.path = circularPath.cgPath
layer.strokeColor = lineColor.cgColor
layer.fillColor = UIColor.clear.cgColor
layer.lineWidth = 10
layer.lineCap = kCALineCapRound
layer.strokeEnd = strokeEnd
layer.transform = CATransform3DMakeRotation(-CGFloat.pi/2, 0, 0, 1)
return layer
// Style the track
}
fileprivate func drawCircle(box: UIView) {
// Create Circles
let trackLayer = createCircle(lineColor: .lightGray, strokeEnd: 1)
box.layer.addSublayer(trackLayer)
trackLayer.position = box.center
}
}

Answer 1

Your problem is this line:
trackLayer.position = box.center
That is using the center of the box's frame which is in the coordinate system of its parent view. You need the center of the box in the coordinate system of the box itself (ie. its bounds).
Replace the line above with this:
trackLayer.position = CGPoint(x: box.bounds.midX, y: box.bounds.midY)