文本及文本交互的新功能

♪ ♪

James：大家好 我是来自 UIKit 的 James Magahern 今天 我将为你介绍文本 和文本交互的新功能 文本在所有 App 中 都发挥着至关重要的作用 并且是消费信息 和沟通交流的主要方式 今天 我们将为你提供更多工具 帮助你为 App 打造 更为强大的文本体验 无论你是从头开始 还是从高级抽象开始 接下来 我将为你介绍 打造文本体验的重大改进 以及如何在你的 App 中 充分利用这些改进 包括系统选择 UI 的变化、 UITextViews 中的 文本项目操作和菜单添加、 TextKit 2 中的列表和项目符号、 macOS 上的听写 UI 以及一些针对国际化的重要更新 首先 我们来谈谈 选择 UI 中的一些变化 我们所有的平台 都推出了全新设计的文本光标

在输入语言发生改变时 我们会显示内嵌的交互式切换器 在进行范围选择时 我们 会提供更符合人体工学的选择句柄 同时 我们还提供全新的放大镜 让光标可以在大段文字中 实现更轻松的定位 如果你的 App 使用 UITextViews 或 UITextFields 那么你便可以自动获取 这些新的 UI 此外 我们还会确保 使用 UITextInteraction 的用户 也能获取这些新的选择 UI 但如果你有一个用于显示文本的 高度定制的 UI 你便很难在执行中获取这些变化 尤其在你无法使用 UITextInteraction 时 出于该原因 我们在 iOS 17 中添加了 UITextSelectionDisplayInteraction 并且该功能只提供选择 UI 而不包含 UITextInteraction 中的手势 UITextSelectionDisplayInteraction 是一种新型的 UIInteraction 可以安装在任何 UIView 上 此外 你还必须提供一个对象 用于执行 UITextInput 协议 该协议定义了多个用于交互的方法 以便从你的视图中获取选择状态 接着 UITextSelectionDisplayInteraction 会为你代劳所有繁重的文本提取任务 并为你提供光标视图、光标配件 以及范围高亮和选择句柄 由于这些视图都可以进行替换 因此 你可以根据需要自定义行为 接下来 我们通过这个示例快速了解 如何在代码中实现该功能 首先 创建 selectionDisplayInteraction 并为其提供用于执行 UITextInput 协议的 文档对象 若适用 该视图会与你的视图相同 接着 只需将交互添加到 所要显示选择 UI 的视图中 该视图可以是容器视图 也可以是渲染文档的视图 如果选择状态发生改变 你只需要在交互中调用 setNeedsSelectionUpdate 交互便会更新所有视图 来反映新的选择状态 除了 UITextSelectionDisplayInteraction 我们还添加了一个新的 API 用于显示放大镜 该 API 可用于所有视图 UITextSelectionDisplayInteraction 或 UITextInput 无需使用它 我们建议你使用手势识别器 例如 UIPanGestureRecognizer 来驱动放大镜的更新 接下来 我们看看如何在代码中 管理 loupeSession 在使用平移手势识别器时 你需要在回调中 获取手势的位置和选择小组件 在本例中 小组件为光标视图 接着 如果手势开始了 调用 begin(at：)创建 新的 UITextLoupeSession 以提供放大的起始位置、 选择小组件以及坐标空间 然后 在手势四处移动时 在现有 loupeSession 中 调用 move(to：) 更新手势位置 最后 当手势识别器停止时 在 loupeSession 中 调用 invalidate 关闭放大镜 接下来 我来介绍一下文本项目操作 以及如何在文本视图中 使用这些操作显示菜单 当前 使用 UITextViewDelegate 中的新 API 可以让 UITextView 中的 文本项目交互更加个性化

利用这些新增功能 你还可以修改文本项目的主要操作 或显示菜单 比如此处翻译 App 中显示的候选菜单 在此之前 UITextView 允许开发者 通过 UITextViewDelegate 上的 shouldInteractWith API 禁用链接和附件中的 项目交互 在 iOS 17 中 现在你可以自定义 文本视图中文本项目的项目交互 UITextViewDelegate 中的 新增方法可以自定义主要操作 或为特定文本项目提供菜单 接下来 我们来快速回顾一下 文本项目的实质 以及如何将其整合到你的 App 中

文本项目表示支持项目交互的内容 其中包括 由 NSTextAttachment 表示的文本附件 以及 由 NSLinkAttributeName 表示的链接 现在 UITextItem 还支持 标记自定义文本范围来实现交互 为了标记范围以实现交互 你可以对表示所要实现交互 的文本范围的属性字符串 使用 UITextItemTagAttributeName 现在 借助这些新的 API 就有可能改变 与文本项目交互时的 默认轻点或菜单行为 例如 你可能希望将已知链接 重新定向到 App 内的现有视图 或想在文本的某部分 添加自定义菜单 为了继续禁止或禁用 主要操作或菜单 只需要在 menuConfiguration 或 PrimaryAction 委托方法中 返回 nil 即可 接下来 我会通过简短的代码示例 向你演示 如何在用户轻点 UITextView 内的 链接时显示菜单 你只需要执行 UITextViewDelegate 中的 menuConfigurationFor:defaultMenu: 方法 并返回所要展示菜单的 菜单配置即可 你还可以提供预览 作为菜单配置的一部分 与上下文菜单的其余部分一起显示 TextKit 2 还添加了 列表和项目符号支持 接下来 我会向你介绍 如何在 App 中充分利用这些支持 除了支持多种不同类型的项目符号 TextKit 2 还支持用罗马数字、字母 以及小数排序 以上每种都会根据设备 或 App 的配置区域 自动本地化 所以全球国际化功能已内置其中 接下来 我会通过简短的示例 向你演示如何开始使用 带有属性字符串的文本列表 在 NSParagraphStyle 上 使用 textLists 属性 定义应用有序列表的段落 接着 系统会根据类似换行符的 行终止符自动对项目排序 并且 UITextView 也会根据键入属性 自动填充段落样式 在 macOS Sonoma 中 听写的工作方式发生了重大变化 我们推出的新 API 可以帮助你 确保自定义文本元素 和新的设计相互契合 以下就是 macOS 14 中 全新听写指示器的工作方式 与在 iOS 上相同 听写会在说话时 出现拖尾的发光效果 在不说话时出现麦克风指示器

请注意观察 光标旁边的指示器 在滚动视图滚动之后会固定在 其边缘处 并会提供一个 返回文档当前位置的按钮 如果你在 AppKit 中使用类似 NSTextView 的标准文本控件 便可以立即获得该行为 如果你的 App 提供自定义执行 来显示插入点 那么你需要 进行一些操作来支持这种新行为 与 iOS 中的 UITextSelectionDisplayInteraction 类似 macOS 中也有一个新的 API 可以让你与系统选择 UI 保持一致 这样你无需绘制光标 只需要将 可以自定义的 NSView 子类 NSTextInsertionIndicator 放置于文本视图中 便可以指示光标位置 该指示器的外观支持自定义 你可以改变其颜色和大小 默认情况下 它会遵循当前的强调色 利用该指示器 支持听写效果会更加简便 你只需要根据要求进行配置 允许系统将恰当的视图 插入你的层次结构中便可实现 接下来 我将向你演示如何在 macOS 上 开始使用 NSTextInsertionIndicator 仅需创建 NSTextInsertionIndicator 视图 并将其作为子视图 添加到显示文档内容的视图中 完成此操作后 将 effectsViewInserter 设置为 block 来将系统视图 插入到文档的视图层次中 接着 系统便会 自动处理效果视图的定位 并确保其可以 随着插入指示器的移动而更新 如果你的自定义文本视图 放弃响应者状态 你需要确保将 displayMode 设置为 hidden 以隐藏光标

在插入文本时 如果输入源使用听写 帧的更新会自动显示为 带有发光效果的动画 如果你需要禁用发光效果 在 automaticModeOptions 中 删除 showEffectsView 选项即可 在用户的输入模式发生改变时 光标下方便会 水平显示一个效果视图 用来显示语言选择 UI 如果你需要重置该 UI 的位置 在 NSTextInputClient 的执行中 指定 preferredTextAccessoryPlacement 即可 系统会检查该属性值 来确定绘制该配件的位置 如果在听写期间 文本光标滚动到屏幕之外 系统便会再显示一个滚动指示器 来指示光标的相对位置 并提供返回听写位置的提示

为了确保你的自定义文本视图 支持该行为 你需要使用 NSTextInputClient 并执行 selectionRect 和 documentVisibleRect 的属性 调用 textInputClientWillStartScrollingOrZooming 以及 willEndScrollingOrZooming 你便可以告知系统 滚动的开始和结束 确保你的 App 在每种语言中 都能运行良好 对于为用户提供出色的文本体验 至关重要 为此 我们还对标准文本控件 进行了一些重要改进 提高了其在更多语言中的 可读性和人机交互性 此外 在 App 中支持动态类型 对于改善 每种语言的 UI 布局尤为重要 在对 App 中的文本元素进行布局时 除了考虑布局方向和字体样式 考虑到许多语言 可能具有可变的行高也很重要 在处理不同语言之间的可变行高时 遇到的常见问题是裁剪文本 这样不仅看起来很糟糕 还会直接影响可读性 并严重影响 App 的整体用户体验 这些问题有时很难注意到 尤其当你无法在每种语言中 测试 App 时更是如此 因此 我们对 UITextField 和 UILabel 之类的标准文本元素 进行了一些改进 以便在大多数情况下 自动解决该问题 但你还是需要遵循一些最佳实践 来确保系统避免裁剪这类元素 为了避免常见的裁剪问题 我们所有的平台现在可以 自动调整 UILabel 或 UITextField 中的行高 以适应具有高度动态行高的语言 但这种新行为只在特定情况下发生 首先 你需要知道行高目前 取决于设备配置的首选语言 其次 该调整会影响整个用户界面 并增加所有文本元素的行高 甚至包括具有固定行高的显示脚本 例如英语 这些脚本往往并不需要额外的空间 此做法用意在于 保证所有文本元素具有视觉一致性 最后 这种自动调整只适用于 使用文本样式的文本元素 自定义字体会继续使用固定的行高 该行为并不是全新的 在此之前 它已在一些版本中得到应用 但是 在 iOS 17 中 该行为更具动态性 并且可以同时根据文本样式 和使用语言实现准确调整

若想利用该行为 使用 preferredFont(forTextStyle:) 方法 显示创建 UIFont 来使用文本样式 并将该样式分配给 类似 UILabel 的文本元素 此外 避免在文本元素上 设置 clipsToBounds 对于类似泰语和印地语之类的语言 其升部和降部往往会超出行高边界 这种情况在大部分布局中 通常是可接受的 因为相邻元素周围总会有额外空间 但这意味着设置 clipsToBounds 将会导致这些文本元素受到裁剪 为此 UIKit 已进行更新 用以避免出现 默认启用此前不必要设置的情况 最后 你需要确保 UI 可以对高度变化做出响应 并使其他控件保持对齐 因为文本元素现在可以垂直变长 同时 我们还对中文、德文、日文 及韩文等语言的分行行为 进行了大量改进 这些改进会根据你当前在 UI 中 使用的文本样式以及显示的语言 应用不同的规则 例如 此前韩文文本中的单词 可能会被分为两行 现在 UIKit 可以避免 标题文本样式的分行 以确保提供更加流畅的阅读体验 为了将这种新行为的优点应用到 你的 App 中 使用类似的文本样式即可实现 以上便是你在 iOS 17 上 为你的 App 创建强大的文本体验 所需了解的全部内容

如果你的 App 正在使用 自定义文本视图 请确保使用系统选择 UI 以充分利用操作系统中的全新功能 在文本视图中使用文本项目 创建更好的链接交互 充分利用 TextKit 2 中 强大的新功能 来提供更为丰富的文本编辑体验 并且 在常见文本元素中 使用文本样式 从而确保为每位用户 打造出色的用户体验 而无需考虑语言类型 及首选文本的大小 以上就是本次讲座的全部内容 感谢你的观看 请务必给予五颗星并在下方留言 ♪ ♪