Swift: Rounded Buttons - swift

Question

I am following the following tutorial on how to round the sides of buttons:
https://blog.supereasyapps.com/how-to-create-round-buttons-using-ibdesignable-on-ios-11/
I have created a new Swift code file as it has suggested and entered the following code:
import Foundation
import UIKit
#IBDesignable class RoundButton: UIButton {
override init(frame: CGRect) {
super.init(frame: frame)
sharedInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
sharedInit()
}
override func prepareForInterfaceBuilder() {
sharedInit()
}
func sharedInit() {
refreshCorners(value: cornerRadius)
}
func refreshCorners(value: CGFloat) {
layer.cornerRadius = value
}
var cornerRadius: CGFloat = 15 {
didSet {
refreshCorners(value: cornerRadius)
}
}
}
I cannot see find the Corner Radius option in the "Identity Inspector" as shown in the animation on the website to create rounder buttons. Can someone please tell me what I did wrong? Greatly appreciate the help

Answer 1

You need to change the cornerRadius to the following, to include #IBInspectable:
#IBInspectable
var cornerRadius: CGFloat = 15 {
didSet {
refreshCorners(value: cornerRadius)
layer.masksToBounds = true // Could include this
}
}
#IBInspectable allows you to access the property within storyboards, the interface builder.
You could also include layer.masksToBounds = true, so the corners are sure to get rounded even if masksToBounds in the storyboard is unchecked. However, you cannot apply both rounded corners and a shadow at the same time, but there are many workarounds available.

Answer 2

You missed out adding the cornerRadius var:
#IBDesignable class RoundButton: UIButton {
#IBInspectable var cornerRadius: CGFloat = 15 { didSet { refreshCorners(value: cornerRadius) } }
override func awakeFromNib() {
super.awakeFromNib()
setupView()
}
.
.
.
.
}

Answer 3

It is my universal extension for UIView. You can move it to only for UIButton. Thus you can use 2 methods from interface to make rounded corners.
#IBDesignable extension UIView {
#IBInspectable var roundRadius : CGFloat {
set {
self.layer.cornerRadius = newValue
}
get {
return self.roundRadius
}
}
/// automatically set cornerRadius as half of height
#IBInspectable var isRounded : Bool {
set {
let radius = newValue ? self.frame.height/2 : 0
self.layer.cornerRadius = radius
}
get {
return self.isRounded
}
}
}