Centering a CAShapeLayer within a UIView? - ios

Question

There are probably more than 5 questions just like this one, but none of them solve the problem.
I want to center a circle on a view. It's not happening despite trying all kinds of methods through similar questions like this one.
I'm not sure if this happens because I set the translatesAutoresizingMaskIntoConstraints = false. I tried playing around with the center and anchor points of the shape layer but crazy behavior happens. I tried putting this code in viewDidLayouSubviews. Didn't work. What else can I do?
colorSizeGuide is the view of which I'm trying to center my layer in.
func setupConstraints() {
// other constraints set up here
colorSizeGuide.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
colorSizeGuide.topAnchor.constraint(equalTo: view.topAnchor, constant: 30).isActive = true
colorSizeGuide.widthAnchor.constraint(equalToConstant: 30).isActive = true
colorSizeGuide.heightAnchor.constraint(equalToConstant: 30).isActive = true
}
func setupColorSizeGuide() {
shape.path = UIBezierPath(ovalIn: colorSizeGuide.frame).cgPath
shape.position = self.colorSizeGuide.center
shape.anchorPoint = CGPoint(x: 0.5, y: 0.5)
shape.strokeColor = (UIColor.black).cgColor
shape.fillColor = (UIColor.clear).cgColor
shape.lineWidth = 1.0
colorSizeGuide.layer.addSublayer(shape)
}

Answer 1

There are a few options you can do.
If you're not in a scrolling environment (e.g. tableView) use corner radius of half of the width of the rectangle on the view, then the view will be cropped to a circle - this is not particularly fast or customizable, but it gets the job done.
Playground Code:
import UIKit
import PlaygroundSupport
let frame: CGRect = CGRect(x: 0, y: 0, width: 100, height: 100)
let view: UIView = UIView(frame: frame)
view.backgroundColor = .magenta
view.layer.cornerRadius = frame.size.width / 2
PlaygroundPage.current.liveView = view
You can make your custom UIView subclass implement the layerClass method and return CAShapeLayer there. This will mean that self.layer of your view will actually be a shape layer. You can set a path of a circle there and there you go. If you want to center it in a view just make sure to use bounds coordinates of the view when defining the UIBezierPath.
Playground code:
import UIKit
import PlaygroundSupport
let frame: CGRect = CGRect(x: 0, y: 0, width: 100, height: 100)
let view: UIView = UIView(frame: frame)
PlaygroundPage.current.liveView = view
class ShapeView: UIView {
override class var layerClass: AnyClass { return CAShapeLayer.self }
override init(frame: CGRect) {
super.init(frame: frame)
(layer as? CAShapeLayer)?.fillColor = UIColor.red.cgColor
(layer as? CAShapeLayer)?.strokeColor = UIColor.green.cgColor
(layer as? CAShapeLayer)?.path = UIBezierPath(ovalIn: frame).cgPath
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
let sv = ShapeView(frame: frame)
view.addSubview(sv)
Make a non-view shape layer, by doing CAShapeLayer.init. Position your on your view in its layoutSubviews method (or viewDidLayoutSubviews if you're doing it in the view controller) and set a proper frame to the shape layer, like it was a view.
Playground Code:
import UIKit
import PlaygroundSupport
let frame: CGRect = CGRect(x: 0, y: 0, width: 100, height: 100)
let smallFrame: CGRect = CGRect(x: 0, y: 0, width: 10, height: 10)
let view: UIView = UIView(frame: frame)
view.backgroundColor = .magenta
PlaygroundPage.current.liveView = view
let sl = CAShapeLayer()
sl.path = UIBezierPath(ovalIn: smallFrame).cgPath
sl.fillColor = UIColor.red.cgColor
sl.strokeColor = UIColor.green.cgColor
sl.frame.origin.x = 30
sl.frame.origin.y = 30
view.layer.addSublayer(sl)