E04e5b08ce414da750b52fd1ee6ff726
WWDC20 10106 - Meet Scribble for iPad

前言

涂文字是在 iPad 上通过手写识别用 Apple Pencil 进行文本输入的新的奇妙方式。这是 iPad OS 更新的最有用的功能之一
在将涂文字引入 iPad 时,苹果希望可以大干一场,基于 Apple Pencil,涂文字被深入整合到了 iPad OS 中。你可以在任何文本框内进行书写而不是在一个单一的书写区域。涂文字成为了 iPad 功能的一部分,也就是说任何 APP 都可以像使用键盘那样使用涂文字的功能
本文将着重于涂文字的工作原理的阐述:有哪些支持涂文字的 API,如何自定义涂文字行为等,让你的 APP 有一个更美妙的书写体验

Overview

  • 绝佳的用笔体验:在你书写的过程中,笔迹会转录成文本,没有模式、没有点击,涂文字是系统体验的一部分
  • 支持任何可输入文本的地方:只要有输入框,图文字就能工作,就像键盘一样
  • 精准、私密:构建在一流的快速手写识别引擎之上,非常精准。涂文字完全在设备上运行,因此它随时可用且完全私密
  • 识别多种语言:可以识别手写的英文、中文简体以及粤语

Writing Experience

  • 涂文字使得键入文本更流程、更轻松(自动识别手写并转换)
=>

  • pencil 所在位置即为文本插入的位置(当网页上有很多信息需要填写的时候,这个功能就很有用)

  • 在列表下方空白区域书写以新增条目(提醒事项已经支持)

  • 手势编辑一次,四处可用(划条线选择文本、划掉文字删除文本等)

Pencil friendliness

  • 在 pencil 输入的时候,不展示占位文本

  • 输入时文本和文本框不滑动

  • 自动调整输入框大小,方便写长句

Supporting APIs



涂文字依赖于 iOS 现有的文本键入标准 API 以及 UIKit 文本键入基础架构,在 iOS 14 中,会引入两个新的 API 来允许自定义涂文字行为

  • 现有的文本键入 API

    标准控制:不仅包括文本框、文本视图以及从 UIKit 获得的搜索框,还包括标准可编辑 web 内容,比如通过 WebKit 访问的网页中的表单。这些都是现成的,它们与涂文字功能兼容得很好,它们是可以高度可定制的,能够适应你的 app 的外观等,建议开发者优先使用这些

注意⚠️ 涂文字不支持密码框,更建议通过自动填充来完成密码的输入

  • UIKit 文本键入基础架构(一套基础协议)
    如果你有自定义文本编辑经验,那么你必须实现一套协议,这些协议可以让你的视图可以使用键盘以及 iOS 文本键入系统,涂文字功能也依赖相同的 API 与文本视图进行交互
    实现 UITextInput 协议尤其重要,这是涂文字获取有关文本内容以及选项信息的方式,还建议开发者使用 UITextInteraction 从系统获取标准光标,选择用户界面,这样开发者就不必自己实现一套了(如果你对这些话题的更多详情感兴趣,请查看 2012 年和 2017 年全球开发者大会的精彩演讲)

UIScribbleInteraction

交互被添加到视图(文本框添加了 UIScribbleInteraction

交互有一个代理,这个代理是 App 可以自定义涂文字体验的地方

eg:在视图上禁用涂文字功能,推迟该视图成为第一响应者,直到手写暂时停止,或者只在在涂文字手写开始/结束的时候接到同志

  • 一些 App 中添加了字段联想的功能,比如 spot light,这个在使用涂文字功能的时候会在视觉上干扰手写

    这时候可以使用 UIScribbleInteraction 来处理:
// 判断是否在手写,是的话隐藏自动联想字段
func updateSearchCompletion() {
    customSearchField.hideCompletionText = interaction.isHandlingWriting
}
  • 需要知道是否支持手写或者手写是否完成来优化 app 用户界面的布局
    ```Swift
    // 使用 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
    }
    }
top Created with Sketch.