Transparent Toolbars

Aaaaaand continuing on from yesterday’s ‘good reasons to use method swizzling’ theme, let’s say that you want to have a couple standard UIBarButtonItems beside each other in a navigation bar, like this:

buttonsintabinnav.png

Now, every time we’d done this before, we’d used custom buttons; just stick them in a view, set leftButtonsItem to use that custom view, done. Same way as the custom title view shown there. But you can’t put UIBarButtonItems in a view. Hmmm. Well, you can put them in a tab bar with a UIBarButtonSystemItemFixedSpace between them, and then use that tab bar as a custom view, right? Well, that might work if your navigation bar was opaque, but the Perceptive Reader will note that the navigation bar above is not opaque. And a UITabBar meshes with that … poorly. Hmmmm, hmmmm.

The solution is to be found here:

Making UIToolbar and UINavigationBar’s background totally transparent

I have an upcoming iPhone application, Cartographer, that is highly stylised and requires high customisation of the interface to achieve a convincing, beautiful vintage look. To make it work, I needed transparent toolbars and navigation bars for my UIViewController-based views.

The solution I came up with for this was to implement a category on UINavigationBar and UIToolbar, and overriding drawRect: with a method that does absolutely nothing. Then I can place my own textures behind the bar, and they’ll be seen, instead of the default bar background…

Ex-cellent. Now I feel really good about buying Cartographer to support this fine, fine fellow’s helpful blogging! (Haven’t launched it yet, mind you, project deadlines and the trip we’re planning to use it for are converging in an increasingly disturbing fashion…) And, as you can see from the screenshot, it works just a treat in your translucent navigation bars.

That article goes on to discuss adding textures using CALayer, and here’s another couple links on that subject as well, just to keep our bar customization stuff in one link:

How I add background image to UINavigationBar

Another CALayer Tip for Background Image

Note that second one is about adding background images into UIViewController, supporting both landscape and portrait mode no less!

Alex | December 11, 2010

Leave a Reply