Monday, June 10, 2013

UITabBar selectionIndicatorImage example in Objective C (iOS).


UITabBar selectionIndicatorImage

The image used for the selection indicator.

@property(nonatomic, retain) UIImage *selectionIndicatorImage

Discussion of [UITabBar selectionIndicatorImage]
The selection indicator image is drawn on top of the tab bar, behind the bar item icon.

UITabBar selectionIndicatorImage example.
I first include <UITabBarControllerDelegate> in the .h of my app delegate. And in the didFinishLaunchingWithOptions method I set the delegate of the tab bar:

UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
tabBarController.delegate = self;
Then I can use this method to toggle whether or not to show the background image or not:

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    UITabBar *tabBar = tabBarController.tabBar;
    if (tabBar.selectedItem == [tabBar.items objectAtIndex:2]) {
        [tabBar setSelectionIndicatorImage:[[UIImage alloc] init]];
    }
    else {
        [tabBar setSelectionIndicatorImage:nil];
    }
}

Example of [UITabBar selectionIndicatorImage].
Try this code:

// iOS 5.0+
[self.tabBar setSelectionIndicatorImage:[[[UIImage alloc] init]autorelease]];

// for earlier versions

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    [self customizeTabBar];
}

- (void)customizeTabBar {
    NSString *imageName = [NSString stringWithFormat:@"tabBackground%i.png", tabBarCtrl.selectedIndex + 1];

    for(UIView *view in tabBarCtrl.tabBar.subviews) { 
         if([view isKindOfClass:[UIImageView class]]) { 
              [view removeFromSuperview]; 
         } 
    } 
    UIImageView *background = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]] autorelease];
    [tabBarCtrl.tabBar insertSubview:background atIndex:0];
    [tabBarCtrl.tabBar bringSubviewToFront:background];
    //if needed, here must be adding UILabels with titles, I didn't need it.

UITabBar selectionIndicatorImage example.
//create new tab bar appearance
UITabBar *tabBar = [UITabBar appearance];
//set background image
[tabBar setBackgroundImage:[UIImage imageNamed:@"menu.png"]];
//create a colour and apply it as tint colour when items aren't selected.
UIColor *color=[UIColor colorWithRed:64.0/255.0 green:147.0/255.0 blue:52.0/255.0 alpha:255.0];
UIColor *colorSelected=[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
[tabBar setTintColor:color];
[tabBar setSelectedImageTintColor:colorSelected];

[tabBar setSelectionIndicatorImage:[UIImage imageNamed:@"selection-tab.png"]];

End of UITabBar selectionIndicatorImage example article.