探索着色图形复杂功能

大家好 我是Jared McGann watchOS的工程经理

watchOS 5中 Apple发布了 新的Infograph表盘 带有图形元素

watchOS 6中的 图形元素有所改善 用新的调色 模式

任何带图形元素的表盘 都支持调色组件 下面几个例子就是 watchOS 6新的表盘样式 这些图形元素包括三种数据类型 仪表 文本 图形 系统改变了它们的色彩外观 我们分别来看

在色彩环境中 仪表显示为 纯色 而不是渐变色 （仪表的调色） 仪表的颜色由系统决定 根据用户选择的颜色 如果元素需要通过颜色 传递仪表上的信息 你就要重新考虑 如何将信息显示在元素中

（文本的调色） 文本在色彩环境中也是单色 它的颜色也是由系统决定的 根据用户选择的颜色

多色文本被简化成单色 如活动圆环所示

（图片的调色） 最后 在色彩环境中 图形颜色默认为不饱和

但我们有新的API提供替代图形

（数据提供程序） 在探索新API之前 我们退回一步 了解下数据提供程序 ClockKit 包括多个元素数据提供程序 这些程序管理 提供给ClockKit的数据 会在元素里展示

这是全彩图片提供程序

图片属性定义为全彩图片 由元素显示

然后是 accessibilityLabel属性 它是个简洁的标签 定义了图片的用途 如何将替代图片加入调色环境呢

WatchOS 6的 CLKFullColorImageProvider有新属性 tintedImageProvider 这是个可选项属性 可以单独将一个图形放入调色程序 如果不想降低全彩图片饱和度

这个属性的类型是 CLKImageProvider 选择这个类 是因为可以 同时提供单图形和双图形 给调色程序

下面来仔细看看 CLKImageProvider 从watchOS 2开始使用 首先是CLKFullColorImageProvider 它并不是CLKImageProvider的衍生 它们是完全不同的两个类 CLKImageProvider 这个类 管理元素中显示的模板图形 显示该元素的表盘 决定了图形的样式 以及使用什么颜色

第一个属性是单图形 就是单一模板图形 这是唯一必需的属性

下面是染色 在一些传统的元素环境中 该颜色是模板图片 在元素中的显示 而在图形环境中 染色是被忽略的 因为颜色由系统决定 并受用户色彩选择的影响

所以这里的双图形 包括了双重图片背景 和双重图片前景属性

传统元素在多彩环境中使用双图形 如图所示 而图形元素是在调色环境中 使用双图形 如适用 双图形优先于单图形

双图形包含一个前景图片 叠加在背景图片之上 两个图片都是模板图片 在传统元素中 色彩和着色属性 应用于背景图片 而白色用于前景图片 而在染色图形元素中 如上所述 着色是被忽略的 系统会决定前景和背景的颜色 基于用户的色彩选择

下面演示几个场景 看看图形如何显示在 染色图形元素中 首先是全彩图形的不饱和化 这里全彩图形的饱和度降低了 差不多为如右图中的灰度

代码上的操作 只要初始化 CLKFullColorImageProvider 无需tintedImageProvider 如图 若tintedImageProvider 属性为nil 系统显示不饱和的全彩图形

在其他场景中 可能需要替代图形 给调色环境 可能因为全彩图形的饱和度不够低 又或者某个标志的颜色不对

代码中要创建一个 CLKImageProvider 带上需要的单图片模板 然后提供 CLKFullColorImageProvider 初始化 和全彩图形 在全彩环境中 ClockKit会使用全彩图形 在调色环境中 CLKImageProvider提供的单图形 会被采用

值得注意的是 你也可以提供 同样的全彩图片 给tintedImageProvider 这个图片会被模板化 而不会被降低饱和度 这个技术被用于 许多标准的watchOS元素

最后 如果需要有替换性的双图形 在调色环境中

为此 需创建一个 CLKImageProvider 同时带有单图形和双图形模板 然后将这个对象带入 CLKFullColorImageProvider 初始化 和全彩图片 在染色环境中 ClockKit会决定 使用单图形还是双图形

这个图表来自 Human Interface Guidelines 涵盖了多种图形元素样式

这是调色后的样子

（划重点） 谨记 ClockKit 在调色环境下 会改变元素的外观 色彩图形元素的颜色由系统决定 根据用户的色彩选择 最后 我们提供的新API可以让你 提供替代性模板图形 在调色环境中显示

（更多信息） 如果你没有用过 或者想要学习一下 这些视频可能有用 网址 developer.apple.com