Stealing the Tweetie 2 tabbar indicator

Posted on Monday, February 15, 2010 @ 17:37 CET

Sometimes you see something so obvious, yet totally original that just seems like the "proper" way of doing it. The latest case for me was in atebits' Tweetie 2 for iPhone. The tab bar has a tiny arrow that animates to indicate the currently selected tab item. In addition to a custom, yet standard indication by turning the icon blue-ish this small animation just makes it even more clear to the user where they are.

So in the tradition of stealing great ideas I tried to find out how to do this. Queue Picasso quote here. Anyways, turns out it was fairly simple - it came down to:

1. creating a view to contain a TabBarController and be its delegate
2. adding an indicator image to the TabBarController's tab bar
3. animating the image to the selected tab bar index when the TabBarController's didSelectViewController method is fired

I created a small Xcode project (following the NIB-less way) that shows how I cloned it. You can see it in action below:

You can download the Xcode project here. Next up is the pull-down to reload mechanism :)

- paulo

Permanent link