Hacking "More..." Tableview of a TabBar Template Based App

Ok, its been a while since I wrote any tutorials, so I thought I'd write about a basic Tab Bar based template customization.

As most of newbies in iPhone App development, I too started with the basic template of Tab Bar App. It is a great foundation to create a utility like app because you do not have to care (much) about how to switch views within the app using a tab bar. But, this also means you are stuck with the layout pretty much forever.

** NO SOURCE CODE FOR THIS TUTORIAL **

After a while, my app that was using this Tab Bar template (iTronixPal - Electronics Box), has grown to be a rather extensive app with many tools which are useful for electronics enthusiasts. So in each update I felt compelled to improve upon the graphics, and just to make it better and better, as a gesture of thanks to those who bought it.

Then came the boring More... table view. Seriously? Have u looked at it? White background, black text, no shadows, no eye candy whatsoever. Blerghh.....!!

So I did a search on the Apple Docs, and found a lil something about the moreNavigationController.
Read through it, and found that you can access it as a view. Bada-bing! Once you can access a view, you can basically do anything to the view. And in particular of interest, add a subview.

So, I created a transparent image background for the tableview in More tab. I have lots of tabs, therefore my image is rather long, but the width is fixed to 320pixels. Such as below:

I arranged the icons nicely in my graphics software (I use GIMP) based on a screen capture of the original More table view. Remember to set the background to transparent. That is Alpha channel = 0.0 in the graphics software.

Then, I just add this image to the More.. tableview view by using the following codes in AppDelegate.m file inside the applicationDidFinishLaunching method. Such as below:

  //create a uiimageview object;

UIImageView *tmp = [[UIImageView alloc]  initWithImage:[UIImage imageNamed:@"MoreBg.png"]];

 //add the uiimageview as a subview of moreNavigationController

 [tabBarController.moreNavigationController.topViewController.view addSubview:tmp];



//send the imageview to back (though i think it is not sent to back)



 [tabBarController.moreNavigationController.topViewController.view sendSubviewToBack:tmp];

The code should be self explanatory. Next, you need to open the TabBarController in your Window.xib file (in interface builder), and add some spaces in the beginning of the title for each tabs (so that it does not overlap with your icons). Or if you want to customize all the titles as images , then just delete all the titles).

Here is how mine looks like (below). I even changed the background color of the More navigation controller view to gray.

Hope this helps for anyone who is looking for an easy way to do this.

This tutorial does not accompany a downloadable sample code since it is pretty simple.