UITabBar和UITabBarItem针对iPhone 5和iPhone 6具有特定的@2x图像

Question

我正在开发一款新的应用程序，并且我遇到了一些问题，需要自定义UITabBar并使其在使用@2x图像的iPhone 5和6上运行良好。

在AppDelegate.m文件中的didFinishLaunchingWithOptions方法中，我设置了背景图像和选定项目的图像：

//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]];

然后，按照相同的方法，对于每个项目，我设置了图像和插入:

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]];

我的问题与iPhone 5和6使用相同的@2x图像宽度有关，因为iPhone 5具有640px（320pts），而iPhone 6具有750px（375pts），所以我决定创建名为“[e-mail]”的selectedIndicatorImage，其宽度大小为150px。

因为我有5个UITabBarItem，所以750/5 = 150px（每个项目）。

图像[e-mail]（150px x 96px）： 在iPhone 6上运行时效果非常好，如下所示： 但是在iPhone 5上测试时，当选择该项时，UITabBarItem区域会扩展到相同的150px（与图像宽度相同），而不是缩小到128px（应该具有此大小以适合iPhone 5），如下所示： （请注意，例如第一个项目与第二个项目之间的宽度差异，但对于所有项目都是如此，似乎选定的图像覆盖了UITabBarItem）

我的@2x图像有150px，但由于我应该为iPhone 5和6使用@2x图像，所以我该如何处理此情况以适合UITabBarItem中的图像？如果我有一个150px的图像（为6）和另一个128px的图像（为5），它似乎只会起作用。

是否有任何解决方案可以使用相同的@2x图像，或者我需要编写代码来识别屏幕大小，然后选择哪个图像？

- Fernando

---

在2014年11月22日提出的问题，至今仍未得到回答？ - myexec

@Fernando，这个问题有什么强有力的解决方案吗？我也遇到了同样的问题：http://stackoverflow.com/questions/30460648/remove-mask-from-deselected-tabs-uitabbaritem-swift/30462346#30462346 - Bonnke

@Bonnke 很不幸，到目前为止我还没有找到一个好的解决方案，我的解决方法（很遗憾）与下面的答案非常相似，检查屏幕尺寸，然后选择正确的图像 :-/ - Fernando

@Fernando 没问题，伙计...我也是这样认为。看不到其他解决方案。感谢您的回复。 - Bonnke

Answer 1

同样的问题：

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

由于该图像是为4英寸的显示器设计的，因此在iPhone 6上无法正常工作。

我正在使用以下代码来修复它：

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

在工具类中：

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

编辑:

之前的代码可以工作，但最好的解决方案是以下方法。

进入Images.xcssets -> 您的图像 -> 属性检查器 -> 在“设备”部分下选择“特定设备” -> 选择Retina 4英寸并拖放4英寸的图片。

- Carmelo Gallo