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

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

There is no easy way to do it using images. You're better off using paths. If you're hell-bent on doing it this way, then I would recommend looking into manually finding out the touch point inside the button (https://stackoverflow.com/a/43042911/7842542) and then making the decision whether or not to action — Malik, Aug 27 '19 at 06:07

score 3 · Accepted Answer · answered Aug 29 '19 at 05:59

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.

score 0 · Answer 2 · answered Mar 06 '21 at 19:33

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
}

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

2 Answers2