Custom TabBar in universal iOS App

Question

I am looking to recreate the raised tab bar as seen in many apps but am looking to do this in a universal app where the raised position would need to change.

At the moment I am not having much luck creating this so have come here for enlightenment, failing this I may just create a custom tab bar background.

If this is the case, would this work in the app delegate to differentiate the two devices?

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {

UITarBar *tabBar = [UITabBar appearance];
[tabBar setBackgroundImage: [UIImage imageNamed:@"iPadtabBar.png"]];

}
else {

UITarBar *tabBar = [UITabBar appearance];
[tabBar setBackgroundImage: [UIImage imageNamed:@"iPhonetabBar.png"]];

}

You may be thinking, why doesn't he just test it.. well that would be easier and if I could I would rather than ask first but I don't get my Mac back until the start of next week!

Answer 1

You will have to subclass UITabBarController and customize that center tab button. There is a nicely done example here: https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar/Classes

Header file: @interface CustomTabBarViewController : UITabBarController{ }

// Create a view controller and setup it's tab bar item with a title and image
-(UIViewController*) viewControllerWithTabTitle:(NSString*)title image:(UIImage*)image;

// Create a custom UIButton and add it to the center of our tab bar
-(void) addCenterButtonWithImage:(UIImage*)buttonImage highlightImage:(UIImage*)highlightImage;

@end

Implementation file:

@implementation CustomTabBarViewController

// Create a view controller and setup it's tab bar item with a title and image
-(UIViewController*) viewControllerWithTabTitle:(NSString*) title image:(UIImage*)image
{
    UIViewController* viewController = [[UIViewController alloc] init];
    viewController.tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:image tag:0];
    return viewController;
}

// Create a custom UIButton and add it to the center of our tab bar
-(void) addCenterButtonWithImage:(UIImage*)buttonImage highlightImage:(UIImage*)highlightImage
{
    UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleTopMargin;
    button.frame = CGRectMake(0.0, 0.0, buttonImage.size.width, buttonImage.size.height);
    [button setBackgroundImage:buttonImage forState:UIControlStateNormal];
    [button setBackgroundImage:highlightImage forState:UIControlStateHighlighted];

    CGFloat heightDifference = buttonImage.size.height - self.tabBar.frame.size.height;
    if (heightDifference < 0)
        button.center = self.tabBar.center;
    else
    {
        CGPoint center = self.tabBar.center;
        center.y = center.y - heightDifference/2.0;
        button.center = center;
    }

    [self.view addSubview:button];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

@end