Part 1 Displaying Gradients in SwiftUI | Create the Color Picker with SwiftUI

In this multi-part series, we will create a color picker in SwiftUI. This time, we will create the gradient part to be displayed in the color picker.

TOC

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

Displaying gradients in SwiftUI

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))
    }
}
Black to white gradation
Black to white gradation

RGB Color Model

There are several ways to specify colors, but in this article, I would like to create a color picker that specifies colors using the RGB color model. The RGB color model represents colors by amalgamating three color components: R (red), G (green), and B (blue). These three colors are called the “Three primary colors of light”.

Three primary colors of light
Three primary colors of light

Each component has an intensity ranging from 0.0 to 1.0, with 0.0 being black and 1.0 being the primary color. Various combinations of these intensities can portray an infinite spectrum of colors. In addition to using floating-point numbers, integer values may be used to represent intensities. For example, for 8-bit, integers from 0 to 255 are used; for 16-bit, integers from 0 to 65535.

Each component is also called a “Channel”. For example, “R Channel.

Display a gradient for each channel

To make it easier to specify the value of each RGB channel in the color picker, we will use a gradient for each channel to represent the color. Ultimately, we want to specify colors by tapping or panning the gradient. Still, for this article, we will only display the gradient.

Display three gradients. The colors of each gradient are shown in the following table.

Channel Start colorEnd color
R Black = RGB(0.0, 0.0, 0.0) Red = RGB(1.0, 0.0, 0.0)
G Black = RGB(0.0, 0.0, 0.0) Green = RGB(0.0, 1.0, 0.0)
B Black = RGB(0.0, 0.0, 0.0) Blue = RGB(0.0, 0.0, 1.0)

Modify the code to allow specification of the start and end colors of the PickerGradationView via properties.

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))
    }
}

Create a PickerGradationView for each RGB channel. Write the following code.

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()
        }
    }
}
Display gradient for each RGB channel
Display gradient for each RGB channel

Authored Books

Let's share this post !

Author of this article

Akira Hayashi (林 晃)のアバター Akira Hayashi (林 晃) Representative(代表), Software Engineer(ソフトウェアエンジニア)

アールケー開発代表。Appleプラットフォーム向けの開発を専門としているソフトウェアエンジニア。ソフトウェアの受託開発、技術書執筆、技術指導・セミナー講師。note, Medium, LinkedIn
-
Representative of RK Kaihatsu. Software Engineer Specializing in Development for the Apple Platform. Specializing in contract software development, technical writing, and serving as a tech workshop lecturer. note, Medium, LinkedIn

TOC