7
4

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

Last updated at Posted at 2024-10-01

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

要件

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

☆☆ ここからオマケ ☆☆

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

動き

GIFなのでカクカクですがこんな感じ
ColorBaseApp.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)
    }
}

ポイント

POINT1: バインド変数
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)

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

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

POINT3: UIColor
SwiftUIで16進数表記を使うために、UIColor1を用いて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

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4