6

I’m developing a new app and I’m facing some problems to customize the UITabBar and make it work (design) great in iPhone 5 and 6 using @2x image.

In the AppDelegate.m, in the didFinishLaunchingWithOptions method, I set the images for background, item selected:

//TABBAR
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];
UITabBarItem *tabBarItem5 = [tabBar.items objectAtIndex:4];

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_bg"]];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"icone_home_selecionado"]];
[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];

And then, in the same method, for each Item I set the image and inset:

tabBarItem1.title = nil;
tabBarItem1.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
[tabBarItem1 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

tabBarItem2.title = nil;
tabBarItem2.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
[tabBarItem2 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

tabBarItem3.title = nil;
tabBarItem3.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
[tabBarItem3 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

tabBarItem4.title = nil;
tabBarItem4.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
[tabBarItem4 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

tabBarItem5.title = nil;
tabBarItem5.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
[tabBarItem5 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

My problem is related iPhone 5 and 6 width using the same @2x image, as the iPhone 5 has 640px (320pts) and iPhone 6 has 750px (375pts), so I decide to create the selectedIndicatorImage called “icone_home_selecionado@2x.png” with width size=150px

Because I have 5 UITabBarItem, so 750/5 = 150px (each item)

Image icone_home_selecionado@2x.png (150px x 96px):

icone_home_selecionado@2x.png (150px x 96px)

It works really great when run on iPhone 6 as ou can see: enter image description here

But when test it on iPhone 5, when the item is selected the UITabBarItem area is expanded for the same 150px (as is of the image width) instead of reduce to 128px (it suppose to has this size to fit on iPhone 5) as you can see: enter image description here

(note the width difference from the first Item to the second item for example, but it happens to all them, it seem that the selected image overlays the UITabBarItem)

My @2x image has 150px, but as I am supposed to use @2x images for iPhone 5 and 6, how can I handle this case to fit the image in UITabBarItem? It seems that it will only work if I have one image 150px (for 6) and another image 128px (for 5)

Is there any solutions using the same @2x image or I need to code to identify that screen size and then select which image?

Fernando
  • 1,323
  • 2
  • 12
  • 17
  • 3
    Asked on Nov 22 '14 and still no answer ??? – myexec Jan 11 '15 at 18:51
  • @Fernando Any strong solution with this ? I am also facing the same issue: http://stackoverflow.com/questions/30460648/remove-mask-from-deselected-tabs-uitabbaritem-swift/30462346#30462346 – Bonnke May 26 '15 at 21:07
  • @Bonnke unfortunately I couldn't find a great solution so far, my workaround (shame of it) is very similar to the answer below, checking the screen size and then selecting the right image :-/ – Fernando May 28 '15 at 05:56
  • @Fernando No Problem man... the same for me. can't see another solution. Thanks for response – Bonnke May 28 '15 at 07:01

1 Answers1

0

Same problem with:

UITabBar.appearance().backgroundImage =  UIImage(named: "bg_bottom_menu")

Due to the image is settled for 4 inches display it doesn't work properly in iPhone 6.

I'm using the follow code to fix it:

if Utilities.isIphone5() {
    UITabBar.appearance().backgroundImage =  UIImage(named: "bg_bottom_menu_4_inches")
} else {
    UITabBar.appearance().backgroundImage =  UIImage(named: "bg_bottom_menu")
}

In Utilties:

class func isIphone5() -> Bool {
    return isIphone() && UIScreen.mainScreen().bounds.size.height == 568.0
}

EDIT:

The previous code works but the best solution is the follow one.

Go in Images.xcssets -> Your Image -> Attribute inspector -> Select Device Specific under Devices section -> select Retina 4-inch and drag and drop the 4-inch image.

Carmelo Gallo
  • 273
  • 4
  • 12