【SwiftUI】スライダーで作った自作の色をカラーコードにするアプリ

こちらの本の第5章で作成した、
ColorSliderを応用したアプリを作ってみました。

要件

• Sliderを使ってR（赤）、G（緑）、B（青）を組み合わせた色を作る： ここまでが本の内容
• 作った色を16進数（カラーコード）に変換する: 本記事で行ったアレンジ
  　

☆☆ ここからオマケ ☆☆

• 出来た色をクリックすると、ColorBaseアプリという色紹介サイトに飛ぶ
• 飛び先を作ったカラーコードの紹介URLに設定する

動き

GIFなのでカクカクですがこんな感じ

サンプルコード

ColorBaseApp.swift

import SwiftUI

struct ContentView: View {
    @State var R:Double = 0.0
    @State var G:Double = 0.0
    @State var B:Double = 0.0
    @Environment(\.openURL) private var openURL
    
    var body: some View {
        let color = Color(red: R/255, green: G/255, blue: B/255)
        
        VStack(alignment: .center) {
            Button {
                        if let url = URL(string: "https://colorbase.app/ja/colors/\(color.toHex()!)") {
                            openURL(url)
                        }
                    } label: {
                        ZStack {
                            Circle()
                                .frame(width: 100, height: 100)
                                .padding()
                                .foregroundColor(color)
                        }
                    }
            Text("#\(color.toHex()!)")
            HStack {
                Circle()
                    .foregroundColor(.red)
                    .frame(width: 20, height: 20)
                Text(String(Int(R))).frame(width: 40)
                Slider(value: $R, in: 0...255).frame(width: 200)
            }
            HStack {
                Circle()
                    .foregroundColor(.green)
                    .frame(width: 20, height: 20)
                Text(String(Int(G))).frame(width: 40)
                Slider(value: $G, in: 0...255).frame(width: 200)
            }
            HStack {
                Circle()
                    .foregroundColor(.blue)
                    .frame(width: 20, height: 20)
                Text(String(Int(B))).frame(width: 40)
                Slider(value: $B, in: 0...255).frame(width: 200)
            }
        }
    }
}

#Preview {
    ContentView()
}

ColorExtension.swift

import SwiftUI

extension Color {
    func toHex() -> String? {
        // UIColorに変換
        let uiColor = UIColor(self)
        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0

        // RGBコンポーネントを取得
        uiColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)

        // 16進数に変換
        let r = Int(red * 256)
        let g = Int(green * 256)
        let b = Int(blue * 256)

        return String(format: "%02x%02x%02x", r, g, b)
    }
}

ポイント

POINT１: バインド変数
Slider構造体のValueをバインド変数にし、
スライダーの動きに合わせて色や文字を動的に変化させる

SliderStruct

@State var R:Double = 0.0 // R(Red)をバインド変数で定義
@State var G:Double = 0.0 // G(Green)
@State var B:Double = 0.0 // B(Blue)

Slider(value: $R, in: 0...255) // Slider構造体のvalueに設定
Slider(value: $G, in: 0...255)
Slider(value: $B, in: 0...255)

CreatedColorByBindingVariables

// バインド変数をもとに変化するカラーを定義
let color = Color(red: R/255, green: G/255, blue: B/255)

// viewに反映
Circle().foregroundColor(color)

POINT２: 拡張メソッド
RGBの組み合わせを16進数に変換するtoHexを、拡張メソッドとして用意する

ColorExtension

extension Color {
    func toHex() -> String? { ... // Colorクラスを拡張してtoHexメソッドを追加

POINT３: UIColor
SwiftUIで16進数表記を使うために、UIColor¹を用いてColorからRGBを取得する
詳しくはこの記事を参照

toHex

func toHex() -> String? {
    // UIColorに変換
    let uiColor = UIColor(self)
    var red: CGFloat = 0
    var green: CGFloat = 0
    var blue: CGFloat = 0
    var alpha: CGFloat = 0

    // RGBコンポーネントを取得
    uiColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)

    // 16進数に変換
    let r = Int(red * 256)
    let g = Int(green * 256)
    let b = Int(blue * 256)

    return String(format: "%02x%02x%02x", r, g, b)
}

感想

完全に自分だけのローカル環境で楽しむ用ですが、簡素ながら作ってみました。
自分はAndroidユーザーなのでプライベートで楽しむことは叶いませんが(泣)、
iPhoneユーザーの方はぜひ参考にしたり、アレンジしてみてください。

参考サイト・文献

お気に入りのカラーコード検索サイト：Colorbase

SwiftUIの入門書：詳細!SwiftUI iPhoneアプリ開発入門ノート[2022]

その他参照記事

1. SwiftUIより以前に出ていたUIKitというフレームワークが持つカラーオブジェクトクラスのこと。
   公式リファレンス：UIColor ↩