swift 识别标签中显示的属性字符串中的图像点击

elcex8rz  于 12个月前  发布在  Swift
关注(0)|答案(2)|浏览(131)

我有一个属性字符串如下显示在一个标签。

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

字符串
标签显示This is a sample text with 'image' attached
如何识别点击图像(而不是文本)来执行操作?

busg9geu

busg9geu1#

  • 创建一个新的NSAttributedStringKey,用于标识图像附件。
  • 然后用图像创建一个NSTextAttachment,将其 Package 在NSMutableAttributedString中,并向其添加自定义属性。
  • 最后,将 Package 器添加到完整的NSAttributedString并附加一个NattapGestureRecognizer。
  • 然后,当在选择器上的JupapGestureRecognizer简单地寻找自定义标记。

大多数位的代码:

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

字符串
何时设置文本显示

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)


然后在由tap动作调用的函数中:

@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)")
        }

    }

}


从那里你知道点击是在图像中,你有图像框架内的坐标,所以你可以使用这种组合来找出图像中的点击位置。

7ajki6be

7ajki6be2#

您可以使用以下代码在UILabel中的属性字符串中实现图像点击功能。

**第一步:**以下函数用于将字符串转换为属性字符串,应用各种属性,如颜色变化、字体调整、添加图片等,并返回结果属性字符串。

func createAttributedStringWithImage(message: String, subText1: String) -> NSAttributedString {

    let mainAttributes: [NSAttributedString.Key: Any] = [
        .foregroundColor: Constants.primaryTextColor ?? UIColor.black,   // Change color as needed
        .font: UIFont(name: "Poppins-Regular", size: 14.0) ?? UIFont.boldSystemFont(ofSize: 14)  // Change font as needed
    ]

    let subTextAttributes: [NSAttributedString.Key: Any] = [
        .foregroundColor: Constants.primaryTextColor ?? UIColor.black,    // Change color as needed
        .font: UIFont(name: "Poppins-Bold", size: 14.0) ?? UIFont.boldSystemFont(ofSize: 14)  // Change font as needed
    ]

    let attributedString = NSMutableAttributedString(string: message, attributes: mainAttributes)
    let spaceString = NSMutableAttributedString(string: " ", attributes: mainAttributes)
    
    attributedString.append(NSAttributedString(string: subText1))

    var combinedText = message + subText1 + " "
    
    if let range = combinedText.range(of: subText1) {
        let nsRange = NSRange(range, in: combinedText)
        attributedString.addAttributes(subTextAttributes, range: nsRange)
    }
    
    // Add an image attachment after subText1
    let imageAttachment = NSTextAttachment()
    imageAttachment.image = UIImage(named: "ic_edit") // Replace with the name of your image
    
    let imageAttributedString = NSAttributedString(attachment: imageAttachment)
    // Line to add space before image
    attributedString.append(spaceString)
    
    attributedString.append(imageAttributedString)
    
    return attributedString
}

字符串

**第二步:**现在,我们需要将属性化字符串赋给一个UILabel,并在UILabel中添加一个点击手势识别器,具体代码如下:

let message = "We have sent the code verification to your email "
 let email = "[email protected]"
 let resultAttributedString = createAttributedStringWithImage(message: message, subText1: email)
 self.messageLabel?.attributedText = resultAttributedString
 self.messageLabel?.isUserInteractionEnabled = true
        
 let tapGesture = UITapGestureRecognizer.init(target: self, action: #selector(imageTapped(gesture:)))
 self.messageLabel?.addGestureRecognizer(tapGesture)

第三步:当用户添加点击手势后点击UILabel时,会调用以下函数。下面是imageTapped函数的实现,我们编写代码判断用户点击的是图片还是文字。

@objc private func imageTapped(gesture: UITapGestureRecognizer) {
    guard let label = gesture.view as? UILabel else {
        return
    }
    
    guard let attributedText = label.attributedText else {
        return // nothing to do
    }
    
    let location = gesture.location(in: label)
    let textStorage = NSTextStorage(attributedString: attributedText)
    let textContainer = NSTextContainer(size: label.bounds.size)
    let layoutManager = NSLayoutManager()
    layoutManager.addTextContainer(textContainer)
    textStorage.addLayoutManager(layoutManager)
    
    textContainer.lineFragmentPadding = 0.0
    textContainer.lineBreakMode = label.lineBreakMode
    textContainer.maximumNumberOfLines = label.numberOfLines
    
    let characterIndex = layoutManager.characterIndex(for: location,in:textContainer,fractionOfDistanceBetweenInsertionPoints: nil)
    
    if characterIndex < textStorage.length {
       
        guard NSTextAttachment.character == (textStorage.string as NSString).character(at: characterIndex) else {
            return
        }
        guard let attachment = textStorage.attribute(.attachment, at: characterIndex, effectiveRange: nil) as? NSTextAttachment else {
            return
        }
        
        if (attachment.image != nil){
            // You have clicked on image and write your code here you want to achieve on image tapped.
        }
        
    }
    
}

**最终输出:**以下是上述步骤的输出,您的标签将如下所示。


的数据

相关问题