WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Adopt Variable Color in SF Symbols

Adopt Variable Color in SF Symbols

SF SymbolsDesignSwiftUI
观看原视频

Highlight

SF Symbols 4 引入 Variable Color 特性，允许开发者通过百分比值控制符号中各图层的显隐程度，用同一个符号表达信号强度、进度、音量等动态数值，无需准备多套图标资源。

核心内容

以前要在 App 里展示信号强度、电池电量或音量变化，开发者需要准备 4-5 张不同状态的图标，然后在代码里根据数值切换图片。这套做法维护成本高，缩放时还容易模糊。

SF Symbols 4 的 Variable Color 把这个问题彻底简化了。系统提供了一批内置符号支持 Variable Color，你只需要传入一个 0 到 1 的浮点数，符号就会自动调整各图层的颜色深浅。

（01:09）Variable Color 的核心机制是：符号内部的部分图层被标记为”参与变量着色”。当传入百分比值时，这些图层按照从下到上的顺序依次激活。阈值在 0% 到 100% 之间均匀分布。

以麦克风符号为例。它的左侧有 4 个圆点，每个圆点位于独立的图层中。0% 时所有圆点都不显示；大于 0% 激活第一个；26% 及以上激活第二个；51% 及以上激活第三个；76% 到 100% 全部激活。这个行为跟系统 Wi-Fi 强度指示器完全一致。

（04:42）系统符号在 Monochrome、Hierarchical、Palette、Multicolor 四种渲染模式下都支持 Variable Color。你不需要为每种模式单独处理。

对于自定义符号，SF Symbols app 今年引入了 Unified Annotation（统一标注）。过去你要分别给 Hierarchical 和 Multicolor 创建两套图层结构，现在只需要创建一次，所有渲染模式共享同一套图层结构。

（07:46）在 Unified Annotation 中，你可以把某个图层设为 Variable Color，也可以把图层设为 Erase（在底层挖洞）或 Hidden（在特定渲染模式下隐藏）。导出自定义符号时记得选择 4.0 模板格式，这样才能携带 Variable Color 和 Monochrome 控制信息。

详细内容

系统符号的使用方式

在 SwiftUI 中使用带 Variable Color 的系统符号很简单：

import SwiftUI

struct SignalStrengthView: View {
    @State private var signalStrength: Double = 0.75

    var body: some View {
        Image(systemName: "wifi", variableValue: signalStrength)
            .font(.system(size: 48))
            .foregroundStyle(.blue)
    }
}

关键点：

  • variableValue 参数接受 0.0 到 1.0 的 Double 值
  • 系统会自动根据符号内部的 Variable Color 图层计算显示效果
  • 同一个 variableValue 在不同渲染模式下表现一致

自定义符号的 Variable Color 标注

在 SF Symbols app 中为自定义符号添加 Variable Color 的步骤：

  1. 打开自定义符号，切换到 Multicolor 渲染模式
  2. 把需要参与 Variable Color 的图层分离出来
  3. 在图层面板中选中这些图层，点击 Variable Color 按钮启用
  4. 图层在列表中的顺序决定了填充顺序：底部的先填充，顶部的后填充

（10:55）图层顺序很重要。假设你做了一个拼图方块符号，想让前面的 9 个小方块按顺序填充。你需要把这 9 个小方块分别放到独立的图层中，按填充顺序从下到上排列，然后全选并启用 Variable Color。

阈值计算规则

（05:07）系统把 0% 到 100% 均匀分配给所有参与 Variable Color 的图层。假设有 N 个图层：

  • 0%：所有图层都不激活
  • 大于 0%：第一个图层激活
  • 后续每个阈值间隔约为 100 / N

对于 3 个图层的情况，理论阈值是 33.3% 和 66.7%。系统会把这些值四舍五入到最近的整数百分比，然后要求再高出 1 个百分点才激活下一层。所以实际阈值变成 34% 和 68%。这个设计避免了浮点精度问题导致符号显示异常。

导出和兼容性

（14:54）导出自定义符号时选择 4.0 模板格式，才能保留 Variable Color 和 Monochrome 渲染控制信息。如果你已有去年标注的自定义符号，SF Symbols app 会自动升级到 Unified Annotation，Hierarchical 和 Multicolor 标注会被完整保留。如果需要支持旧平台，2.0 和 3.0 模板格式仍然可用。

核心启发

做一个直观的练习计时器

用自定义符号做一个拼图方块，把前面的 9 个小方块设为 Variable Color。计时器运行时，随着时间推移逐步增加 variableValue，方块逐渐填满。对于不认识数字的小孩，这种视觉反馈比文字更友好。入口 API 是 Image(systemName: variableValue:)。

给音乐播放器加一个动态音量图标

用 speaker.wave.3 符号配合 variableValue，把当前音量值直接映射到符号显示。用户拖动滑块时图标实时变化，不需要任何自定义图片资源。

在下载管理中用符号表达进度

用 arrow.down.circle 或自定义下载符号，把下载进度（0.0 到 1.0）传给 variableValue。下载完成时符号完全填满，视觉反馈比纯数字进度条更直观。

关联 Session

评论

GitHub Issues · utterances