Gradients in Cocoa

CGShadings are a pain, or well, lets just leave it at all of Core Graphics (CG). While CG is a heck of a powerful library… It always seems to take an elaborate amount of code (as well as time, if your not yet acquainted with it) to do some of the simplest little things. For a discussion on creating gradients with CGShading go here.

cocoa gradient

Now, AppKit provides a pretty decent layer of abstraction, but I find that there are still a number of holes in its coverage of those lower level APIs that could use some filling.

One of those that AppKit doesn’t cover (that it really, really should, especially given the whole resolution independence thing that’s in the works – 10.5 maybe? please?), are gradients.

When I started coding up a sourcelist (you know, the tableView with the iTunes/iPhoto/Mail styling) and also thinking of a few of the mini-projects that I had plans for, many of which could use gradients also – I figured that I might as well take a little detour and try my hand at filling in that gap.

And so, let me introduce you to my little Cocoa Obj-C Gradient class, CTGradient. It’s a small class that should provide a decent cocoa interface for CGShading.

In my case, CTGradient has gone a long way toward making the code in several of the projects I’ve been working on significantly less cluttered (and that’s always a welcome change). I no longer have lines of GCContext junk in my drawing functions nor do I have CG function callbacks proliferating my code. The few convenience methods that I tacked on help a bit with readability as well.

Download CTGradient
< 100 KB

And so, that said, I figure a few people might find it handy.

As it stands right now, it’s not quite finished (I expect the interface to change by a fair amount in the not to distant future – I have a few additions to make). But in any case the code is stable, so if it does what you need it to do, go ahead and make use of it!

With that I’ll end with a short list of those additions I have plans to make:

  • Radial Gradient (just need to figure out best method interface)
  • Chromatic blending (blending HSB)
  • CTGradientWell (counterpart to NSColorWell – with palette to boot)
  • CTGradientSlider/Selecter? (view to let you add/remove/adjust color stops)
  • Miscellaneous methods for color stops
  • More pre-made gradients styles

Update: Updates and other info will be maintained at svn.oofn.net.
Update: With OS 10.5’s AppKit, I would recommend using only NSGradient.

26 Responses to “Gradients in Cocoa”

  1. Hey, this looks really neat, Chad. I have a class very similar to this that I use in my projects, but yours has support for multiple stops, which is very cool. My only criticism on the code thus far: why are you capitalizing the names of your class methods? (+ AquaSelectedGradient, etc) Otherwise, stellar work.

  2. Chad Weider says:
    why are you capitalizing the names of your class methods?

    you know, I have no idea…Fixed

  3. I’ve got a Cocoa Gradient example class here:

    http://svn.toxicsoftware.com/svn/toxic_public/trunk/Samples/GradientTest/

    Good to see more people using Quartz Gradients.

    BTW. Your security code is almost impossible to read.

  4. Jason Jobe says:

    CTGradient is most cool. Its great for making slick backgrounds for Dashboard -like panels.

    Any chance you could add corner rounding to the rectangle? :-)

    thanks, Jason

  5. [...] Recently though, I started playing with CTGradient, a class for easily drawing gradients in Cocoa. Through this I’ve gotten interested in custom UI drawing and so I started a fun project to play with: XP Style Controls in Cocoa. [...]

  6. The best Cocoa UI components…

    The following list documents my favorite Cocoa controls on the Mac. These are all consumable by Cocoa applications, and will make your application look and feel far better than it would if you kept to the stock set of controls….

  7. [...] Secondly is abstraction. The shader draws, that’s what it does. If you’re using CTGradient today and want to switch that to something else in the future you change it in your gradient shader and you’re done. You can even use different gradient shader implementations depending on platform if you want. Uh, you know, if that was something that’d make sense. [...]

  8. Jason says:

    Chad,

    Very nice class but it does have a few memory management bugs in managing the linked list of gradient elements. I think it would be better as its own Class.

    That said, however, I’m doing my best to fix it as designed.

    I am also nearing completion of a gradient inspector that I’m willing to donate.

    Drop me a line and let me know what the current status is and what I should do with my updates.

    very best regards, Jason

  9. Chad Weider says:

    Jason- I certainly would like to hear about any bugs you may have found in my code. As soon as I can find them you can be sure I’ll issue up a patch.

    A gradient inspector? cool – I would be interested to see it.

  10. [...] Fancier gradient fill shaders, CoreImage based shaders and that kind of thing are left, for now, as an exercise for the reader. I mentioned it in the original post but if you’re looking to do gradients you’d do yourself a favour by looking at CTGradient. [...]

  11. Graham Cox says:

    Hi Chad, just wanted to give you a heads up on a new framework we’ve just released which takes your gradient class concept to a new level. While we haven’t borrowed too much from CTGradient, some parts were originally ported from there so we’ve credited you in our UI and docs.

    Our site link is http://gradientpanel.com

    Graham Cox and Jason Jobe

  12. [...] StyledWindow is a subclass of NSWindow created by bithaus. It’s uses the nice CTGradient code created by Chad Weider. [...]

  13. [...] From CTGradientView: CTGradient *aGradient = [NSKeyedUnarchiver unarchiveObjectWithData:[NSKeyedArchiver archivedDataWithRootObject:myGradient]]; [...]

  14. [...] have to write Javascript code. Share also uses RSVerticallyCenteredTextFieldCell by Daniel Jalkut, CTGradient by Chad Weider, and VariableCellColumn by Corbin [...]

  15. [...] Chad Weider’s CTGradient is quite nice. Check it [...]

  16. johnny says:

    Is it possible to apply a gradient to the stroke of an NSBezierPath object?

  17. [...] can be misguided, let’s review why CTGradient was, at the time, created to begin with. It was first introduced in January ‘06, and the first three paragraphs lay out the rationale for the existence of this class: While [Core [...]

  18. [...] Ankur Kothari wrote an article dissecting CTGradient. [...]

  19. [...] been a furore recently over an article by Ankur Kothari where he optimized CTGradient. As an exercise in optimizing code, it was fairly aggressive but otherwise pedestrian. As an [...]

  20. [...] Fancier gradient fill shaders, CoreImage based shaders and that kind of thing are left, for now, as an exercise for the reader. He mentioned it in the original post but if you’re looking to do gradients you’d do yourself a favour by looking at CTGradient. [...]

  21. [...] is abstraction. The shader draws, that’s what it does. If you’re using CTGradient today and want to switch that to something else in the future you change it in your gradient shader [...]

  22. [...] Fancier gradient fill shaders, CoreImage based shaders and that kind of thing are left, for now, as an exercise for the reader. I mentioned it in the original post but if you’re looking to do gradients you’d do yourself a favour by looking at CTGradient. [...]

  23. Paul Sanders says:

    Utterly brilliant, thank you so much for posting. NSGradient is fine (well, it’s a bit limited) but I don’t want to write code that will only run on Leopard – there are still plenty of Tiger machines out there .

  24. Mike says:

    I subcalled CGGradient to make my own view and made a cutom NSView in IB and set its type to CGGradient and added an outlet to my window controller for the subclassed view, and hooked everything up.

    But when I run my app, the gradient never shows up. What else do I need to do in my subclass?

  25. [...] CTGradient – This is a simple class that wraps all the nasty bits of creating gorgeous gradients on OS X. It also appears to be the new hotness in that I’ve seen a ton of projects incorporating this over the past few months. I am definitely looking forward to including this in iRooster once I drop support for Panther. [...]

  26. Bill Allen says:

    chad…I see where you contributed to the Neat program. Perhaps this is not your area of expertise but I wonder if you could tell me why the Neat Library indexes every time it is opened? Apparently Neat tech support has no idea! Some history: This constant indexing only started about 2 months ago when using ver: 4.0.1. Now, upgrading to 4.0.2, the same thing happens. I am very frustrated and I am hoping you might be able to be of some help. Thanks…Bill Allen

Leave a Reply