【SwiftUI】独自のColorを便利に綺麗に拡張する

SwiftUIにはデフォルトでColorがたくさん用意されていますが
独自で色々なカラーを作りたい場面は多いと思うので
拡張性を意識して実装してみたので紹介します

とりあえず安直にextensionしてみる

はい、みんな大好きextensionのお時間です。
まずは安直にやってみます。ここは終着点ではないです。

// ColorExtension.swift

extension Color {
    static var light_coral = Color(red: 240 / 255, green: 128 / 255, blue: 128 / 255)
}

Colorを拡張して、staticプロパティを定義します。
RGB指定で、好き放題色を拡張できます。

使うとこんな感じ

// ColorsView.swift

struct ColorsView: View {
    var body: some View {
        VStack(spacing: 20) {
            MyRectangle()
                .foregroundColor(.light_coral)
        }
    }
}

struct MyRectangle: View {
    var body: some View {
        Rectangle()
            .frame(width: 350, height: 100)
            .cornerRadius(10)
    }
}

いや、もっと綺麗に書けるでしょ

上の実装だと何がめんどいかというと、RGB指定なので
red: 240 / 255　このように255で割ってDoubleにしないといけない点です。
拡張したいColorが増えて来ると、毎回255で割るなんて面倒なので
もうひと工夫加えます。

Colorのイニシャライザをextensionする

下記のように、新しくイニシャライザを拡張します。

// ColorExtension.swift

extension Color {
    init(
        _ red: Int,
        _ green: Int,
        _ blue: Int
    ) {
        self.init(
            red: Double(red) / 255,
            green: Double(green) / 255,
            blue: Double(blue) / 255
        )
    }
}

Point
・Intで受け取り、Doubleに変換して、255で割ってColorを初期化
・外部引数は_にすることで初期化時に引数ラベル不要

何が嬉しいか

新しく作ったイニシャライザを使うことで
文字通り、/ 255 しなくてよくなります。
このようにstaticプロパティが増えてきた時もすっきりと書けます。

// ColorExtension.swift

extension Color {
    static var light_coral = Color(240, 128, 128)
    static var slate_blue = Color(106, 90, 205)
    static var aquamarine = Color(127, 255, 212)
    static var light_green = Color(144, 238, 144)
    static var gold = Color(255, 215, 0)
    static var khaki = Color(240, 230, 140)
}

最終形態

// ColorsView.swift

struct ColorsView: View {
    var body: some View {
        VStack(spacing: 20) {
            MyRectangle()
                .foregroundColor(.light_coral)
            MyRectangle()
                .foregroundColor(.slate_blue)
            MyRectangle()
                .foregroundColor(.aquamarine)
            MyRectangle()
                .foregroundColor(.light_green)
            MyRectangle()
                .foregroundColor(.gold)
            MyRectangle()
                .foregroundColor(.khaki)
        }
    }
}

struct MyRectangle: View {
    var body: some View {
        Rectangle()
            .frame(width: 350, height: 100)
            .cornerRadius(10)
    }
}

おわりに

やっぱりextensionっていいなあ。。。