为 Apple Watch Series 4 开发复杂功能

ClockKit 框架允许你 在表盘上显示 App 的数据 这些区域被称作复杂功能 复杂功能使人们 与他们最喜欢的 App 连接 仅需手腕轻轻抬高 就能全天为他们提供信息 复杂功能也可以通过轻点 快速进入 App 在 Apple Watch Series 4 中 我们为 ClockKit 增加了复杂功能的新特性 它允许你为全新的 Infograph 和 Infograph Modular 表盘 创建迷人的全彩复杂功能 在 Infograph 表盘上 这些新的复杂功能可以延伸到 这块出色的全新显示屏中的各个角落 在 Infograph Modular 表盘上 你可以在表盘的正中间 用全彩显示更多的 App 信息 用全彩显示更多的 App 信息 复杂功能被分为不同组分 它们决定了信息显示在屏幕上的方式 在 Apple Watch Series 4 中 我们新增了 4 个组分 Graphic Corner Graphic Circular Graphic Bezel 以及 Graphic Rectangular 每个复杂功能组分都使用系统定义的模板 来确定信息的布局方式 就像这里看到的 Graphic Circular 有许多模板供你选择以显示数据 有许多模板供你选择以显示数据 每个复杂功能组分模板 都由数据提供程序类的不同组合组成 分别为 ClockKit 框架中 文本 图像以及全新的量表提供程序 对于 Infograph 和 Infograph Modular 表盘 我们新增了一个全彩图像提供程序 和一个量表提供程序 让我们一一进行了解 首先是全新的量表提供程序 量表提供程序允许你以不同的方式 向用户显示已完成的进度或范围内的值 具体取决于你使用的复杂功能模板组分 你还可以使用时间间隔量表 在值发生变化时自动对其进行动画绘制 正如你在这里看到的计时器复杂功能 对于量表提供程序你可以提供一种颜色 也可以提供一种渐变 指定沿着量表的渐变颜色 你还可以指定颜色或渐变 是否会随着数据的进展而填充量表 或者如果它是一个范围 是否使用一个环来表示值 接下来我们看一下图像提供程序 图像提供程序允许你显示可着色图像 或者单一颜色图像用于现有的表盘 也可以在 Infograph 和 Infograph Modular 表盘上 显示全彩图像 最后看一下文本提供程序 它允许你在各种模板中使用文本 它们可以用来显示文本 日期 时间 时间范围 甚至在两个日期或时间之间自动倒计时 在一些复杂功能组分模板中 你现在还可以同时使用多个文本提供程序 每个提供程序都有自己的颜色 以创建一个多用途字符串 如果你的 App 有针对不同数据块的特定名录 这将非常有用 现在你已经熟悉了量表 图像和文本提供程序 接下来让我们看看 Infograph 和 Infograph Modular 表盘上可用的 新的 Graphic 复杂功能组分模板 并学习如何组合提供程序 以不同的方式显示数据 第一个新的复杂功能组分模板 是 Graphic Corner 它可以在 Infograph 表盘上使用 这个模板沿着显示区域的角落弯曲 从而显示了比以往更多的内容 Graphic Corner 模板有一些 不同的提供程序组合可供使用 你可以使用附带文本的量表提供程序 附带图像的量表提供程序 一系列文本提供程序 或者附带图像的文本提供程序 最后 你还可以使用全彩图像提供程序 为了与其他 Graphic Corner 复杂功能保持一致 建议你使用能够围绕 显示区域弯曲的提供程序 好的 让我们来看一个代码示例 它演示了如何使用附带文本的量表提供程序的 创建一个 Graphic Corner 复杂功能 让我们做一个类似天气 App 的小程序

首先 我们需要使用我们的设计程序 以获得文本颜色的一些值 在本例中 我们使用文本分别显示高 低和当前温度 我们还需要一个数值组 将颜色构成渐变 这里 我们要用三种颜色 一个用于低温 一个用于范围的中值 一个用于高温 watchOS 将处理好颜色之间的渐变 因此我们需要提供的 唯一额外信息是一个数值组 用于表示每种颜色应该位于量表上的什么位置 现在我们有了所有的值 我们需要创建 Graphic Corner 复杂功能模板 我们将使用量表提供程序和文本提供程序 创建一个 Graphic Corner 复杂功能 因此我们将创建 GraphicCornerGaugeText 模板的一个实例 当我们创建好了模板实例 我们就需要为它创建提供程序 从量表提供程序开始 这里我们使用 CLKSimpleGaugeProvider 样式可以是一个环 它在量表值周围显示一个环 如果你想在量表内填充进度的话 也可以显示填充 这里我们使用环的样式 接下来 我们将量表的颜色 设置成之前创建的渐变颜色 同时设置量表颜色位置 它将定义不同颜色沿着量表的位置 最后 我们需要设置填充分数 这将设置该量表的当前值 它应该是动态的 并且取决于你的数据 接下来 我们设置 cornerTemplate.gaugeProvider 属性 并为模板设置各种文本提供程序 这是我们在前面的代码中 用不同颜色分别创建的 剩下的就是传递完整的模板 来创建时间轴条目 看起来很棒 你可以看到颜色之间的渐变 是由系统处理的 环上的当前值位于 环形量表提供程序的中心 接下来 让我们看看 Infograph 和 Infograph Modular 表盘上 可用的 Graphic Circular 复杂功能组分模板 Graphic Circular 模板提供了 将量表提供程序与文本提供程序 结合在一起的功能 你可以在量表结束时显示一个数值 也就是开环量表 你还可以在开环量表中 创建一个中心文本值下方的文本模板 也可以在开环量表中 使用一个在中心文本下方的全彩图像提供程序 使用闭环量表 你可以在量表或文本内部 提供一个全彩图像 最后 你也可以使用全彩图像 来表示整个复杂功能区域 在前面的示例中 我们创建了一个表示天气数据的 Graphic Corner 复杂功能 现在 让我们使用相同的数据 并使用一个带有文本的开环量表 创建一个 Graphic Circular 复杂功能 我们将使用的文本提供程序渐变颜色 和渐变颜色位置 与我们在 Graphic Corner 复杂功能中 使用的相同 主要的不同之处在于我们需要实例化 Graphic Circular 的开环量表文本模板 我们将像上次那样创建量表提供程序 另一个更改是 我们将为模板 设置 centerTextProvider 属性 在 Graphic Circular 模板中 这是一个外部文本提供程序 完成了 现在我们创建好了我们的 Graphic Circular 复杂功能 但是关于 Graphic Circular 复杂功能 还有很多地方值得我们探讨 在 Infograph 表盘上 还有一种组分叫做 Graphic Bezel 它利用了一个 Graphic Circular 复杂功能 并向其添加了一个文本提供程序 以便在时间边框内包装文本 首先 我们先创建一个 Graphic Circular 复杂功能 在这个例子中 我们将使用在上一个示例中 刚刚创建的那个复杂功能 在配置了 Graphic Circular 模板之后 我们将创建 GraphicBezelCircularText 模板的实例 它需要一个配置好的 Graphic Circular 模板 和边框文本的文本提供程序 这里 我们只是为示例硬编码一些值 最后 你需要为复杂功能的时间轴条目 传递配置的 Bezel 模板 这就是我们已经完成的 Graphic Bezel 复杂功能 文本将自动沿着边框弯曲 并显示为大写 边框文本在被截断之前 可以填充近 180 度的边框 最后一个复杂功能组分 就是 Graphic Rectangular 它可以应用在 Infograph Modular 表盘上 这个组分的模板可以让你创建一个 全彩色的图像填充表盘的中间部分 这个模板还包含一个文本提供程序 这个图像应该是高度可视化的 并且不依赖于文本来显示要传达的信息 Graphic Rectangular 模板 允许一个更为传统的配置 它可以运用多种文本提供程序 除此之外 你可以在标题文本旁边使用图像 你也可以使用一个模板来展示一个量表提供程序 无需第 3 行的文本 这十分有利展示进度的变化 让我们创建一个 Graphic Rectangular 模板 使其可以提供一个标题文本 以及一个在其下的大的全彩图像 首先 我们需要实例化 我们的 Graphic Rectangular 大图像模板 下一步是使用我们的标题文本 创建一个文本提供程序 同样 它也可以是由多个文本提供程序 组成的文本提供程序 最后 我们使用表示数据的图像 创建一个全彩图像提供程序 在你为全新的 Infograph 和 Infograph Modular 表盘制造复杂功能时 有一点需要记住 更新次数将是定值 这意味着你将在 24 小时内获得 50 个复杂功能的推送更新 如果你的 App 利用后台 App刷新 或者是你的 Apple Watch 上 最近使用的 App 那么它每小时都有更新的可能 当你使用 Graphic Circular 和 Graphic Rectangular 组分时 请注意在获取数据 处理数据和呈现图像时 存在潜在的 CPU 和更新时间阈值 因此要快速完成这项工作 对于全彩图像提供程序 需使用可访问标签属性 为使用 VoiceOver 的人们提供有意义的信息 对于只使用图像的 Graphic Circular 模板 这一点特别重要 因为它没有附带的文本 同理于 Graphic Rectangular 大图像模板 因为它允许展示大量的数据 关于使用 ClockKit 框架 创建新的 Graphic 复杂功能的更多信息 请访问 developer.apple.com 并阅读 Apple 开发文档 “人机界面指南”中的 watchOS 草图和 Photoshop 资源 也为 Apple Watch Series 4 和 watchOS 5 进行了更新 此外 Graphic 复杂功能组分中的 每个模板的大小规范都显示在这里 你也可以在 developer.apple.com 的 “人机界面指南”中找到