UITabBar and UITabBarItem with @ 2x specific image for iPhone 5 and iPhone 6

Question

I am developing a new application and Im having some problems to set up a UITabBar and make it work (design) perfectly on iPhone 5 and 6 using the @ 2x image.

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

//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 element, I set the image and insert:

 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 with the width of the iPhone 5 and 6 using the same @ 2x image, since the iPhone 5 has 640 pixels (320 dpi) and the iPhone 6 has 750 pixels (375 points), so I decided to create a selectedIndicatorImage called icone_home_selecionado @ 2x png "with size width = 150px

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

Image [e-mail] (150px x 96px):

It works great on iPhone 6, as ou can see:

But when testing on iPhone 5, when the item is selected, the UITabBarItem region expands to the same 150px (as the image width) instead of shrinking to 128px (suppose this size is suitable for iPhone 5) as you can see:

(note the difference in width from the first element to the second element, for example, but this happens to all of them, it seems that the selected image overlays a UITabBarItem)

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

Are there any solutions using the same @ 2x image, or do I need to encode to determine the screen size and then choose which image?

Answer 1

A similar problem with:

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

Due to the fact that the image is designed for 4 inches, it does not work properly in the iPhone 6.

I am using the following 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 the utilities:

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

EDIT:

The previous code works, but the best solution is the following.

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