第1回 SwiftUIでグラデーションを表示する | SwiftUIでカラーピッカーを作る

何回かに分けて、SwiftUIでカラーピッカーを作ってみます。今回はカラーピッカーに表示するグラデーション部分を作ります。

目次

SwiftUIでグラデーションを表示する

SwiftUIでグラデーションを表示するには、LinearGradientビューを使います。グラデーションの元になる色、グラデーションの開始位置、終了位置を指定すると線形のグラデーションを描画します。例えば、水平方向に黒から白に変化するグラデーションであれば次のようなコードになります。

struct PickerGradationView: View {
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.black, .white]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 0))
    }
}
黒から白へのグラデーション
黒から白へのグラデーション

RGBカラーモデル

色を指定する方法には複数の方法がありますが、この記事ではRGBカラーモデルで色を指定するカラーピッカーを作りたいと思います。RGBカラーモデルでは、R(赤)、G(緑)、青(B)の3つの色の成分の組み合わせで色を表現します。また、この3色を「光の三原色」と呼びます。

光の三原色
光の三原色

各成分は0.0から1.0までの強度を持ちます。0.0は黒になり、1.0は原色になります。強度の組み合わせで無数の色を表現できます。強度の表現には、浮動小数点数を使用する他に、整数値を使用する場合もあります。例えば、8bitの場合は、0から255までの整数を使用します。16bitの場合は0から65535までの整数となります。

また、各成分のことを「Channel(チャネル)」とも呼びます。たとえば、「R Channel」などです。

Channel毎にグラデーションを表示する

カラーピッカーでRGBの各チャネルの値を指定するのに、分かりやすくするため、チャネル毎にグラデーションで色を表現します。最終的には、グラデーション上をタップやパンで色を指定できるようにしたいのですが、今回は、表示までを行います。

3つのグラデーションを表示します。各グラデーションの色を次の表のようにします。

チャネル 開始色 終了色
R = RGB(0.0, 0.0, 0.0) = RGB(1.0, 0.0, 0.0)
G = RGB(0.0, 0.0, 0.0) = RGB(0.0, 1.0, 0.0)
B = RGB(0.0, 0.0, 0.0) = RGB(0.0, 0.0, 1.0)

PickerGradationViewの開始色と終了色をプロパティで指定できるようにコードを変更します。

import SwiftUI

struct PickerGradationView: View {
    var startColor: Color
    var endColor: Color
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [startColor, endColor]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 0))
    }
}

RGBチャネルごとにPickerGradationViewを作成します。次のようなコードを書きます。

import SwiftUI

struct ColorPicker: View {
    var redStartColor: Color = Color(red: 0.0, green: 0.0, blue: 0.0)
    var redEndColor: Color = Color(red: 1.0, green: 0.0, blue: 0.0)
    
    var greenStartColor: Color = Color(red: 0.0, green: 0.0, blue: 0.0)
    var greenEndColor: Color = Color(red: 0.0, green: 1.0, blue: 0.0)
    
    var blueStartColor: Color = Color(red: 0.0, green: 0.0, blue: 0.0)
    var blueEndColor: Color = Color(red: 0.0, green: 0.0, blue: 1.0)
    
    var body: some View {
        VStack {
            PickerGradationView(startColor: redStartColor, endColor: redEndColor)
                .frame(height: 100)
                .padding()
            
            PickerGradationView(startColor: greenStartColor, endColor: greenEndColor)
                .frame(height: 100)
                .padding()

            PickerGradationView(startColor: blueStartColor, endColor: blueEndColor)
                .frame(height: 100)
                .padding()
        }
    }
}
RGBチャネル毎にグラデーションを表示する
RGBチャネル毎にグラデーションを表示する

連載記事一覧

この記事は「SwiftUIでカラーピッカーを作る」という連載記事の一つです。連載の他の記事は次のページを開いてください。

SwiftUIでカラーピッカーを作る 連載記事一覧

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

アプリ開発が好きなアプリ開発者。このブログは学習メモを記事にしたテックブログです。仕事ではアプリ開発をメインに、技術書の執筆やセミナーの講師などもしています。業務や著書のサイトはこちらです→ アールケー開発

目次