The first time I looked at drawing APIs I thought what the hell. They are generally quite low level, and always procedural. Even Cocoa’s Objective-C drawing APIs are very procedural in nature, because drawing is procedural. There are very few APIs that abstract this up to the styling level. One of my favorite things about CALayer is that it comes with built in styling properties. This is by far the better and more modern API because it abstracts what would be custom drawing code to the controller level where your unique code just becomes values to set.

On iOS it’s really easy to set up a view and use the styling properties of the view’s built in layer to get simple UI elements on screen. You can even set one up to use a CAGradientLayer as its built in backing layer and get all kinds of cool stuff out of it just setting properties. Unfortunately on the desktop the integration with CALayer is not quite as awesome, and layer backed views can sometimes be problematic. I’ve often ended up styling views from scratch with drawing code. 

This is a generic styled view class that I use all the time to get quick and dirty graphics on screen during development. The API has changed over time with usage, and I’m pretty happy with its current state for the most part. Styling is exposed through properties on the view. It has support for a fill color and gradient, with the gradient composited on top, and individual properties for top and bottom edges, as well as highlights. The left and right edges have gradient properties instead of colors. It also supports drawing inner shadows thanks to Sean Patrick-O’Brien and his awesome bezier path category. And I recently added support for stretchable background images exposed through a leftCapWidth and topCapHeight property.

Setting one up is just a few lines of code. I put together a simple demo with some goofy graphics I made up on the fly. The result looks like this. The class and categories used are available BSD.

  1. tumbljack posted this
To Tumblr, Love Metalab