How To Skin Your iPhone App With Core Animation

Today I am going to make a tab based app go from just-ok to super-awesome by replacing the built in navigation bar graphics skin with a special skin given to me by Jen, the graphic designer from Clever Twist software.

Here is what you need to do:

Create a new iPhone app using the Tab Bar Application template

Make sure to build and run your app to see the standard tab bar with two views

Get new shiny graphics that will make your app stand out

- You can use an app like Photoshop, Acorn or Pixelmator to make yours

Add your new skin graphics as png files to your app’s resources folder

Use Interface Builder(IB) to add views for each tab bar item that you want to appear

Select each tab bar item with IB to use your custom skin images in your tab bar

Set the tab bar delegate to the app delegate

- Open up your MainWindow.xib file in IB

- Control-click on the tab bar controller icon and drag the blue line that appears to the app delegate icon

- Select the word “delegate” that appears in the dialog box

Add a UIImageView property to your app delegate named tabBarArrow

In your app delegate header file add these forward declarations:

- (CGFloat) horizontalLocationFor:(NSUInteger)tabIndex;
- (void) addTabBarArrow;

In the app delegate’s applicationDidFinishLaunchingWithOptions delegate method add this message to the addTabBarArrow method:

[self addTabBarArrow];

In your app delegate implementation file implement the function and method from the previous step (see below for code)

Override the tab bar delegate method didSelectViewController (see code below)

Code For addTabBarArrow

-(void) addTabBarArrow{
	UIImage* tabBarArrowImage = [UIImage imageNamed:@"arrow.png"];
	self.tabBarArrow = [[[UIImageView alloc] initWithImage:tabBarArrowImage] autorelease];
	CGFloat verticalLocation = self.window.frame.size.height - tabBarController.tabBar.frame.size.height - tabBarArrowImage.size.height + 6;
	tabBarArrow.frame = CGRectMake([self horizontalLocationFor:0], verticalLocation, tabBarArrowImage.size.width, tabBarArrowImage.size.height);
	[self.window addSubview:tabBarArrow];
	}

Code For horizontalLocationFor

-(CGFloat) horizontalLocationFor:(NSUInteger)tabIndex{
	CGFloat tabItemWidth = tabBarController.tabBar.frame.size.width / tabBarController.tabBar.items.count;
	CGFloat halfTabItemWidth = (tabItemWidth / 2.0) - (tabBarArrow.frame.size.width / 2.0);

	return (tabIndex * tabItemWidth) + halfTabItemWidth;
}

Code For didSelectViewController

-(void)tabBarController:(UITabBarController *)theTabBarController didSelectViewController:(UIViewController *)viewController{
	[UIView beginAnimations:nil context:nil];
	[UIView setAnimationDuration:0.2];
	CGRect frame = tabBarArrow.frame;
	frame.origin.x = [self horizontalLocationFor:tabBarController.selectedIndex];
	tabBarArrow.frame = frame;
	[UIView commitAnimations];
}

Run Your App To See The Awesome!

Now when you run your app you will now see the old standard tab bar but one with shiny new (and unique) graphics. You also get a neat little animation – in the demo it is a subtle blue arrow that moves to the selected tab bar item, but you can use any graphic that you would like.

Shout-Out To Jen At Clever Twist!

Jen provided me with the images used in this demo – they are an example of what you can do with Jen’s new product, Tapptics. I gotta tell you this is cool – I ended up buying the package last night and am planning on using these image assets in an upcoming rev of my iPhone app. This stuff is very and so essential to get your app to stand out in the store – you can’t afford to just use the built-in iOS skins these days when you are competing with 400,000+ apps…