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

2022-11-122023-05-30

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

Displaying gradients in SwiftUI

To display a gradient in SwiftUI, use the LinearGradient view. Specify the gradient source color, gradient start position, and gradient end position, and a linear gradient will be drawn. For instance, the code snippet below illustrates a horizontal gradient transitioning from black to white.

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 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”.

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 color	End 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()
        }
    }
}