Adding a CAShapeLayer around a button - ios

Question

I created a CAShapeLayer in the shape of a circle, and I want to add it around I button i have in the view. I am doing this instead of a border, due to animation purposes. I don't want a border around the button, I'd rather have a shape. This is how I am adding it, but for some reason, it is not adding the shape directly around the button.
This is my code to add the layer
recordLine = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: recordButton.center, radius: recordButton.frame.width / 2, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
recordLine.path = circularPath.cgPath
recordLine.strokeColor = UIColor.white.cgColor
recordLine.fillColor = UIColor.clear.cgColor
recordLine.lineWidth = 5
view.layer.addSublayer(recordLine)
This is how it is adding the line for some reason.

Answer 1

This is happening because you are adding Shape layer before rendering the autolayout Constrain properly.
Please add a single line before adding shape layer : self.view.layoutIfNeeded()
#IBOutlet weak var roundButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
roundButton.layer.cornerRadius = 50.0
roundButton.clipsToBounds = true
roundButton.alpha = 0.5
self.view.layoutIfNeeded()
let recordLine = CAShapeLayer()
let circularPath = UIBezierPath(arcCenter: roundButton.center, radius: roundButton.frame.width / 2, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: false)
recordLine.path = circularPath.cgPath
recordLine.strokeColor = UIColor.black.cgColor
recordLine.fillColor = UIColor.clear.cgColor
recordLine.lineWidth = 10
view.layer.addSublayer(recordLine)
}
Please check the reference image
This is working for me.

Answer 2

My button is programmatic. I had to add the the cashapelayer in viewDidLayoutSubviews
lazy var cameraButton: UIButton = {
let button = UIButton(type: .system)
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.lightGray
return button
}()
var wasCAShapeLayerAddedToCameraButton = false
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if !wasCAShapeLayerAddedToCameraButton {
wasCAShapeLayerAddedToCameraButton = true
cameraButton.layer.cornerRadius = cameraButton.frame.width / 2
addCAShapeLayerToCameraButton()
}
}
func addCAShapeLayerToCameraButton() {
let circularPath = UIBezierPath(arcCenter: cameraButton.center,
radius: (cameraButton.frame.width / 2),
startAngle: 0,
endAngle: 2 * .pi,
clockwise: true)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 10
view.layer.addSublayer(shapeLayer)
}

Answer 3

// try like this i hope it will work for you.
Note: Color and other properties change as your requirement
let shapeLayer = CAShapeLayer()
shapeLayer.backgroundColor = UIColor.clear.cgColor
shapeLayer.name = "Star"
let path: CGPath = UIBezierPath(arcCenter: recordButton.center, radius: recordButton.frame.width / 2, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
shapeLayer.path = path
shapeLayer.lineWidth = 5.0
self.layer.mask = shapeLayer