Adopt Variable Color in SF Symbols

ハイライト

SF Symbols 4 では、可変カラー機能が導入されています。これにより、開発者は、シンボル内の各レイヤーの可視性をパーセンテージ値で制御し、同じシンボルを使用して、複数のアイコンリソースのセットを準備することなく、信号強度、進行状況、音量などの動的な値を表現できます。

主要内容

以前は、アプリで信号強度、バッテリー残量、または音量の変化を表示するには、開発者はさまざまな状態のアイコンを 4 ～ 5 個用意し、コード内の値に基づいて画像を切り替える必要がありました。このアプローチは維持にコストがかかり、スケーリング時にぼやける傾向があります。

SF Symbols 4 の Variable Color は、この問題を完全に単純化します。システムには、可変色をサポートするための組み込みシンボルが多数用意されています。 0 から 1 までの浮動小数点数を渡すだけで、シンボルが各レイヤーの色深度を自動的に調整します。

(01:09) 可変カラーの中心的なメカニズムは次のとおりです: シンボル内のいくつかのレイヤーは「可変カラーリングに参加している」としてマークされます。パーセンテージ値が渡されると、これらのレイヤーは下から上の順にアクティブ化されます。しきい値は 0% から 100% まで均等に配分されます。

マイクのシンボルを例に考えてみましょう。左側に 4 つのドットがあり、それぞれが別のレイヤーにあります。 0% ではドットは表示されません。 0% を超えると最初のものがアクティブになります。 26% 以上で 2 番目がアクティブになります。 51% 以上で 3 番目がアクティブになります。 76%～100%で全て発動。この動作は、システムの Wi-Fi 強度インジケーターとまったく同じです。

(04:42) システムシンボルは、モノクロ、階層、パレット、マルチカラーの 4 つのレンダリングモードで可変カラーをサポートします。モードごとに個別に行う必要はありません。

カスタムシンボルについては、SF Symbols アプリに今年統合アノテーションが導入されました。以前は、階層と多色にそれぞれ 2 セットのレイヤー構造を作成する必要がありました。これで、それらを一度作成するだけで済み、すべてのレンダリングモードが同じレイヤー構造のセットを共有します。

(07:46) Unified Annotation では、レイヤーを可変カラーに設定したり、レイヤーを消去 (最下層に穴を掘る) または非表示 (特定のレンダリングモードで非表示) に設定したりできます。カスタムシンボルをエクスポートするときは、可変カラーおよびモノクロ制御情報を保持できるように、必ず 4.0 テンプレート形式を選択してください。

詳細

システムシンボルの使用方法

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価値
システムはシンボル内の可変色レイヤーに基づいて表示効果を自動的に計算します。
同じvariableValueレンダリングモード間で一貫したパフォーマンス

カスタムシンボルの可変色の注釈

SF シンボルアプリでカスタムシンボルに可変色を追加する手順:

カスタムシンボルを開き、マルチカラーレンダリングモードに切り替えます。
バリアブルカラーに参加する必要があるレイヤーを分離します
レイヤーパネルでこれらのレイヤーを選択し、「可変カラー」ボタンをクリックして有効にします。
リスト内のレイヤーの順序によって塗りつぶしの順序が決まります。下のレイヤーが最初に塗りつぶされ、上のレイヤーが最後に塗りつぶされます。

(10:55) レイヤーの順序は重要です。パズルの正方形のシンボルを作成し、最初の 9 つの小さな正方形を順番に埋めたいとします。これら 9 つの小さな正方形を別のレイヤーに配置し、下から上に塗りつぶし順に配置してから、すべてを選択して、可変カラーを有効にする必要があります。

しきい値の計算ルール

(05:07) システムは、可変カラーに参加しているすべてのレイヤーに 0% から 100% を均等に分配します。 N 層があると仮定します。

0%: すべてのレイヤーが非アクティブです
0% より大きい: 最初のレイヤーがアクティブ化されます。
後続の各しきい値間隔は約 100/N

3 層の場合、理論上のしきい値は 33.3% と 66.7% です。システムはこれらの値を最も近い整数パーセントに四捨五入し、次の層をアクティブ化するには 1 パーセントポイント高い必要があります。したがって、実際のしきい値は 34% と 68% になります。この設計により、異常なシンボル表示を引き起こす浮動小数点精度の問題が回避されます。

エクスポートと互換性

(14:54) カスタムシンボルをエクスポートするときに 4.0 テンプレート形式を選択して、可変カラーおよびモノクロのレンダリング制御情報を保持します。昨年すでにカスタムシンボルに注釈を付けている場合、SF シンボルアプリは自動的に統合注釈にアップグレードされ、階層注釈と多色注釈が完全に保持されます。古いプラットフォームのサポートが必要な場合は、2.0 および 3.0 のテンプレート形式を引き続き使用できます。

重要ポイント

直感的な練習タイマーを作成

カスタムシンボルを使用してパズルの正方形を作成し、最初の 9 つの小さな正方形を可変色に設定します。タイマーが実行されている場合、時間の経過とともに徐々に増加しますvariableValue、広場は徐々に埋まっていきます。数字を知らない子供にとって、この種の視覚的なフィードバックは、テキストよりも親しみやすいものです。エントリーAPIはImage(systemName: variableValue:)。

音楽プレーヤーにダイナミックボリュームアイコンを追加します

使用speaker.wave.3シンボリックフィットvariableValue、現在のボリューム値をシンボル表示に直接マッピングします。カスタム画像リソースを使用せずに、ユーザーがスライダーをドラッグすると、アイコンはリアルタイムで変化します。

シンボルを使用してダウンロード管理の進捗状況を表現します

使用arrow.down.circleまたは、ダウンロードシンボルをカスタマイズし、ダウンロードの進行状況 (0.0 から 1.0) をvariableValue。ダウンロードが完了するとシンボルが完全に塗りつぶされ、視覚的なフィードバックは純粋なデジタルの進行状況バーよりも直感的です。