Swift - How to make UIButton tap Interaction only on the image attached and ignore transparent parts - ios

Question

I am creating buttons with different image shapes... Everything is working but if for example, a diamond shape is created, you can click on the transparent part of the button. I managed to set up the shadow to respect the shape of the button so it looks highlighted but how do I apply this so the transparent part of the buttons is ignored when interacted with?
I found some answers but I do not use paths to create the UIButton shape but an image on the UIButton.
Below is how to create one of my buttons and set the glow
extension UIbutton {
func createSquareButton(buttonPositionX: CGFloat, buttonPositionY: CGFloat, buttonWidth: CGFloat, buttonHeight: CGFloat, buttonTitle: String) {
let button = self
button.isUserInteractionEnabled = true
button.frame = CGRect(x: buttonPositionX, y: buttonPositionY, width: buttonWidth, height: buttonHeight)
button.setTitle(buttonTitle, for: .normal)
button.setTitleColor(UIColor.white, for: .normal)
button.setTitleColor(UIColor.black, for: .highlighted)
button.alpha = 1.0
button.titleLabel?.font = .systemFont(ofSize: 20)
button.backgroundColor = nil
button.tintColor = Style.PurpleColor
let image = UIImage(named: "Plain Square")
let imageView = UIImageView(image: image)
imageView.setImageColor(color: Style.PurpleColor)
button.setBackgroundImage(imageView.image, for: .normal)
button.setBackgroundImage(imageView.image, for: .selected)
button.setBackgroundImage(imageView.image, for: .highlighted)
}
}
func buttonGlow(sender: CustomBtn){
for button in buttonArray {
if button.UUIDtag == currentSelectedMarkerUUID {
sender.layer.shadowColor = button.tintColor.cgColor
sender.layer.shadowRadius = 15
sender.layer.shadowOpacity = 1.0
sender.layer.masksToBounds = false
} else {
let otherBtn = tmpButtonPicked(uuid: button.UUIDtag!)
otherBtn.layer.shadowColor = UIColor.clear.cgColor
otherBtn.layer.shadowRadius = 0
}
}
}
extension UIImageView {
func setImageColor(color: UIColor) {
let templateImage = self.image?.withRenderingMode(UIImage.RenderingMode.alwaysTemplate)
self.image = templateImage
self.tintColor = color
}
}

Answer 1

Thanks to Malik's help I solved the problem.
Firstly you need to implement the function below which recognizes what is the alpha value where you tap within the button.
func alphaFromPoint(sender: CustomBtn, point: CGPoint) -> CGFloat {
var pixel: [UInt8] = [0, 0, 0, 0]
let colourSpace = CGColorSpaceCreateDeviceRGB()
let alphaInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
let context = CGContext(data: &pixel, width: 1, height: 1, bitsPerComponent: 8, bytesPerRow: 4, space: colourSpace, bitmapInfo: alphaInfo.rawValue)
context?.translateBy(x: -point.x, y: -point.y)
sender.layer.render(in: context!)
let floatAlpha = CGFloat(pixel[3])
return floatAlpha
}
then I tweaked #IBaction to also receive the type of event. I then Added the code Malik mentioned to the #IBaction
#IBAction func mainButton(sender: CustomBtn, forEvent event: UIEvent){
let touches = event.touches(for: sender)
let touch = touches?.first
guard let touchPoint = touch?.location(in: sender) else {return}
let alphaValue = alphaFromPoint(sender: sender, point: touchPoint)
if alphaValue > 0 {
//Do Something if the alpha value is bigger than 0
}
}
If the value returned from the alphaValue variable is 0 then you know its transparent.

Answer 2

Swift 5 version alphaFromPoint function.
func alphaFromPoint(point: CGPoint) -> CGFloat
{
var pixel: [UInt8] = [0, 0, 0, 0]
let colorSpace = CGColorSpaceCreateDeviceRGB();
let alphaInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
let context = CGContext(data: &pixel, width: 1, height: 1, bitsPerComponent: 8, bytesPerRow: 4, space: colorSpace, bitmapInfo: alphaInfo.rawValue)
context!.translateBy(x: -point.x, y: -point.y);
self.layer.render(in: context!)
let floatAlpha = CGFloat(pixel[3])
return floatAlpha
}