SwiftUI Series 4: Creating a Live Color Picker in SwiftUI

In this tutorial, we'll walk through the process of building a live color picker using SwiftUI. This app allows users to adjust red, green, and blue color values using sliders, with the result displayed in real-time on a circular preview.

Setting Up the Project

First, create a new SwiftUI project in Xcode. Name it "SliderExperiment" or any name you prefer. Open the ContentView.swift file, where we'll be writing our code.

The Code

Let's break down the code and explain each part:

import SwiftUI

struct ContentView: View {
    @State private var redValue = 0.0
    @State private var greenValue = 0.0
    @State private var blueValue = 0.0

    var body: some View {
        VStack {
            // Code for UI elements
        }
        .padding()
    }
}

We start by importing SwiftUI and defining our ContentView struct. We use @State properties to store the values for red, green, and blue colors. These will be updated as the user interacts with the sliders.

Creating the UI

Inside the VStack, we add our UI elements:

Text("Live Colour Picker")
    .font(.title)
    .fontWeight(.bold)

Circle()
    .frame(width: 300, height: 300)
    .foregroundStyle(
        Color(
            red: redValue / 255,
            green: greenValue / 255,
            blue: blueValue / 255
        )
    )
    .padding()

We start with a title and then create a Circle shape to display our color preview. The foregroundStyle of the circle is set using the Color initializer, which takes red, green, and blue values between 0 and 1. We divide our slider values by 255 to get the correct range.

Adding Sliders

For each color component, we add a slider and a text display:

Text("Red Slider")
    .font(.title2)

HStack {
    Slider(value: $redValue, in: 0...255)
        .tint(.red)
    Text("\(Int(redValue.rounded()))")
}

// Repeat for green and blue

Each slider is bound to its respective @State variable using the $ prefix. The slider's range is set from 0 to 255, corresponding to the full range of 8-bit color values. We also display the current value next to each slider.

Explanation

1. State Variables: We use @State to create variables that can be modified by the view. When these values change, SwiftUI automatically updates the UI.

2. Color Preview: The Circle view acts as our color preview. Its color is updated in real-time as the sliders are adjusted.

3. Sliders: Each slider is tied to a color component (red, green, or blue). As the user moves the slider, the corresponding @State variable is updated, which in turn updates the preview color.

4. Color Calculation: We divide the slider values by 255 when creating the Color object because SwiftUI's Color initializer expects values between 0 and 1, while our sliders go from 0 to 255.

Conclusion

This SwiftUI app demonstrates how to create a simple yet effective color picker using sliders. Users can interactively adjust RGB values and see the results immediately. This project showcases the power of SwiftUI's declarative syntax and its ability to create responsive, interactive UIs with minimal code.

Feel free to experiment with this code! You could add features like saving color presets, displaying hex color codes, or even extending it to include alpha channel adjustment for transparency.