了解 iPad 的随手写功能

了解 iPad 的随手写功能

“随手写”功能借助 Apple Pencil 为 iPad 文字输入提供了一种轻巧、有趣且符合人体工程学的途径。探索用户可以怎样在app中运用“随手写”功能以及手写文本，手写文本既可使用标准文字输入控制，也可创造个性化文字输入体验。你将了解该功能与TextKit相融合的方式，以及何时应用新的 UIScribbleInteraction 和 UIIndirectScribbleInteraction 两大 API 为你的 app 创造令人愉悦且持续流畅的随手写体验。若想充分掌握本章节，需先熟悉 UIKit 文本输入控制，以及键盘输入技术。初次接触者，请先观看“iOS 的键盘输入”部分。若准备搭建个性化文本编辑器，须先熟悉 UITextInput 协议、TextKit，以及相关文本输入API。若想获取更多信息，建议查看“TextKit 最佳实践”以及“带来更好文本输入体验的关键”若要设计基于触控笔的互动指导，请查看“Apple Pencil 设计须知”。

资源
- Customizing Scribble with Interactions
- - 高清视频
  - 标清视频
相关视频

WWDC20
- 在你的 app 中支持硬件键盘
下载

你好欢迎来到全球开发者大会（认识一下 iPad 的涂文字）欢迎来到《认识一下 iPad 的涂文字》我叫 Daniel Gobera 我是 Pencil and Paper 团队的工程师稍后我的同事 Evan Long 会在我后面发言涂文字是在 iPad上通过手写识别用 Apple Pencil 输入文本的奇妙新方式在本视频中我们会看到涂文字工作原理的概述我们来看看哪些方面能使你有美好的书写体验我们会查看支持涂文字的 API 最后我们会看到一些关于如何自定义涂文字行为的例子以便你在 app 中获得最佳体验在将涂文字引入 iPad 时我们希望大干一场以 Apple Pencil 为中心涂文字被深入整合到系统中也就是说你可以直接在任何文本框内书写而不是在单独的书写区域（在任何文本框书写）转录在你书写过程中动态地发生没有模式没有点击就只是书写 iPadOS 上的涂文字是系统体验的一部分也就是说在默认情况下所有 app 都可以使用它就像键盘一样它可以用于任何可以输入文本的地方它构建在一流的快速手写识别引擎之上它非常准确并且完全在设备上运行因此它随时可用而且完全私密
它能识别手写的英文简体、繁体中文和粤语让我们来看看构成美好书写体验的各个方面的概述这会给你一套指南以确保你的 app 获得最佳涂文字体验
第一个重要方面是涂文字使键入文本更流畅、更轻松这里我们看到一个在地图中搜索的例子注意你可以直接开始书写而无需先点击字段如果你注意到 app 中有任何文本框不支持直接用涂文字书写必须先点击文本框则你应该采用我们稍后将展示的 API 涂文字很直接意思是 Pencil 的位置告诉系统文本应插入的位置我们现在看到的是在 Safari 浏览器中填写有多个字段的表单的例子注意你如何能轻松地从一个字段跳到另一个字段笔划转瞬即逝因为转录在你书写过程中动态地发生感觉就像是在用动作口述
第二个设计原则是一致性涂文字需要在任何你希望能输入文本的地方运作这里我们看到一个提醒事项中的例子列表中的每一项都包含通常可以编辑的文本因此很自然你可以开始在任何一项上书写我们注意到一些人觉得在列表下方的空白区域书写以创建新条目很自然这通常不是文本键入视图因此提醒事项采用了我们稍后将说明的 API 以允许在该区域书写这创造了一种轻松添加新提醒事项的好方法还有一小组人们只需要学一次的编辑手势它们在任何能用涂文字编辑文本的地方的工作方式都完全相同我们可以看到一个编写电子邮件的例子你可以画一条水平线来选取文本进行常规文本编辑操作你还可以划掉一些想删除的文本所有这些加起来创建了一个可靠且熟悉的交互模型我们最终的设计原则是适合 Pencil iOS 用户界面主要是为 Touch 而设计它真的很适合 Pencil 输入但你会注意到我们在几个地方进行了一些调整我想强调其中的一些调整让我们从减少干扰开始我们在这里看到的一个很好的例子是文本框中的占位符当你开始在有占位符的字段书写时它会消失以避免与笔划重叠这使字迹清晰可辨通过标准文本控件可自动获得该行为
稳定的布局意味着文本框和里面的文本在你书写时不应该移动或滚动举例来说你可能知道一些搜索框在聚焦时往往会改变位置这对键盘而言很好但在你试图用 Pencil 在里面书写时这可能是个问题
你在移动的搜索字段上书写时涂文字会检测到它会等你停下来才做出第一个响应并插入文本如果使用标准搜索控制器则可以自动获得该行为但如果你的自定义字段有类似的移动动画你需要告诉涂文字这一点而且你可以要求延迟对该字段聚焦以采用相同的行为
始终有足够的空间来书写也很重要一个好例子是消息 app 你会注意到屏幕角落附近的消息框空间真的不多只能写几个字
消息检测到你在用涂文字于是它调整了输入框的大小写更长的句子就轻松多了
我们知道很多 app 有类似的布局尤其是即时通讯 app 我们建议你通过我们稍后会展示的 API 应用相同的行为（提供支持的 API）让我们看看支持涂文字的 API 的概况一些现有的以及一些新的
涂文字依赖于 iOS 现有的文本键入 API 标准文本控件以及 UIKit 文本键入基础架构我们还将在 iOS 14 中引入两个新的 API 允许自定义涂文字的行为
我们先来谈谈现有的文本键入 API 标准文本控件诸如文本框、文本视图以及可从 UIKit 获得的搜索框它还包括标准可编辑 web 内容通过 WebKit 访问的网页中的表单好消息是所有这些都是现成的而且它们与涂文字很兼容我们建议你尽量用这些而且它们高度可定制可适应你的 app 的外观和感觉值得注意的是涂文字不支持密码框因为建议通过自动填充输入密码接下来是 UIKit 文本键入基础架构如果你有自定义文本编辑经验则有一套必须实现的协议使你的视图可以使用键盘和 iOS 文本键入系统
涂文字依赖相同的 API 与文本视图进行对话
良好彻底地实现 UITextInput 尤为重要
这是涂文字获取有关文本内容选项的信息的方式以及它将如何更改视图中的文本
我们还建议你用 UITextInteraction 从系统获取标准光标和选择用户界面这样你就不必实现你自己的如果你对这些话题的更多详情感兴趣请查看 2012 年和 2017 年全球开发者大会的精彩演讲现在 Evan 将向我们概述如何用新的 API 在你的 app 中自定义涂文字的行为谢谢 Daniel 正如 Daniel 提到的在使用标准 UIKit 文本控件时涂文字会正常运作但在有些情况下可能需要自定义涂文字体验要支持这些自定义我们在 iOS 14 中引入了 UIScribbleInteraction 和 UIIndirectScribbleInteraction
首先是 UIScribbleInteraction
交互被添加到视图在这里我们向文本框添加了 UIScribbleInteraction
交互有一个代理这个代理是 app 可以自定义涂文字体验的地方
例如在视图上禁用涂文字推迟该视图成为第一响应者直到手写暂时停止或只是在涂文字手写开始或结束时接到通知现在让我们来看看如何使用 UIScribbleInteraction 的一些实际案例一些 app 添加了在线完成字段例如聚焦的搜索字段这对键盘输入很有用但会在视觉上干扰手写
通过使用先前添加到该字段的 UIScribbleInteraction 可以检查视图当前是否在处理手写并相应地更新完成文本在这种情况下通过隐藏它要优化涂文字的用户界面布局我们需要知道手写是否可能或者是否已经完成
其中一个地方是在用户界面的初始外观或设置中在这里 app 使用 UIScribbleInteraction 的类属性 isPencilInputExpected 当属性为“真”时 app 使文本区域变大一些
而不是作为视图设置的一部分更改用户界面在用户通过代理方式 scribbleInteractionDidFinishWriting 完成书写后它还可以对其进行更新得注意的是在我们刚刚看到的两种方式中当用户不在书写时用户界面更改了一些 app 混合绘图和可编辑文本在这种情况下可以禁用涂文字以允许绘图这可以通过 ScribbleInteraction 的 shouldBeginAt 代理方式实现通过在 app 处于绘图模式时返回“假”
现在我们来看看 UIIndirectScribbleInteraction
正如 UIScribbleInteraction UIIndirectScribbleInteraction 也添加到视图该交互用于提醒事项允许在当前提醒事项列表下书写以创建新的提醒事项
这也是用于用户界面的交互会回应点击手势变为可编辑
而且该交互有一个代理该代理提供有关元素的系统信息元素是视图中可以写入的区域可以有多个元素而且元素的大小可能会有所不同让我们更深入地了解一下在示例 app 中如何使用 UIIndirectScribbleInteraction
我们的示例 app 允许在笔记本电脑背面添加雕刻该雕刻元素只有在点击后才可编辑我可以用手指点击建立了一个成为第一响应者的文本框我可以输入我的名字但如果我删除文本试着用 Apple Pencil 书写却不起作用这是因为雕刻字段本身不是可编辑的文本键入让我们添加 UIIndirectScribbleInteraction 以便在涂文字中实现这一点
要将雕刻区域字段显示为可写区域我们安装 UIIndirectScribbleInteraction
接下来我们需要实现说明可写区域的代理方式
首先要实现为所有可写元素提供标识符列表的代理方式
在这种情况下雕刻字段只有一个可写区域我们可以用标识符立即调用完成处理程序接下来我们需要提供关于元素位置的系统信息
这通过 frameForElement 代理方式实现可返回可以写入的较小区域但我们希望允许写入整个视图因此在这种情况下我们只返回边界
接下来我们需要处理系统要求我们聚焦支持文本键入的响应者的情况这通过 focusElementIfNeeded 方式实现
如果未建立文本框我们会创建它并将其添加至视图层次结构然后我们会确保建立的文本框成为第一响应者
最后用完成处理程序返回该文本框
系统所需的最后一条信息是标示某个特定元素是否被聚焦
在这种情况下我们只有一个字段如果我们有一个字段而且它是第一响应者我们将返回“真” 否则我们将始终返回“假”
如果我试着在雕刻区域写我的名字我可以做到
再回顾一下支持涂文字的 API 来自 UIKit 和 WebKit 的系统中的标准文本控件就可以涂文字也适用于实现文本键入协议的自定义文本编辑器要自定义涂文字这通过在 iOS 14 中添加的两个交互完成拿起 Pencil 用涂文字测试你的 app 看看你如何符合我们前面介绍的设计原则并用标准文本控件自动获得大多数这些行为将这些涂文字交互应用于最后的润色比如创造书写空间和允许在预期的地方使用涂文字感谢观看我们期待你的 app 在 iOS 14 中取得成功（2020 全球开发者大会）

func updateSearchCompletion() {
    customSearchField.hideCompletionText = interaction.isHandlingWriting
}

9:35 - UIScribbleInteraction.isPencilInputExpected

override func viewDidAppear(_ animated: Bool) {
    if UIScribbleInteraction.isPencilInputExpected {
        let lineHeight = textField.font?.lineHeight ?? 17.0
        let heightForScribble = lineHeight * 4.0
        heightConstraint.constant = heightForScribble
    }
}

9:51 - scribbleInteractionDidFinishWriting

func scribbleInteractionDidFinishWriting(_ interaction: UIScribbleInteraction) {
    let lineHeight = textField.font?.lineHeight ?? 17.0
    let heightForScribble = lineHeight * 4.0
    heightConstraint.constant = heightForScribble
}

10:08 - Should Begin

func scribbleInteraction(_ interaction: UIScribbleInteraction,
                         shouldBeginAt location: CGPoint) -> Bool {
    return !appIsInDrawingMode()
}

11:41 - Install UIIndirectScribbleInteraction in Engraving Field

override init(frame: CGRect) {
    super.init(frame: frame)
    indirectScribbleInteraction = UIIndirectScribbleInteraction(delegate: self)
    addInteraction(indirectScribbleInteraction)
    ...
}

11:48 - Request Elements

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 requestElementsIn rect: CGRect,
                                 completion: @escaping ([ElementIdentifier]) -> Void) {
    completion(["EngravingIdentifier"])
}

12:14 - Frame for element

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 frameForElement elementIdentifier: String) -> CGRect {
    return bounds
}

12:28 - Focus Element if Needed

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 focusElementIfNeeded elementIdentifier: String,
                                 referencePoint focusReferencePoint: CGPoint,
                                 completion: @escaping ((UIResponder & UITextInput)?) -> Void)
{
    if editingTextField == nil {
        createTextField()
    }
    editingTextField?.becomeFirstResponder()
    
    completion(editingTextField)
}

12:57 - Is Element Focused

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 isElementFocused elementIdentifier: String) -> Bool {
    // Indicate if our only element is currently installed and focused
    return editingTextField?.isFirstResponder ?? false
}

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

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC20