何回かに分けて、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()
}
}
}
