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

}

我所有的替换标签图片大小都正确（非Retina版本高49像素，宽80像素）。

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

--- 更新 ---

这里是一个有背景的更新后的截图：

- boz

Answer 1

UIBarItem（UIBarButton遵循此类）有一个属性叫做imageInsets。

如果要使用完整高度的图像（49px）作为finishedSelectedImage和finishedUnselectedImage，则需要设置这些图像的插入：

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

- Vytis

---

这对我有效，但只适用于未选中的图像。选中的图像顶部有一条黑线！请问有什么想法吗？ - user1006117

运行得非常好。虽然5,0,-5,0看起来更像居中对齐。 - Ansari

我仍然可以点击问题中显示的地图图像选项下方的额外空间，以及在设置图像插图后地图选项上方的空间。为什么会这样？ - Pooja Shah

你的回答对我很有帮助，兄弟加一。 - Hasya

Answer 2

现在您可以在Storyboard中修复此问题。Storyboard大小检查器图像插入调整

选择要调整的选项卡栏目，打开大小检查器，并调整顶部和底部图像插图。您需要将它们同样地调整，否则它们只会压缩/拉伸您的图像（因此在顶部+5，在底部-5）

- Tim Walsh

Answer 3

这可能看起来有些不专业，但我认为这是您实现所需的唯一方法：您只需要使用带有透明11像素“顶部填充”（视网膜屏幕为22像素）的选项卡栏完成图像。然后，您的图像高度必须为60px（120px）。

我的应用程序使用此技术成功上架 App Store，所以您可以放心使用它。

希望对您有所帮助！

- Andrea Sprega

---

很聪明 - 我下一个应用程序会试试这个。我在初始问题中提到的那个应用程序已经上线了。 - boz

只需在您的 tabBar 图像上添加额外的顶部透明填充，它就应该居中对齐。 - shahil

Answer 4

原来在tabitem中总是需要有文本。空白文本会创建间隔空间。

- boz

---

请问您能否澄清一下“您应该始终在tabitem内部放置文本”的意思？从上面的截图中，似乎您已经在tabBarItem.title中放置了文本。 - Joshua J. McKinnon

那段文本是图片的一部分，所以我尝试将标题设置为空字符串。 - boz

如果文本是作为图像的一部分绘制的，并且您不希望在其上方有额外的文本，只需设置一个带空格的字符串：@" "，它会起到作用，因为它不是空字符串并且不会显示出来。 - chrisben

Answer 5

这个 API 的文档非常不好。

你的 `finishedSelectedImage` 应该是一个 30x30 像素左右大小的图标，仅包含选项卡的图标部分。如果你创建的 `finishedSelectedImage` 太高，系统将无法将其放置在屏幕底部。

从概念上讲，你需要一个全宽、49像素高的 `backgroundImage` 作为 tabBar，添加一个单选项卡宽度、49像素高的 `selectionIndicatorImage` 作为所选选项卡的背景图像，然后添加每个选项卡的两个版本 ~30x30像素的图标 `finishedUnselectedImage` 和 `finishedSelectedImage`。

- Joshua J. McKinnon

Answer 6

如果您将图像作为子视图添加，并定义框架，可以帮助您解决问题。 查看此链接

尝试使用稍小的图像，选项卡会稍微重新定位它们。

- zahreelay

---

抱歉，我不明白那怎么能帮到我 - 我只是针对iOS 5.x。 - boz