I Love Code - Free Coding Tutorials and Resources

Whenever we Cocoa devs think of NSBox, we usually think of a nice, basic container for other views, that comes with a title, right? Something that looks like this, maybe:

Well, this is only the beginning of NSBox’s flexibility. When we set Box Type to Custom, this opens up 6 properties of NSBox that we can now make use of for our custom layouts: border and background colors, horizontal and vertical margins, and probably the most unexpected properties, the border width and radius.

This gives us a ton of flexibility to do all sorts of sexy basic layout shapes. Combined with the fact that you can very easily change out the content view of an NSBox (via -setContentView:), this little control becomes a very powerful UI element. And when applying a little imagination, we can make our interfaces look much nicer with much fewer custom NSView subclasses.

For instance, the setup window for Adium (very similar looking to Installer.app) could make use of NSBox (if it doesn’t already) for its main “content” view, which gives a basic and nice looking layout.

Normally this would be done with an NSView that draws the translucently-colored border and background itself, and when we want to swap views out, we would have to make sure to set their frame size appropriately, so that they appear where we expect them to. With NSBox, setting the content view does this resizing and repositioning for us for free, plus we don’t even need to touch any code to get the box to appear like it does in this Adium screenshot.

Here are just some of the things you can do with an NSBox in Interface Builder by itself, without even writing a line of code:

I’m not claiming those sample boxes in that last screenshot look good or should even be used in an app, but there’s plenty of ways you could use this flexibility to get rid of some custom NSView subclasses.