Looking for info on custom drawing of interface components (Cocoa)

Question

It seems like more and more OS X apps these days are doing all kinds of fancy drawing stuff for custom controls. Apps like Twitterific, Things, EventBox, Versions just to name a few....

So basically I'm looking for any information on how to get started doing this kind of thing. Not sure if it is just done by subclassing controls and using custom drawing or if it is something entirely different.

Any help is greatly appreciated. THanks!

Answer 1

It depends entirely on what you want to do.

The "Show Raw Properties" button in Versions for instance is an NSButton subclass, because basically what we needed is standard button behavior with our own look.  One way to subclass a button is to simply implement your own -drawRect:(NSRect)rect method in the NSButton subclass, but we decided to stick with the way NSButton is implemented in Cocoa, meaning most drawing is done by the button's cell, so the implementation looks like this:

In the NSButton subclass:

+ (Class) cellClass
{
    return [OurButtonCell class];
}

- (void)drawRect:(NSRect)rect 
{
    // first get the cell to draw inside our bounds
    // then draw a focus ring if that's appropriate
}

In the NSButtonCell subclass (OurButtonCell):

- (void)drawInteriorWithFrame: (NSRect) rect inView: (NSView *) controlView
{
    // a bunch of drawing code
}

The Timeline view in Versions is actually a WebView, the page that you see in it uses javascript to collapse headers you click on.

The rule of thumb I use for where to start out with a custom control is:

• To customize the look of a standard Cocoa control:
  • subclass the appropriate control (like e.g. NSButton and NSButtonCell)
  • stick as close as makes sense to the way the default control is implemented (e.g. in a buttoncell, start from the existing attributedTitle instance method to draw the button title, unless you always want to draw with the same attributes regardless of what's set up in IB or if you need to draw with different attributes based on state, such as with the trial expiration button in Versions' main window)
• Creating an entirely new UI element:
  • subclass NSView and implement pretty much all mouse and key event handling (within the view, no need to redo "hitTest:") and drawing code yourself.
• To present something that's complex, of arbitrary height, but isn't a table:
  • See if you can do it in HTML, CSS and JS and present it in a WebView.  The web is great at laying out text, so if you can offload that responsibility to your WebView, that can be a huge savings in pain in the neck.

Recommended reading on learning how to draw stuff in your own custom view's drawing methods: Cocoa Drawing Guide

Customizing the look of for instance an NSTableView is an entirely other cup of tea, thanks to the complexity of a tableview, that can happen all over the place.  You'll be implementing your own custom cells for some things you want to do in a table, but will have to change the way rows are highlighted in a subclass of the actual NSTableView object itself.  See for instance the source code for iTableView on Matt Gemmell's site for a clear example of where to draw what.

Finally, I think Abizer's suggestion to go check out the code of BWToolkit is a great idea.  It might be a bit overwhelming at first, but if you can read and understand that code you'll have no trouble implementing your own custom views and controls.

Answer 2

Have a look at some excellent example code: BWToolkit