借助 Genmoji 将表情引入 App

探索如何在 App 中生动呈现 Genmoji。我们将介绍如何渲染、存储并传输包含 Genmoji 的文本。如果你的 App 拥有自定文本引擎，我们还会介绍一些相关技巧，帮助你添加对 Genmoji 的支持。

章节

资源

相关视频

WWDC24

下载

嗨我叫 Aaron 是一名工程师来自 Input Experience 团队很高兴今天能与大家分享一些激动人心的新方式帮助你通过表情符号增强 App 的表现力在这个讲座中我们将探讨表情符号体验的最近更新介绍用于发送自定表情符号的新 API 并了解如何在 App 中轻松地采用表情符号之后我们将深入了解兼容性注意事项甚至讨论一些自定文本渲染的高级用例表情符号无处不在有什么理由不用呢

表情符号富有表现力我常常可以用单个表情符号来替代整段文字

它们灵活多用如果一个表情符号无法清晰表达观点可以组合使用适当的表情符号完美表达

与文字结合使用时表情符号的效果甚至变得更好因为它们也是文本与图像不同表情符号是句子的一部分可以调整它们的展示效果来匹配周围的文字今年 Apple 推出了一系列更新让表情符号变得更加精彩其中包括经过更新的表情符号键盘不仅包含我们熟悉和喜爱的标准表情符号还结合了现在可以用作表情符号的个性化内容

这些个性化内容包括贴纸、拟我表情、动话表情以及 Genmoji 这是一种制作属于自己的表情符号的全新方式

这只狗真酷我知道有些人在想什么传统的表情符号实际上不是图像而是一个标准化的 Unicode 字符列表以纯文本形式发送由查看设备渲染成适当的图像并以设备自己的字体呈现就像任何其他文本内容一样另一方面像 Genmoji 这样的个性化图像是独特的光栅化位图无法用 Unicode 文本字符描述那么它是如何运作的呢我们推出了 NSAdaptiveImageGlyph 借助这个全新的 API 可以像使用标准表情符号一样使用 Genmoji 和其他个性化图像 NSAdaptiveImageGlyph 由标准图像格式提供支持采用正方形宽高比支持多种分辨率并通过其他元数据进行增强例如全局唯一且稳定的标识符用于实现可访问性的内容描述以及对齐指标这些指标可确保适当的图像布局和位置以便图像可以与常规文本一起使用或在常规文本旁边呈现适当的格式 Genmoji 可以单独使用也可以结合文本使用你可以为它们设置格式、进行复制和粘贴甚至作为贴纸发送出去

任何支持富文本的位置都支持 Genmoji 以及所有富有表现力的图像

下面我们来看看在应用程序中支持 Genmoji 有多么简单 NSAdaptiveImageGlyph 由富文本视区提供原生支持如果你的 App 已经支持富文本只需启用 supportsAdaptiveImageGlyph 即可轻松开始使用

在 iOS 上如果你的文本视区已经有 PasteConfiguration 或者目标操作是支持图像的粘贴操作那么你甚至不需要手动启用因为这些配置会默认启用针对 Genmoji 和自适应图像字形的支持在 macOS 上在文本视区中声明 importsGraphics 可实现相同的支持我们来看一个例子

我有一个 App 可以让用户创建和分享关于自己的宠物的回忆我们的主文本区域已经是一个富文本视区在我们的持久模型中由富文本数据提供支持因此这默认启用了 Genmoji 支持直接就能使用 Genmoji

之所以能够使用是因为 SecureCoding 和 Pasteboard 之类的所有系统序列化框架都已经过更新能够原生支持 NSAdaptiveImageGlyph 事实上如果你的文本内容已经由 NSAttributedString 提供支持那就什么都不用做了只需坐下来开始自我表达与处理任何富文本一样只需将文本视区的内容序列化为 RTFD 数据对象并将它存储在数据库中当需要再次显示内容时只需反向进行这个过程并使用之前存储的数据创建一个属性字符串就是这么简单虽然使用起来很简单但一定要记住 Genmoji 不是 Unicode 它们可能不适用于纯文本项目例如电子邮件地址和电话号码但用户创建的很多其他内容比如博文、标题和信息等就非常适合使用 Genmoji 可以通过图像字形支持栩栩如生地呈现这些内容例如我很想使用自定表情符号让这个标题更加醒目但数据目前存储为纯文本最终会与后端服务器共享从而显示在网页浏览器中我们可以怎么做？在使用纯文本或其他非 RTF 数据存储时一种解决方案是按照你目前为内嵌图像提供支持的相同方式来处理图像字形例如我们可以将 Unicode 附件字符存储在适当的文本位置同时在纯文本数据字段中引用图像字形的标识符并将图像添加到图像存储中请记住由于 contentIdentifier 是唯一且稳定的如果你已经存储了具有这个标识符的图像字形就不需要再次存储你可以查看本次讲座中附带的代码找到如何分解和重组这些属性字符串的示例做出这些变更后我现在可以将 Genmoji 添加到标题中并看到它显示在我们的主要条目以及列表中但如果使用的是我之前提过的网页界面该怎么处理呢？再简单不过了要以 HTML 格式显示图像应该使用之前我们用来转换为 RTFD 的相同的 data-from-range 方法但这次我们将请求 HTML 文档类型这将生成跨平台兼容的 HTML 这样一来像 Webkit 之类的支持“apple-adaptive-glyph” 类型的高级引擎将显示内嵌文本的图像就像显示标准表情符号一样对于不支持图像字形的引擎将改为显示这张备用图像请注意这里的备用文本源自 NSAdaptiveImageGlyph 的内容描述无论浏览器中最终显示哪个来源都会应用这个备用文本如果你的 App 使用通信通知你可以借助新的 UNNotificationAttributedMessageContext API 在通知中包含 Genmoji 和其他图像字形对于推送通知有效负载只需包含可带有图像字形的富文本表示我们建议你使用通知服务扩展来解析富文本、下载素材、创建带属性的正文以及更新通知内容只需使用包含图像字形的属性字符串来创建通知信息并将它作为 attributedContent 进行传递以创建上下文使用这个上下文来更新请求最终调用处理程序在了解 NSAdaptiveImageGlyph 的一些高级用例之前我们先来花点时间讨论你需要针对 App 考虑的重要的兼容性注意事项

就像这里显示的文本一样图像字形携带重要的语义如果无法正确传达这些语义可能会丢失或被更改因此在不受支持的上下文中必须格外谨慎地处理回退行为不要简单地丢弃这些重要信息这一点至关重要如果你的 App 不支持内嵌图像考虑使用源自 contentDescription 的文本表示对于更加根本性的不兼容问题可以考虑干脆不在不受支持的系统上打开这类文档

以 RTFD 格式存储的图像字形经过编码可向后兼容任何富文本视区包括那些不能感知图像字形的视区如果你在不受支持的环境中共享 RTF 文档比如旧版本的 App 或者在旧版操作系统上运行的 App 图像字形会自动回退为标准文本附件虽然开始使用 Genmoji 的最简单方式可能是启用富文本支持但采用第三方数据格式和完全自定文本引擎可以完全支持图像字形不仅所有 Apple 平台上的现有 UI 文本元素中都支持图像字形包括 TextView、内容可编辑的 WebView 和 SwitfUI.Text 还可以使用 TextKit 和 CoreText 等现有 Apple 框架构建自定文本引擎从而利用更新的文本渲染 API 为 Genmoji 提供自定解决方案对于自定排版解决方案 CoreText 提供了使用 NSAdadptiveImageGlyph 作为自适应图像提供程序的方法可以查询这个提供程序让它根据当前字体的规格提供适当的排版界限它还提供一种在当前上下文中的给定点渲染图像的方法我们来详细了解一下运作方式 CTFontGetTypographicBoundsForAdaptiveImageProvider 会返回直线布局所需的规格包括相对于基线上的图像字形原点的高级宽度当需要绘图时 CTFontDrawImageFromAdaptiveImageProviderAtPoint 会将图像放置在这些界限内就是这么运作的！

所有 Apple 平台上都提供的表情符号体验迎来了众多令人激动的变更这个讲座只是简要介绍了其中一些内容包括全新的表情符号键盘、使用 Genmoji 创建自定表情符号以及利用 NSAdaptiveImageGlyph 通过多种方式在 App 中支持富有表现力的图像无论是使用标准富文本视区还是管理完全自定的排版解决方案我都建议你查看最新 SDK 了解如何轻松地使用 Genmoji 在 App 中开辟自我表达的全新世界谢谢观看

3:30 - Enable support for NSAdaptiveImageGlyph in a UITextView

let textView = UITextView()
    textView.supportsAdaptiveImageGlyph = true

4:41 - Read and write attributed string for serialization

// Extract contents of text view as an attributed string
let textContents = textView.textStorage

// Serialize as data for storage or transport
let rtfData = try textContents.data(from: NSRange(location: 0, length: textContents.length),
              documentAttributes: [.documentType: NSAttributedString.DocumentType.rtfd])


// Create attributed string from serialized data
let textFromData = try NSAttributedString(data: rtfData, documentAttributes: nil)

// Set on text view
textView.textStorage.setAttributedString(textFromData)

6:08 - Decompose and recompose an attributed string

// Decompose an attributed string

func decomposeAttributedString(_ attrStr: NSAttributedString) -> (String, [(NSRange, String)], [String: Data]) {
    let string = attrStr.string
    var imageRanges: [(NSRange, String)] = []
    var imageData: [String: Data] = [:]
    attrStr.enumerateAttribute(.adaptiveImageGlyph, in: NSMakeRange(0, attrStr.length)) { (value, range, stop) in
        if let glyph = value as? NSAdaptiveImageGlyph {
            let id = glyph.contentIdentifier
            imageRanges.append((range, id))
            if imageData[id] == nil {
                imageData[id] = glyph.imageContent
            }
        }
    }
    return (string, imageRanges, imageData)
}
    
// Recompose an attributed string

func recomposeAttributedString(string: String, imageRanges: [(NSRange, String)], imageData: [String: Data]) -> NSAttributedString {
    let attrStr: NSMutableAttributedString = .init(string: string)
    var images: [String: NSAdaptiveImageGlyph] = [:]
    for (id, data) in imageData {
        images[id] = NSAdaptiveImageGlyph(imageContent: data)
    }
    for (range, id) in imageRanges {
        attrStr.addAttribute(.adaptiveImageGlyph, value: images[id]!, range: range)
    }
    return attrStr
}

6:30 - Convert NSAttributedString to HTML

// Converting NSAttributedString to HTML

let htmlData = try textContent.data(from: NSRange(location: 0, length: textContent.length),
               documentAttributes: [.documentType: NSAttributedString.DocumentType.html])

7:33 - Support Genmoji in communication notifications

func didReceive(_ request: UNNotificationRequest,
      withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {

  ...
  let message: NSAttributedString = _myAttributedMessageStringWithGlyph
  let context = UNNotificationAttributedMessageContext(sendMessageIntent: sendMessageIntent,
                                                       attributedContent: _message)    

  do {
    let messageContent = try request.content.updating(from: context)
    contentHandler(messageContent)
  } catch {
    // Handle error
  }
}

9:45 - Render NSAdaptiveImageGlyph in custom typesetting solution

// Find typographic bounds for image in NSAdaptiveImageGlyph

let provider = adaptiveImageGlyph

let bounds = CTFontGetTypographicBoundsForAdaptiveImageProvider(font, provider)

// Draw it at the typographic origin point on the baseline

CTFontDrawImageFromAdaptiveImageProviderAtPoint(font, provider, point, context)

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。