20

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

截屏

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

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 像素宽）。

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

- - 更新 - -

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

截图 2

4

6 回答 6

66

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

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

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

于 2012-08-28T08:14:24.060 回答
25

您现在可以在 Storyboard 中解决此问题。故事板尺寸检查器图像插入调整 标签栏项目的故事板大小检查器

选择要调整的 Tab Bar Item，打开 Size Inspector，然后调整 Top 和 Bottom Image Insets。您需要将它们调整为相同的量，否则它们只会挤压/拉伸您的图像（因此顶部为 +5，底部为 -5）

于 2015-02-26T21:41:04.040 回答
3

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

我的应用程序使用这种技术进入了 App Store，所以你应该可以安全地使用它。

希望能帮助到你！

于 2012-06-13T22:59:52.077 回答
2

事实证明，您应该始终在 tabitem 中包含文本。该空间是由空白文本创建的。

于 2012-05-14T08:59:27.030 回答
2

这个 API 的文档记录真的很差。

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

从概念上讲，您从 tabBar 的全宽backgroundImage49px 高开始，添加一个单选项卡宽度、49px 高selectionIndicatorImage作为所选标签的背景图像，然后添加每个标签的两个版本的图标 ~30x30 px，finishedUnselectedImage和finishedSelectedImage。

于 2012-08-07T13:31:19.230 回答
-1

如果您将图像添加为子视图而不是定义了框架，可以帮助您。 检查这个

尝试使用稍小的图像，标签栏会稍微重新定位它们

于 2012-05-10T13:54:06.730 回答