Twitter Tabbar Indicator Added to Universal iOS Template

Today I pushed a nice little update to the Tabbar Support branch of my iOS-Universal App Template project on Github.  I added in the "Twitter tabbar slider" indicator.  Though it isn't that flashy it was the attention to detail that made Tweetie so popular and usable when it first came.  While it has since been duplicated I found it interesting that most examples don't have support for landscape orientation nor for iPads.  After looking through @boctor's code on idevrecipes.com I figured I would be able to drop the code in for my template within a few hours.

If it seems too good to be true then it usually is.  I realized why I didn't see a whole lot of support for the indicators in other orientations or for the iPad.  The first obstacle was orientation support.  In @boctor's code the indicator is added as a subview to the main window.  This is not a bad practice because it ensures that the indicator is always on top of any subviews within the app. Unfortunately UIWindow doesn't support orientation, so when the device rotates the image looks crooked.  The solution is to add the indicator to the tabBarController's view.  Now that the image is repositioning itself with the orientation, unfortunately the new position is not centered.  To ensure that you will position the indicator in the center of each tabbar item ,regardless of orientation, you have to use the following calculation:

The last piece to the puzzle was to be able to force the indicator to recalculate it's position based upon the orientation.  This wouldn't be an issue with UIViewController, but I don't want to add in boilerplate code for each VC that I have.  (I already have boilerplate that I am going to abstract out with the next update).  Using NSNotification or a custom protocol seemed like overkill…and it was.  I ended up creating a category for the UITabBarController that overrides:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration

and calls the delegate method for the tabbar that is selected.

The rotation animation on the splitviewcontroller seems a little sluggish so I need to track that down and I am hoping to take out the dependency for an image and draw it programmatically.

A BIG SHOUT OUT to Peter Boctor (http://idevrecipes.com/) and Loren Brichter for being innovative and providing the code that was the basis for my little addition.

Upcoming to Universal iOS App on GitHub

In anticipation for the upcoming public release of iOS 4.2, I have updated my Universal iOS App project (iAd Branch).  The project will run on 3.2 and up with iAd support for iPhone and iPad (4.2 only for iPad).

I ran into some interesting hurdles while working on this update.  The first of which is that adding in iAd support for a project using a UISplitViewController SUCKS! #FAIL When iAds where first offered in the 4.0 iOS they came in two different size: 320 x 50 (ADBannerContentSizeIdentifier320x50) and 480 x 32 (ADBannerContentSizeIdentifier480x32) which served their purpose since you could use iAds only on the phone.  When iAd support was added for the iPad Apple was smart and deprecated those properties and added ADBannerContentSizeIdentifierPortrait and ADBannerContentSizeIdentifierLandscape, thus abstracting the dimensions that are available for any current and future devices.  This unification works great on the iPhone and iPad...except for when you implement UISplitViewController on the iPad.  The reason being that even though your root view or "detail" view controller are in landscape or portrait mode their widths aren't in the expected frame width for either choose of iAd. Thus you get an inaccurate display and you will an error in:

- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error

stating that an ad has displayed but is being obscured. In order to get around this I had to add in some padding to readjust the 'y' coordinate for the tableview's frame (only when the ad appears).  Why the rotation, and only on the iPad, gets screwed up I am not sure at the moment.  I created a simple, iPad only project and got the same results so there might be a bug, but until I am able to verify, my "padding" works".

It is important that if you clone/run this project that you read the debug console for iad display errors.  These are relevant errors passed to the delegate method and don't have to do with my code.  You will notice in the video that ad fails to load the first round.  This is due to an error from Apple serving up the ad because inventory is not available. Second time is the charm.

*important - always implement delegates to handle failures

In the next few weeks I'll be adding a branch where the Universal app will have Tabbar support.