TNGradientPickerSlider – A macOS component to easily select gradient colors

Why?

I’m currently busy writing a new macOS application that will be released later on, but I needed a way to let the users create gradients.
AppKit does have NSColorPicker which lets you select one particular color, but it doesn’t really have a UI component for selecting multiple colors.

Meet TNGradientPickerSlider

So I started looking around at various graphic editors like Photoshop, Illustrator, … to get some inspiration on how they tackle this problem.

I really liked how Sketch made it so easy and intuitive to create gradients and visualize them all in one tiny component.

So, I tried to recreate their gradient picker as much as possible and TNGradientPickerSlider is the result of this effort.

You can add colors by just clicking on the track.
If you want to change a color, you can double-click the color and a fully features color picker will popup.
Not happy with one of your colors? No problem, you can just drag them of the track and they will be removed.
Check the video below to see how it behaves!

Usage

Using the TNGradientPickerSlider is really simple:

• Create an array of TNGradientColors which will show the initial colors on the track
• Create the view controller TNGradientPickerSliderViewController and add it
• Set an object as the delegate to be informed whenever the colors have changed, so you can update your own UI.

import TNGradientPickerSlider

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 1. Create an array which hold the initial colors you want to show on the track
    let initialGradientColors = [
        TNGradientColor(location: 0.0, color: NSColor.red),
        TNGradientColor(location: 1.0, color: NSColor.blue)
    ]
    
    // 2. Create the view controller
    let gradientSliderViewController = TNGradientPickerSliderViewController(configuration: TNGradientPickerSliderConfiguration.standard(), gradientColors: initialGradientColors)
    
    // 3. Add it as a child view controller of the current view controller
    addChild(gradientSliderViewController)
    
    // 4. Add it to the view hierarchy + setup the constraints
    view.addSubview(gradientSliderViewController.view)
    
    gradientSliderViewController.view.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        gradientSliderViewController.view.widthAnchor.constraint(equalToConstant: 200),
        gradientSliderViewController.view.heightAnchor.constraint(equalToConstant: 28),
        gradientSliderViewController.view.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        gradientSliderViewController.view.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    ])
    
    // 5. Register some object to be the delegate which will receive information when the colors array has changed.
    gradientSliderViewController.delegate = self
}

Open Source

If you want to play with it or use it in your own projects, you can check the code on GitHub and it can also be added to your project via the Swift Package Manager!

TNGradientPickerSlider on GitHub.

My other open-source projects can also be found on the Swift Package Index or on GitHub ofcourse.