Redraw CoreGraphics drawing when device orientation changed - ios

Question

I working on app where I want to make custom shape button like this below
for this I'm using coregraphics to draw that shape for button and here code of button
class RewardStepsButton: UIButton {
#IBInspectable var firstStep: Bool = true{
didSet{
if firstStep{
secondStep = false
thirdStep = false
}
}
}
#IBInspectable var secondStep: Bool = false{
didSet{
if secondStep{
firstStep = false
thirdStep = false
}
}
}
#IBInspectable var thirdStep: Bool = false{
didSet{
if thirdStep{
firstStep = false
secondStep = false
}
}
}
#IBInspectable var buttonColor: UIColor = UIColor.lightGray
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
let path = UIBezierPath()
let btnLayer = CAShapeLayer()
if firstStep{
path.addArc(withCenter: CGPoint(x: 5, y: 5), radius: 5, startAngle: .pi, endAngle: 3 * .pi / 2, clockwise: true)
path.addLine(to: CGPoint(x: self.bounds.width - 15, y: 0))
path.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height / 2))
path.addLine(to: CGPoint(x: self.bounds.width - 15, y: self.bounds.height))
path.addArc(withCenter: CGPoint(x: 5, y: self.bounds.height - 5), radius: 5, startAngle: .pi / 2, endAngle: .pi, clockwise: true)
path.close()
}else if secondStep{
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: self.bounds.width - 15, y: 0))
path.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height / 2))
path.addLine(to: CGPoint(x: self.bounds.width - 15, y: self.bounds.height))
path.addLine(to: CGPoint(x: 0, y: self.bounds.height))
path.addLine(to: CGPoint(x: 15, y: self.bounds.height / 2))
path.addLine(to: CGPoint(x: 0, y: 0))
}else{
path.move(to: CGPoint(x: 0, y: 0))
path.addArc(withCenter: CGPoint(x: self.bounds.width - 5, y: 5), radius: 5, startAngle: 3 * .pi / 2, endAngle: 2 * .pi, clockwise: true)
path.addArc(withCenter: CGPoint(x: self.bounds.width - 5, y: self.bounds.height - 5), radius: 5, startAngle: 2 * .pi, endAngle:.pi / 2, clockwise: true)
path.addLine(to: CGPoint(x: 0, y: self.bounds.height))
path.addLine(to: CGPoint(x: 15, y: self.bounds.height / 2))
path.close()
}
btnLayer.path = path.cgPath
btnLayer.fillColor = self.buttonColor.cgColor
self.layer.addSublayer(btnLayer)
self.bringSubviewToFront(self.titleLabel!)
if thirdStep || secondStep{
self.titleEdgeInsets = UIEdgeInsets(top: 0, left: 25, bottom: 0, right: 0)
}else{
self.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
}
}
}
now it works almost perfect when I run the application buttons draw on app same as I want see below
now the problem it that when I changed the orientation of device, shape of drawing button is same doesn't refresh.
so I googled it and try to find solution and lot of answer were use
setNeedsDisplay() method for this so I use that method also but problem is, it draw another shape or add another layer and not erase the previous one. see this
When app load
when landscape orientation
when again portrait
please give me solution or idea how to solve this mess, Thanks.

Answer 1

Dont add layer in draw() method as in calls every time you call setNeedsLayout or layoutifNeeded ... use to add them in common init()
self.layer.addSublayer(btnLayer)
remove this line from draw() method
//MARK:- initializers
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
private func commonInit(){
self.layer.addSublayer(btnLayer)
}