iOS 5自定义标签栏图像垂直对齐

Question

我的自定义标签栏出现一些奇怪的行为。 图像似乎未正确对齐。 这是屏幕截图（我已经删除了自己的标签栏背景以突出显示我的问题）：

这是我用来设置每种状态的图像的代码：

self.tabBarController = [[[UITabBarController alloc] init] autorelease];
self.tabBarController.viewControllers = [NSArray arrayWithObjects:homeNavController, whatsOnNavController, mapNavController, infoNavController, nil];
self.tabBarController.delegate = self;

// For iOS 5 only - custom tabs
if ([self.tabBarController.tabBar respondsToSelector:@selector(selectedImageTintColor)]) 
{

    // Set the background images
    //[[UITabBar appearance] setBackgroundImage: [UIImage imageNamed:@"nav_bg.png"]];
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"nav_over.png"]];

    [homeNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_home_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_home"]];
    [whatsOnNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_whats_on_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_whats_on"]];
    [mapNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_map_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_map"]];
    [infoNavController.tabBarItem setFinishedSelectedImage:[UIImage imageNamed:@"nav_info_over"] withFinishedUnselectedImage:[UIImage imageNamed:@"nav_info"]];

}

我所有的替换标签图像的尺寸均正确（非视网膜版本的高度为49像素，宽度为80像素）。

是什么导致这种奇怪的行为？

-更新-

这是带有背景的更新屏幕截图：

Answer 1

UIBarItem上有一个属性（UIBarButton项从此类继承） imageInsets 。

要使用全高的图像（49px） finishedSelectedImage和finishedUnselectedImage你需要设置这些图像插图：

tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);

Answer 2

您现在可以在情节提要中修复此问题。 故事板大小检查器图像插图调整

选择要调整的选项卡栏项目，打开“尺寸检查器”，然后调整“顶部和底部图像插入”。 您需要将它们调整为相同的数量，否则它们只会挤压/拉伸图像（因此，顶部为+5，底部为-5）

Answer 3

这看似有点骇人听闻，但我相信这是实现您想要的唯一方法：您只需要使用带有透明11像素“顶部填充”（视网膜为22像素）的标签栏完成图像。 然后，您的图片必须为60px（120px）高。

我的应用程序使用此技术将其发布到App Store，因此您应该放心使用它。

希望能帮助到你！

Answer 4

该API的文档确实很少。

你finishedSelectedImage应该是一个图标〜30×30像素。 这只是选项卡的图标部分。 如果创建的finishedSelectedImage太高，系统将不会将其放置在屏幕底部。

从概念上讲，您首先为tabBar使用全宽，49px高的backgroundImage ，添加一个具有单个Tab宽度，高49px的selectionIndicatorImage作为选定标签的背景图片，然后为每个标签的图标添加两个版本〜30x30 px， finishedUnselectedImage和finishedSelectedImage 。

Answer 5

事实证明，您应该始终在Tabitem中包含文本。 该空格由空白文本创建。

Answer 6

如果将图像添加为具有定义框架的子视图，则可以为您提供帮助。 检查一下

尝试使用稍小的图像，标签栏将其稍微重新定位