将照片选择器嵌入你的 App 中

♪ ♪

Justin： 大家好！我是 Justin 来自 Photos 团队 今天 我带大家了解一下 系统照片选取器新的改善之处 以及你可以在 App 中使用的 所有新的 API 我们在 iOS 14 中推出了 重新设计的选取器 UI 选取器有很多出色的功能 比如搜索和可缩放网格 更棒的是 你不需要申请 任何照片图库访问权限就能使用它 我们真心建议你尽可能用系统选取器 替代你的自定义选取器 API 使用起来也很容易 只需要几行代码 你就可以呈现选取器 并接收用户选择的图片 去年的讲座“照片选取器的新功能” 深入讨论了新的 API 在本节讲座中 我会重点介绍一下新的 API 你可以利用这些新的 API 在你的 App 中嵌入系统选取器 使得图片选取体验更加顺畅 之后我将介绍一下新的选项菜单 以及支持 高动态范围照片的最佳做法、 高动态范围视频和 电影效果模式视频

但在深入了解之前 我们先快速概括一下 选取器的访问模型

这是你刚才看到的选取器 即使它看起来在你的 App 中运行 但它实际上是在一个 渲染在你的 App 顶部 单独的进程中运行 你的 App 不能直接访问选取器 甚至不能截屏选取器的内容 只有用户实际选择的内容 才会传回你的 App 今年 我们给进程外选取器 提供了更多配置选项 新的“.photosPickerDisabledCapabilities”修饰符 允许你禁用某些选取器功能 这样你就可以使用 你自己版本的选取器 举个例子 如果你禁用选择操作 “取消”按钮和“添加”按钮 可以隐藏起来 新的“.photosPickerAccessoryVisibility”修饰符 允许你隐藏 选取器内容周围的附件 UI 如导航栏和工具栏

你甚至可以使用 标准的 SwiftUI 修饰符 如“.frame”和“.padding” 指定选取器的大小和位置 你可能想知道 “如果‘添加’按钮隐藏了 我的 App 如何在多选模式下 接收用户选择的内容资源呢？” 你现在可以把选择行为 设置为“.continuous” 来接收实时选择更新 最后 你可以使用新的 “.photosPickerStyle(.inline)”修饰符 把选取器嵌入到你的 App 里 而不是让它以单独列表的形式呈现

即使选取器嵌入到了 App 里 它仍然在一个单独的进程中呈现 有一些用户在看到 App 没有提示访问图库 就展示了所有照片时可能会担心 我们希望用户 在使用 App 时有安全感 所以首次显示嵌入式选取器时 登录 UI 会自动出现 说明你的 App 只能访问选中的照片 照片隐私提醒表明选取器是私密的 是在进程外的 如果你的 App 已经显示了全尺寸选取器 用户升级到 iOS 17 时 会出现一个可移除的横标 隐私设置 UI 更新了更详细的说明 此外 我们对图库 访问权限提示也做了一些更改 如果你想进一步了解 更多关于这些更改的信息 你可以观看讲座 “隐私保护的新内容” 现在我们回到实际的 API 我先介绍一下它们的用例 再详细解释每个 API 如果你想嵌入进程外选取器 你可以使用 “.photosPickerStyle”修饰符 如果你想在选取器周围 放置你自己的 UI 你可以使用 “.photosPickerAccessoryVisibility” 它还有一个可选参数 让你把附件控制在指定的边缘周围 默认值是所有边缘 如果你想替换你的选取器 来实现某些选取器功能 你可以使用“.photosPicker DisabledCapabilities”修饰符 最后 如果你需要实时调整 或响应选择更新 请确保把“selectionBehavior” 设置为“.continuous” 到底什么是附件呢？ 在 iOS 中 顶部附件是导航栏 底部附件是工具栏 在 iPadOS 和 macOS 中 主要附件是可见的侧边栏 顶部和底部附件与 iOS 相似 接下来我为大家介绍一下 可以禁用的选取器功能 以及它们如何影响选取器 UI

如果搜索功能禁用的话 搜索栏就会隐藏 如果集合导航禁用的话 相册选项卡功能就会隐藏 在 iPadOS 和 macOS 中 侧边栏也隐藏了 如果暂存区域禁用的话 工具栏按钮就会替换为状态标签 如果你在没有连续选择的情况下 禁用了选择操作 那么只有“取消”按钮会隐藏 “添加”按钮仍然可见 否则 你的 App 将无法接收任何用户选择 如果你把选择行为设置为 “.continuous” 那么这两个按钮都会隐藏 我们现在来看一下新的选取器样式 除了“.presentation”样式和 “.inline”样式 选取器还支持另一种 “.compact”样式 这就是默认的 “.presentation”样式 这是隐藏了所有附件的 “.inline”样式 这是“.compact”样式 单行选取器允许你将其嵌入到 可用垂直空间严重受限的更多位置 是时候做一个示例 连接所有的要点了 我已经制作了一个简单的 App 它能用文字描述注释图片 我来给大家演示一下它目前的功能 我可以让选取器显示为模态表单 选择一些图片 并添加一些描述 给大家做一下演示 我想把“选择照片”按钮 替换为嵌入式选取器 我来添加 “.photosPickerStyle(.inline)”修饰符 试一下

这起作用 但是看起来不是很好 我还是需要轻点“添加”按钮 才能更新列表 而且如果选取器调整了大小 工具栏就不会 扩展到设备的底部边缘

但是不用担心 只要稍作调整 看起来就会好很多 首先 由于选取器可以流畅地处理 安全区域嵌入问题 我就可以使用 “.ignoresSafeArea”修饰符 这样选取器就可以扩展到 屏幕底部的边缘 然后 我要确保 一旦我在选取器中选择了一张照片 列表就会更新 事实上 这改起来非常容易 我只需要把选择行为设置为 “.continuous”就可以了

由于现在列表是实时更新的 我不需要再保留导航栏按钮了 我可以使用 “.photosPickerDisabledCapabilities”修饰符 来移除它们

选取器现在功能齐全了 但是我想让它更美观一点

我认为我应该 把导航栏和工具栏隐藏起来 我还想让选取器有一个固定的高度 我可以使用 “.photosPickerAccessoryVisibility”修饰符 来隐藏导航栏和工具栏 像其他 SwiftUI 视图一样 调整选取器的高度

现在看起来棒极了 短短几分钟内 我更新了 App 来展示新的嵌入式选取器 我将构建并运行这个选取器 这样就能在真实的设备上测试它了 我可以使用可缩放网格 快速定位到我想选择的照片 选中的照片会 自动出现在我的 App 里 有了新的嵌入式选取器 App 的照片选择体验 得到了极大的改善

演示就到这里

我在演示中使用的是 iPhone 但是同样的 API 也适用于 iOS、iPadOS 和 macOS 除了 SwiftUI 同样的 API 也适用于 UIKit 和 AppKit App 我们再来看一下 UIKit 和 AppKit API 嵌入式选取器可以通过同样的 PHPickerConfiguration API 使用 你现在可以把“选择”设置为 “.continuous” 来选择加入连续选择行为 你也可以把“模式”设置为 “.compact” 把选取器配置为单行布局 你可以使用 “edgesWithoutContentMargins” 来隐藏导航栏等附件 使用“disabledCapabilities” 禁用某些选取器功能 在 SwiftUI API 中 你可以使用 “.photosPickerStyle(.inline)” 修饰符嵌入选取器 但是这里不同 你需要把它作为子视图控制器 添加到容器控制器里 你可以手动设置选取器框架 或使用自动布局约束 来调整选取器视图的大小和位置 添加子视图后 你只需要向选取器反馈这个信息

新的“PHPickerConfiguration.Update”API 允许你向用户展示时更新选取器 你也可以使用现有的 “deselectAsset”和“moveAsset”API 来取消选择或重新排序选中的图片 下面我再谈谈新的选项菜单 以及它如何影响你的 App 新的选项菜单让用户可以更好地控制 共享给 App 的内容 默认情况下 所有的图片元数据都包括在内 但是用户现在可以选择 删除敏感元数据 比如选中照片的位置

如果你使用的是“PhotosPicker”和 “Transferable”API 你就不需要做任何采用工作 来支持新的选项菜单了 同样地如果你使用的是 “PHPickerViewController”API 也不需要进行采用工作了 使用旧版 “UIImagePickerController”API 的 App 或者有完全图库访问权限的 App 不支持选项菜单 以上就是选项菜单的内容 现在我再来聊聊 如果你使用系统选取器的话 如何支持高动态范围图像、 高动态范围视频和电影效果模式视频 默认情况下 选取器会自动把 这些文件转码为兼容格式 比如 JPEG 但是转码后的文件可能不包含 原文件的所有信息 所以如果你想接收高动态范围内容 最好不要使用自动转码 你可以通过使用“.current”编码策略 以及请求通用内容类型 比如“.image”和“.movie” 获取原始格式的照片和视频 请求特定内容类型如“.jpeg” 仍可能对文件进行转码 即使我们把编码策略 设置为了“.current” 如果你想了解更多 支持高动态范围的相关信息 请观看今年的讲座 “让 App 支持高动态范围图像” 这里是一段 接收图像原始格式的代码示例 你可以看到“preferredItemEncoding” 设置成了“.current” “importedContentType” 设置成了“.image” 如果你选择了电影效果模式视频 选取器就会为你提供它的渲染版本 这个版本有它融入的所有深度效果 如果你想获得所有决策点 你需要请求照片图库访问权限 代替使用 PhotoKit 获取视频 如果你想进一步了解 更多关于电影效果模式视频的信息 请观看讲座 “让 App 支持电影效果模式视频” 总结一下 新的嵌入式选取器更加灵活 我也非常期待你会使用它做些什么 选项菜单能让用户更好地控制 共享的内容 所以除非确有必要 请尽量避免请求访问照片图库

感谢观看 祝大家编码愉快！ ♪ ♪