Redraw CoreGraphics drawing when device orientation changed

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) 
        
    }