I want to create a clickable primitive (such as a circle or square) in my UI, but I couldn't find any other way than just simply putting an 'o' in the text of the button. I know that this is a really bad idea, but I'm new to Xcode and I know almost nothing about it. I would be really thankful if anyone could explain to me how to do it in a correct way. Thank you in advance!
I want to create a clickable primitive (such as a circle or square) in my UI,
Do you want to add an image in the button ?
and get this:
you can then change the image in code
You can also subclass button and make it IBDesignable.
The code of the class will look like this:
import UIKit
// Out of class, for IBDesignable
let circleImage = UIImage(named: "circle")! // create your own circle in resources
let squareImage = UIImage(named: "square")! // create your own square in resources
@IBDesignable
class ButtonWithImage: UIButton {
// Bool property ; you could also have an enum to select a shape
@IBInspectable public var isCircle: Bool = true
@IBInspectable public var image: UIImage?
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
image = circleImage
}
override init(frame: CGRect) {
super.init(frame: frame)
}
override func awakeFromNib() {
self.addTarget(self, action:#selector(buttonClicked(_:)), for: UIControl.Event.touchUpInside)
}
// --------------------- buttonClicked -----------------------------------------------------------------------
// Description: Switch from circle to square
// -------------------------------------------------------------------------------------------------
@objc func buttonClicked(_ sender: UIButton) {
if sender == self {
isCircle = !isCircle
if isCircle == true {
self.setImage(circleImage, for: UIControl.State.normal)
} else {
self.setImage(squareImage, for: UIControl.State.normal)
}
}
}
override func draw(_ rect: CGRect) {
image?.draw(in: rect)
}
}
A better code:
import UIKit
// Out of class, for IBDesignable
let circleImage = UIImage(named: "circle")! // create your own circle in resources
let squareImage = UIImage(named: "square")! // create your own square in resources
@IBDesignable
class ButtonWithImage: UIButton {
// Bool property ; you could also have an enum to select a shape
@IBInspectable public var isCircle: Bool = true
@IBInspectable public var image: UIImage?
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
image = circleImage
}
override init(frame: CGRect) {
super.init(frame: frame)
}
override func awakeFromNib() {
self.addTarget(self, action:#selector(buttonClicked(_:)), for: UIControl.Event.touchUpInside)
}
// --------------------- buttonClicked -----------------------------------------------------------------------
// Description: Switch from circle to square
// -------------------------------------------------------------------------------------------------
@objc func buttonClicked(_ sender: UIButton) {
if sender == self {
isCircle = !isCircle
if isCircle == true {
image = circleImage
} else {
image = squareImage
}
self.setNeedsDisplay()
}
}
override func draw(_ rect: CGRect) {
var leftRect = rect
leftRect.size.width = rect.height
image?.draw(in: leftRect)
}
}