ios - UITextField 中的自定义图像，如 Venmo 应用程序

Question

我想知道 Venmo 如何将自定义表情符号放入其文本字段中。

当您复制这些图像并将它们粘贴到别处时，它们会显示为“:sunset:”、“:concert:”等。

所以我的猜测是 textField 委托(delegate)会检查与该模式匹配的任何文本(即“:concert:”)并将其替换为一个小图像。

所以我想知道如何将您自己的小 UIImageView 与其他文本放在文本字段中。

编辑:我现在考虑这也可能是一个 UITextView

Answer 1

屏幕截图中的文本输入几乎肯定是 UITextView 的自定义子类，在这里我将介绍一种方法来实现所需的结果。

这是一个简短的演示，将包含自定义图像的文本从一个 UITextView 复制到另一个:

首先，我们需要子类化 NSTextAttachment 以获得手头图像的文本表示，稍后我们将在复制时使用它。

class TextAttachment: NSTextAttachment {
    var representation: String?
}

现在，当我们创建包含图像的属性字符串时，我们会将所需的图像文本表示添加到附件中:

let attachment = TextAttachment()
attachment.image = UIImage(named: "1f197")
attachment.representation = ":anything-here:"

接下来，我们将子类化 UITextView 并覆盖在 UIResponderStandardEditActions 中声明的 copy(_:) 方法UITextView 实现。

class TextView: UITextView {
    override func copy(_ sender: Any?) {
        let selectedString = self.attributedText.attributedSubstring(from: self.selectedRange)
        let enumeratableRange = NSRange(location: 0, length: selectedString.length)

        let result = NSMutableAttributedString(attributedString: selectedString)

        selectedString.enumerateAttribute(NSAttachmentAttributeName, in: enumeratableRange, options: []) { (value, range, _) in
            if let attachment = value as? TextAttachment, let representation = attachment.representation {
                result.replaceCharacters(in: range, with: representation)
            }
        }

        UIPasteboard.general.string = result.string
    }
}

我们还可以覆盖一些其他方法，例如 cut(_:) 和 paste(_:)，但这超出了问题的范围。

最后，让我们将一些属性文本添加到自定义 TextView 的实例中，以查看其实际执行情况:

var textView: TextView // Create an instance however.

let mutableString = NSMutableAttributedString()
mutableString.append(NSAttributedString(string: "Text with "))
mutableString.append(NSAttributedString(attachment: attachment))
mutableString.append(NSAttributedString(string: " text attachment."))

self.textView.attributedText = mutableString

_{显然，在用户键入时将文本/表情符号/任何内容即时转换为附件会更直观。}