Recognise an image tap in attributed String displayed in a label

Question

I have an attributed string as below to be displayed in a label.

let someText = NSMutableAttributedString(string: "This is a sample text with")
let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named: "icon") 

let imageString = NSAttributedString(attachment: imageAttachment)
someText.append(imageString)
someText.append(NSAttributedString(string: "attached")
somelabel.attributedText = someText

The label displays This is a sample text with 'image' attached

How to recognize a tap on the image(not on the text) to perform an action?

score 4 · Answer 1 · answered Jan 28 '20 at 06:16

create a new NSAttributedStringKey that you'll use to identify the image attachment.
Then create an NSTextAttachment with the image, wrap it in a NSMutableAttributedString and add the custom attribute to it.
Finally add the wrapper to the full NSAttributedString and attach a UITapGestureRecognizer.
Then when in the selector on the UITapGestureRecognizer simply look for that custom tag.

Code for most bit :

extension NSAttributedStringKey {
static let imagePath = NSAttributedStringKey(rawValue: "imagePath")
}

when to setup the text display

let fullString = NSMutableAttributedString()    
let imageAttachment = NSTextAttachment()
imageAttachment.image = image

let imageAttributedString: NSMutableAttributedString = NSAttributedString(attachment: imageAttachment).mutableCopy() as! NSMutableAttributedString

let customAttribute = [ NSAttributedStringKey.imagePath: imagePath ]
imageAttributedString.addAttributes(customAttribute, range: NSRange(location: 0, length: imageAttributedString.length))

fullString.append(imageAttributedString)

then in the function called by the tap action:

    @objc func onImageTap(_ sender: UITapGestureRecognizer) {
      let textView = sender.view as! UITextView
      let layoutManager = textView.layoutManager

      // location of tap in textView coordinates
      var location = sender.location(in: textView)
      location.x -= textView.textContainerInset.left;
      location.y -= textView.textContainerInset.top;

      // character index at tap location
      let characterIndex = layoutManager.characterIndex(for: location, in: textView.textContainer, fractionOfDistanceBetweenInsertionPoints: nil)

      // if index is valid 
      if characterIndex < textView.textStorage.length {

        // check if the tap location has the custom attribute
        let attributeValue = textView.attributedText.attribute(NSAttributedStringKey.imagePath, at: characterIndex, effectiveRange: nil) as? String
        if let value = attributeValue {
            print("You tapped on \(NSAttributedStringKey.imagePath) and the value is: \(value)")
        }

    }

}

From there you know the tap was in the image and you have the coordinates inside the image frame, so you can use that combination to figure out where in the image was tapped.

it works fine in a case of text view but not in a label...tap is not getting detected exactly where attachment is — jayant rawat, Jun 29 '21 at 09:48

Recognise an image tap in attributed String displayed in a label

1 Answers1