Part 8 Creating a preview of the selected color | Create the Color Picker with SwiftUI

This is a series of articles on creating a color picker in SwiftUI. In this article, we will implement the process of displaying a color preview based on the values selected with the sliders for each RGB channel created in the previous articles.

Also, the format of the current value is one decimal place, which is too inaccurate when specifying a numeric value. The format for stringification should also be corrected.

TOC

Change format of current value into string

Modify the fieldText property of the ColorPickerChannelModel class. Change the stringing format from %.1f to %g as follows.

    /// Binding of the text being entered
    var fieldText: Binding<String> {
        Binding {
            self.fieldTextStore ?? String(format: "%g", self.currentValue)
        } set: {
            self.fieldTextStore = $0
            if let value = Double($0) {
                self.changeCurrentValue(value)
            }
        }
    }
Preview with modified numerical display
Preview with modified numerical display

Show color preview

Implement the process of displaying a preview of the selected color.

Implement ColorPickerPreview

Implement a view that displays a preview. The preview should be handled simply as follows.

  • Fill with the selected color
  • Attach a frame of about 4 pixels

The code would look something like this.

import SwiftUI

struct ColorPickerPreview: View {
    @Binding var color: Color
    
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                path.addRect(CGRect(x: 0, y: 0, width: geometry.size.width, height: geometry.size.height))
            }
            .fill(color)
            
            Path { path in
                path.addRect(CGRect(x: 0, y: 0, width: geometry.size.width, height: geometry.size.height))
            }
            .stroke(lineWidth: 4)
        }
    }
}

struct ColorPickerPreview_Previews: PreviewProvider {
    static var previews: some View {
        ColorPickerPreview(color: .constant(.blue))
    }
}
Preview of ColorPickerPreview
Preview of ColorPickerPreview

Add to ColorPicker

Place the ColorPickerPreview in the ColorPicker. Place it below the three PickerGradationViews with a height and width of about 50 pixels.

Create a binding to pass to the ColorPickerPreview.color property. Create a Color from redChannel.currentValue, greenChannel.currentValue, and blueChannel.currentValue, and add the properties to be returned by the Binding.

    var color: Binding<Color> {
        Binding {
            Color(red: redChannel.currentValue,
                  green: greenChannel.currentValue,
                  blue: blueChannel.currentValue)
        } set: { _ in
        }

    }

Place the ColorPickerPreview in the view. Place the padding and labels together for clarity.

import SwiftUI

struct ColorPicker: View {
    @StateObject var redChannel: ColorPickerChannelModel = ColorPickerChannelModel(channelName: "Red")
    @StateObject var redGradation: ColorPickerGradationModel = .red
    
    @StateObject var greenChannel: ColorPickerChannelModel = ColorPickerChannelModel(channelName: "Green")
    @StateObject var greenGradation: ColorPickerGradationModel = .green
    
    @StateObject var blueChannel: ColorPickerChannelModel = ColorPickerChannelModel(channelName: "Blue")
    @StateObject var blueGradation: ColorPickerGradationModel = .blue
    
    var color: Binding<Color> {
        Binding {
            Color(red: redChannel.currentValue,
                  green: greenChannel.currentValue,
                  blue: blueChannel.currentValue)
        } set: { _ in
        }

    }
    
    var body: some View {
        VStack {
            ColorPickerSubView(channel: redChannel, gradation: redGradation)
            ColorPickerSubView(channel: greenChannel, gradation: greenGradation)
            ColorPickerSubView(channel: blueChannel, gradation: blueGradation)
            VStack {
                Text("Preview")
                ColorPickerPreview(color: color)
                    .frame(width: 100, height: 100)
            }
            .padding()
        }
        .padding()
    }
}

struct ColorPicker_Previews: PreviewProvider {
    static var previews: some View {
        ColorPicker()
            .previewInterfaceOrientation(.portrait)
    }
}
Preview with ColorPickerPreview in place
Preview with ColorPickerPreview in place

Download the code

Click here to download the code created for this article.

Serialized Articles

This article is part of a series of articles titled “Create the Color Picker with SwiftUI”. Other articles in the series are here.

Create the Color Picker with SwiftUI

Let's share this post !

Author of this article

Akira Hayashiのアバター Akira Hayashi Representative, Software Engineer

I am an application developer loves programming. This blog is a tech blog, its articles are learning notes. In my work, I mainly focus on desktop and mobile application development, but I also write technical books and teach seminars. The websites of my work and books are here -> RK Kaihatsu.

TOC