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.
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!
Using the TNGradientPickerSlider is really simple:
- Create an array of
TNGradientColorswhich will show the initial colors on the track
- Create the view controller
TNGradientPickerSliderViewControllerand add it
- Set an object as the delegate to be informed whenever the colors have changed, so you can update your own UI.
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!