ColorManager - Tai-Kimura/SwiftJsonUI GitHub Wiki

ColorManager

SwiftJsonUI 7.2.0で導入された色管理システム

概要

ColorManagerは、JSONレイアウトファイルから色情報を自動的に抽出し、アプリ全体で使用する色を一元管理するシステムです。UIKitとSwiftUIの両方に対応し、色の定義と使用を効率化します。

主な機能

1. 自動色抽出

JSONレイアウトファイルから以下の色属性を自動的に検出・抽出:

  • backgroundColor
  • textColor
  • tintColor
  • borderColor
  • highlightColor
  • その他の色関連属性

2. 色定義の管理

colors.json

プロジェクトで使用される全ての色を定義:

{
  "primary_blue": "#007AFF",
  "background_gray": "#F2F2F7",
  "text_primary": "#000000",
  "text_secondary": "#8E8E93"
}

defined_colors.json

JSONレイアウトで使用されているが、まだ定義されていない色を追跡:

{
  "#FF5733": "orange_red_FF5733",
  "#28A745": "green_28A745"
}

3. ColorManager.swift生成

UIKitとSwiftUIの両方で使用可能な色管理クラスを自動生成:

// Generated/ColorManager.swift
import UIKit
import SwiftUI

public class ColorManager {
    // UIKit colors
    public static let primaryBlue = UIColor(hex: "#007AFF")
    public static let backgroundGray = UIColor(hex: "#F2F2F7")
    
    // SwiftUI colors
    public struct SwiftUI {
        public static let primaryBlue = Color(hex: "#007AFF")
        public static let backgroundGray = Color(hex: "#F2F2F7")
    }
}

使用方法

1. 初期設定

sjui.config.jsonresource_manager_directoryを設定:

{
  "resource_manager_directory": "ResourceManager"
}

2. ビルド時の自動処理

sjui build

ビルドコマンド実行時に以下が自動的に行われます:

  1. JSONレイアウトファイルから色を抽出
  2. Layouts/Resources/colors.jsonを更新
  3. 未定義色をdefined_colors.jsonに記録
  4. ColorManager.swiftを生成/更新

3. コードでの使用

UIKit

view.backgroundColor = ColorManager.primaryBlue
label.textColor = ColorManager.textPrimary

SwiftUI

Text("Hello")
    .foregroundColor(ColorManager.SwiftUI.textPrimary)
    .background(ColorManager.SwiftUI.backgroundGray)

自動色名生成

RGB値に基づいて自動的に色名を生成します:

  • #007AFFblue_007AFF
  • #FF0000red_FF0000
  • #00FF00green_00FF00

生成規則:

  1. 主要な色成分を判定(red, green, blue, gray, etc.)
  2. HEX値を付加して一意性を確保

SwiftJsonUIConfigurationとの連携

SwiftJsonUIConfigurationcolorProviderを設定することで、カスタム色プロバイダーを優先的に使用:

SwiftJsonUIConfiguration.shared.colorProvider = { colorName in
    // カスタム色の解決ロジック
    return MyColorPalette.color(for: colorName)
}

優先順位:

  1. colorProviderで定義された色
  2. ColorManagerで定義された色
  3. デフォルトの色

ファイル構造

Project/
├── Layouts/
│   └── Resources/
│       ├── colors.json          # 定義済み色
│       └── defined_colors.json  # 未定義色のトラッキング
├── ResourceManager/
│   └── ColorManager.swift       # 生成されたSwiftコード
└── sjui.config.json

ベストプラクティス

  1. 色の命名規則を統一: primary_blue, background_mainなど、用途が分かる名前を使用
  2. defined_colors.jsonを定期的に確認: 未定義色を適切な名前でcolors.jsonに移行
  3. ダークモード対応: 色定義時にライト/ダークモードを考慮
  4. チーム間での共有: colors.jsonをバージョン管理し、チーム全体で色定義を共有

関連項目