Large Content Viewer - 确保人人都能轻松阅读

大家好我是 Sommer Panage 我是 Apple 辅助功能团队 的工程经理 接下来我将会谈及 Large Content Viewer 这一功能将帮助那些 喜欢大号字体的用户 在这次演讲中你将会学习到 如何确保 App 内全部内容 都能适于每个用户阅读的方法

我们将首先概览一下 Large Content Viewer 以及其为什么重要 接下来我们将关注一些 能够让你在你的 App 中 使用这一功能的 API 最后我们将查看在 App 中 你可能会遇到的问题实例 以及如何解决它们 所以让我们先从一些背景说起

在我们谈及 Large Content Viewer 前 让我们先从动态类型 这一相关话题开始 动态类型是一个可以帮助你 定制系统内字体尺寸的功能 当你想在屏幕上显示更多内容 你可以将字体的尺寸调小 这一功能也可以帮助你 让屏幕上的字体变得更大更可读 默认状态下你可以 在七种不同的尺寸中选择

但当你进入辅助功能设置后

会有五个额外的尺寸供选择 这是非常重要的 使用这一功能的人并不只因为 他们想要不同的字体尺寸 他们这样做的原因是 需要更大的字体尺寸 来让自己的文本可读性更高 接下来让我们来看一下 动态类型是如何改变 iOS 的显示行为的 这里展示了手机 App 在默认字体 尺寸下的显示效果

如果我现在将字体设置为 辅助功能设置中的其中一个尺寸 文本的大小变大了许多 但你也许注意到了 文本在屏幕上占据的部分 并没有变得更大

比如可以看底部左侧的按钮 如果顾客将尺寸 调节到与我们在内容区域看到的 尺寸一样大时 他们不太可能看到 我们在标签栏中看到的字体 因为该尺寸还是太小 你可能也不能直接把图标 放在上面做补偿 然而我们并不想调大标签栏 因为这会使得 留给显示主要内容 的面积变得非常小 就像这一例子中的联系人名单 所以如果你想使用 更大的文本尺寸 我们允许你长按需要调节的按钮 来获得更大的版本 这是它的显示效果 你可以用手指在底部栏拖动 以获取这些按钮的内容 当你将手指拖动到 你想要点击的按钮上时 只需要松开手指 Apple 设备就会执行 点按按钮的操作 这就是我们称作 Large Content Viewer 的功能 这一功能允许视力不佳的用户 可以方便的使用像是标签栏 或是其他尺寸较小的 UI 让你的 App 在合适的时候 显示大功能内容查看器非常重要 如果你使用标准的 UIKit 栏 你就已经启用了 Large Content Viewer 功能 在之前你可能没有注意到 这是因为这一功能仅在 辅助功能设置中的尺寸时 才会体现出来 但如果你使用自定义栏 或者一些其他自定义的 UI 并且他们的尺寸较小的话 你可能需要在内部适配 API 来使得你的 UI 功能 与标准 UIKit 相符合 需要注意的是 这一功能只在你无法调大 自定义 UI 时使用

使用动态类型进行缩放时 Large Content Viewer 功能 将会被优先启用 但有的时候我们的栏不能缩放 让我们来看看如何在你的 App 中 支持 Large Content Viewer 这一功能 早前我已经说明了 如果你使用标准 UIKit 栏 Large Content Viewer 功能就会开启 但你可能还需要一些操作 来确保界面的美观

如果你的栏组件使用 PDF 图像 确保你检查了素材目录中 Preserve Vector 选择框 处于启用状态 这将确保你的图片 顺畅地放大为更大的尺寸 但如果你的图片按钮使用 PNG 这样不具备矢量数据 那在默认情况下 图片在预览框中的显示 就会变得模糊 想要修复这一情况的话 你需要提供更大尺寸的图像

使用具有更放大尺寸 性能的图像来建立 UI 栏项目 如果你需要调整位置 比如你想调节那些 在预览器内看起来没有处于 居中状态的图片位置时 你可以调节选项中的 大型内容图片尺寸 那当你需要使用自定义 UI 的时候 应该如何处理呢 在 iOS 13 之前 在 Large Content Viewer 中 直接拖动即可 现在我们添加了一些 API 让你可以得到与标准 UIKit 栏 相同显示方法的 UI 当你在自定义状态栏时 你首先需要做的事 是将状态栏里的按钮 指定为需要被显示的对象 接着 Large Content Viewer 就会 为每个指定的按钮请求 标题或是图片信息 如果你为这些按钮选定的是 标准 UIKit 类型 你将会直接得到这些信息

最后你还需要为 你自定义的状态栏 设定手势交互方式

全新的 UILargeContentViewerItem 协议指定了 Large Content Viewer 显示你的内容所需要的信息

而 ShowsLargeContentViewer 属性是你需要 用来标记你的状态栏按钮的属性 将需要在查看器中 显示的按钮的该属性设置为“true”值

接着你就可以指定 largeContentTitle 属性 和 largeContentImage 属性 你可以指定其中一项属性 也可以指定两个属性 如果你想要重复使用 别的小图标上的 PDF 图片 就将 scalesLargeContentImage 属性设置为“true”值即可 但正如我们早前在 UI 栏 对象中所看到的一样 你需要保存对应图像的矢量数据 最后如果你想要居中图像 你可以使用属性中的 largeContentImageInsets 选项

UIView 中已经预置了该协议 并且提供了对齐标志 所以在很多情况下 你可以使用设置属性而不是 建立子类来覆盖的方法 正如我们之前提到的是 确定的 UIKit 类 像是 UI 按钮及标签 将会返回其标题和图像的默认值 那就是你注释标签栏中 按钮的方法 接下来你还需要增加 标签栏本身的手势交互 增加交互方式的方法是 使用支持添加 拖拽及丢弃指令 相同的 addInteraction 方法 这里展示了 Large Content Viewer 是如何实现交互的方法 这里面有一些属性 在一个简易的情况下 你可以创建一个没有变元的实例 并且不需要更改任何其他属性 即可创建一个交互方法 但如果你的 App 有任何其他的 手势识别方法的话 你可能需要调整其行为

你可以为它提供委托 来得到替代它的粒度控制 你也可以利用 gestureRecognizer 属性 来设置与 App 内 其他手势识别方法的关联 最后如果你要检查 是否开启了 Large Content Viewer 你可以检查 isEnabled 属性 当然你可以通过关注通知 来查看其变化

这里有一些使用委托 来定制其行为的方式

首先你可以指定 用户将手指从部件上移开时 视图中要进行的操作 这一操作应该在用户 点击对应部件时完成 如果你不采用这一方法 并且使用例如 UI 按钮的 标准 UI 控制方式 默认情况下这里的操作将会是 发起一个内部弹起的事件 但如果你在这里进行 更多的自定义设置 比如其自带的点击弹出视图 你也可以采用这种方法 来实现你想要执行的行为 接下来介绍对 对象中特定坐标进行设定的选项 默认情况下对象 通过在视图层次结构上 递归调用事件内部的点 的方式被查询到 但如果你没有使用视图的话 这个方法就可能无效 所以这个方法让你 返回到特定点 所对应显示的对象

最后你应该决定该由 哪个 viewController 来控制 Large Content Viewer 这一功能 默认情况下 UIKit 将会尝试 选取一个你添加到 视图中的 viewController 交互 但如果该默认设置 在你的 App 上没有很好地工作 你可以在这里指定你想要的

至此我们讲解了 API 的内容 现在让我们来看看一些 说明其如何使用的例子

让我们先从一个简单的例子说起 你已经构建了一个自定义栏 但在栏内你是用的是 标准 UIKit 视图 这里我们有一个带有 UI 按钮和 UI 图标的栏

因为我们使用标准视图 我们需要做的是使用 showsLargeContentViewer 属性 来设定按钮和标签 在这里不需要设置标题或是图片 因为这些内容可以 从属性页面中找到 最后我们可以在不设定 任何属性的情况下对自定义栏 添加需要的手势交互 这就可以了

如果你的自定义栏除了 按钮之外还使用别的组件 你可能需要别的一些 API 我们先把你的按钮称为 MyButton 的自定义实例类 你可以覆盖原有的 Large Content Viewer 组件属性 来返回你所需要的结果 在这里我们将 showsLargeContentViewer 的返回值设置为“true” 将标题属性的返回值设置为 我们的文字

如果你的每个按钮图片 都有原始的矢量数据 你可以将数据指定为 Large Content Viewer 要显示的图像数据 只要确保 scalesLargeContentImage 的返回值为“true” 就可以让图像放大到正确尺寸

最后让我们来看 当你想要使用另外的手势识别时 应该如何处理的实例 在 Apple 的 Safari 浏览器 App 中 有这么一个经典例子 当你轻击返回按钮时 它会回到之前的页面 但如果你长按返回按钮 这一操作会打开 查看浏览历史记录的页面 Large Content Viewer 也可以 利用长按手势来启用 所以你应该如何使其同时工作 你绝对应该让两者同时生效 换种说法就是 让 Large Content Viewer 生效 来让用户知道按钮具有什么功能 而当用户查看了这些功能之后 此前长按按钮进行的操作 依旧可以被唤醒

要实现这一功能 首先需要增加已有 longPressRecognizer 属性的持续时间 这样我们就在执行后续操作前 给了用户额外的时间来查看 Large Content Viewer 显示的内容 你还应该确保持续时间 在用户更改设置后 进行更新 如果它们开始或者停止使用 辅助功能设置中的字体尺寸 那么持续时间也应该更新

接下来我们需要设置 UIGestureRecognizer 委托 给已有的 longPressRecognizer 属性

之后在你的委托回调里 你就能确保 已有的 longPressRecognizer 和 gestureRecognizer 两个属性 可以同时被 Large Content Viewer 识别出来 这样二者之间就不会 导致另一个功能不工作了

在这里我们可以看到 在实施了 Large Content Viewer 之后 我们的程序是如何表现的 如果在 Large Content Viewer 显示期间 我将手指松开 就可以进行返回操作 而当我长按一段时间之后 我依旧能够进入 浏览历史记录的页面 这就是如何让你的 App 适应那些喜欢大尺寸字体人群 但 UI 元素又需要保持 较小尺寸的方法 要注意的是你只能在 UI 元素无法缩放的时候 使用 Large Content Viewer 功能 为动态类型进行缩放 总会是更好的选择 所以如果你能使用这一功能的话 不要将 Large Content Viewer 作为 API 使用

最后如果你的自定义视图 还有别的交互方式的话 这些自定义视图 对于使用 Large Content Viewer 的用户 依旧可以生效 用这样的方法所有人都能够使用 你的 App 的这些功能了 这就是我要说的全部内容 感谢观看