SeattleBus Diary: UITabBarItem images…

SeattleBus uses a the UITabBar for the primary navigation around the application. With each UITabBarItem you can set a few attributes. You can choose to use a system defined UITabBarItem, or you can specify your own name and image. It also allows you to badge the items if you’re so inclined.

The interesting lesson to be learned is that the images used in the UITabBarItem properties aren’t used with all their colors – they’re basically a mask. The image that’s displayed in the user interface is based on what’s set to transparent or not, obscuring any additional detail you might think you’re adding. That’s actually a bit of a relief – I was worried about matching the colors properly. Took me by surprise when my images were solid square blocks though. I’ve since used Acorn to generate up some PNG files with transparent sections to make my UITabBarItem masks, and that appears to be working quite well.

By the way, make your mask about 30 x 30 pixels. Making it smaller just looks funny…

Published by heckj

Developer, author, and life-long student. Writes online at

%d bloggers like this: