Image on TabBar Not displaying properly.. shows an extra line on top - UPDATED

Question

I have added an ImageView as a subview of my TabBar (that has three NavigationControllers). When i tap on any of the tabs of the tabBarController, then the Image on the imageView changes accordingly (the image shows that particular tab selected and others unselected).

However, the image always shows an extra line on the tabBar. It looks like it crosses the limit of the tabBar. The dimensions of my image is 320x64 pixels (for non-retina iPhone) and 640x128 pixels (for retina iPhone).

Here's how i am declaring instance var for the image view and the tabBarController.

@interface HomePageViewController ()<UITabBarControllerDelegate>
{
    UIImageView* tabBarView;
    UITabBarController *tabBarController;
}




-(UITabBarController *) configureTheTabBarControllerWithNavControllerAtIndex:(NSInteger)index
{

    UINavigationController *customerCareNavController;
    UINavigationController *accAndContactsNavController;
    UINavigationController *purchaseOrderNavController;

    CustomerCareViewController *custCareVC;
    PurchaeOrderViewController *POController;
    AccountsAndContactsViewController *accAndContactsController;


        custCareVC = [[CustomerCareViewController alloc] initWithNibName:@"CustomerCareViewController_iPhone" bundle:NULL];
        POController = [[PurchaeOrderViewController alloc] initWithNibName:@"PurchaeOrderViewController_iPhone" bundle:NULL];
        accAndContactsController = [[AccountsAndContactsViewController alloc] initWithNibName:@"AccountsAndContactsViewController_iPhone" bundle:NULL];

    customerCareNavController = [[UINavigationController alloc] initWithRootViewController:custCareVC];

    purchaseOrderNavController = [[UINavigationController alloc] initWithRootViewController:POController];

    accAndContactsNavController = [[UINavigationController alloc] initWithRootViewController:accAndContactsController];

    tabBarController = [[UITabBarController alloc] init];

    tabBarController.viewControllers = [NSArray arrayWithObjects:customerCareNavController,accAndContactsNavController,purchaseOrderNavController, nil];

    switch (index) {
        case 0:
            tabBarController.selectedIndex = 0;
            break;

        case 1:
            tabBarController.selectedIndex = 1;
            break;

        case 2:
            tabBarController.selectedIndex = 2;
            break;
    }

    tabBarView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_mypeople.png"]];

    tabBarView.frame = CGRectMake(0, -15, 320, 64);

    [tabBarController.tabBar addSubview:tabBarView];

    tabBarController.delegate = self;

    [self selectTabBarIndex:index];

    [self presentViewController:tabBarController animated:YES completion:NULL];

    return tabBarController;
}

-(void)tabBarController:(UITabBarController *)TBController didSelectViewController:(UIViewController *)viewController
{
    NSUInteger indexSelected = [[TBController viewControllers] indexOfObject:viewController];
    [self selectTabBarIndex:indexSelected];
}

- (void) selectTabBarIndex:(NSInteger)index
{
    switch (index)
    {
        case 0:
            tabBarView.image=[UIImage imageNamed:@"tab_myCalendar.png"];
            break;
        case 1:
            tabBarView.image=[UIImage imageNamed:@"tab_myDetails.png"];
            break;
        case 2:
            tabBarView.image=[UIImage imageNamed:@"TabBarItem_PO.png"];
            break;
    }
}

Please see the screenshot..

Setting the barStyle as black gives me the following result

The line has faded a little, but is still visible..

Answer 1

Hey i tried something and it works

tabBarView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_mypeople.png"]];

    tabBarView.frame = CGRectMake(0, 0, 320, tabBarController.tabBar.frame.size.height);

However, the image shows a little stretched..

Write this for no stretching: This will work like a charm..!!

tabBarController.tabBar.backgroundImage = [UIImage new];
tabBarController.tabBar.shadowImage = [UIImage new];

tabBarView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_mypeople.png"]];
tabBarView.frame = CGRectMake(0, -15, 320, 64);
[tabBarController.tabBar addSubView:tabBarView];

Answer 2

Below code will remove line from tabbar...

 if ([[[UIDevice currentDevice]systemVersion]floatValue]>=7.0) {
    tabbarController.tabBar.barStyle=UIBarStyleBlackOpaque;
}

Answer 3

Instead of adding the image in an image view as a subview, add the image as the background image of the tab bar, and make the shadow image be an empty image (the line is the shadow image).

tabBarController.tabBar.backgroundImage = [UIImage imageNamed:@"tab_mypeople.png"];
tabBarController.tabBar.shadowImage = [UIImage new];

If, for some reason, you still need to use a subview rather then a background image, you can continue to do what you have in your question, but set both the background image and the shadow image to empty images (you can't set a custom shadow image without also setting a custom background image). This will get rid of that shadow image line.

tabBarController.tabBar.backgroundImage = [UIImage new];
tabBarController.tabBar.shadowImage = [UIImage new];
tabBarView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tab_mypeople.png"]];
tabBarView.frame = CGRectMake(0, -15, 320, 64);
[tabBarController.tabBar addSubview:tabBarView];

Answer 4

write this in app delegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions


    UIImage *tabBackground = [[UIImage imageNamed:@"tab_bg"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

    [[UITabBar appearance] setBackgroundImage:tabBackground];

    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tab_select_indicator"]];