[英]iOS 5 custom tab bar image vertical alignment
I'm getting some odd behaviour with my custom tab bar. 我的自定义标签栏出现一些奇怪的行为。 The images seem to be aligned incorrectly.
图像似乎未正确对齐。 Here is a screenshot (I have removed my own tab bar background to highlight my problem):
这是屏幕截图(我已经删除了自己的标签栏背景以突出显示我的问题):
Here is the code I'm using to set the images for each state: 这是我用来设置每种状态的图像的代码:
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"]];
}
All of my replacement tab images are correctly sized (49 pixels high and 80 pixels wide for the non-retina versions). 我所有的替换标签图像的尺寸均正确(非视网膜版本的高度为49像素,宽度为80像素)。
What could be causing this odd behaviour? 是什么导致这种奇怪的行为?
Here is an updated screenshot with the background in place: 这是带有背景的更新屏幕截图:
There is a property on UIBarItem (UIBarButton item inherits from this class) imageInsets
. UIBarItem上有一个属性(UIBarButton项从此类继承)
imageInsets
。
To use full height images (49px) for finishedSelectedImage
and finishedUnselectedImage
you need to set these image insets: 要使用全高的图像(49px)
finishedSelectedImage
和finishedUnselectedImage
你需要设置这些图像插图:
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
You can fix this in Storyboard now. 您现在可以在情节提要中修复此问题。 Storyboard size inspector image inset adjustment
故事板大小检查器图像插图调整
Select the Tab Bar Item you want to adjust, open the Size Inspector, and adjust the Top and Bottom Image Insets. 选择要调整的选项卡栏项目,打开“尺寸检查器”,然后调整“顶部和底部图像插入”。 You need to adjust them the same amount or they will just squish/stretch your image (so +5 in Top, and -5 in Bottom)
您需要将它们调整为相同的数量,否则它们只会挤压/拉伸图像(因此,顶部为+5,底部为-5)
This may seem a bit hackish but I believe it's the only way you can achieve what you want: you just need to use tab bar finished images which have a transparent 11 pixels "top padding" (22 pixels for retina). 这看似有点骇人听闻,但我相信这是实现您想要的唯一方法:您只需要使用带有透明11像素“顶部填充”(视网膜为22像素)的标签栏完成图像。 Your images will then have to be 60px (120px) high.
然后,您的图片必须为60px(120px)高。
My app made it to the App Store using this technique, so you should be safe to use it. 我的应用程序使用此技术将其发布到App Store,因此您应该放心使用它。
Hope it helps! 希望能帮助到你!
This API is really poorly documented. 该API的文档确实很少。
Your finishedSelectedImage
should be an icon ~30x30 px. 你
finishedSelectedImage
应该是一个图标〜30×30像素。 This is just the icon part of the tab. 这只是选项卡的图标部分。 If you create a
finishedSelectedImage
that's too tall, the system will not put it right at the bottom of the screen. 如果创建的
finishedSelectedImage
太高,系统将不会将其放置在屏幕底部。
Conceptually, you start with a full-width, 49px high backgroundImage
for the tabBar, add a single-tab-width, 49px high selectionIndicatorImage
which functions as the background image for the selected tab, then add a two versions of each tab's icon ~30x30 px, finishedUnselectedImage
and finishedSelectedImage
. 从概念上讲,您首先为tabBar使用全宽,49px高的
backgroundImage
,添加一个具有单个Tab宽度,高49px的selectionIndicatorImage
作为选定标签的背景图片,然后为每个标签的图标添加两个版本〜30x30 px, finishedUnselectedImage
和finishedSelectedImage
。
It turns out that you should always have text inside a tabitem. 事实证明,您应该始终在Tabitem中包含文本。 The space was created by blank text.
该空格由空白文本创建。
If you add the image as a subview instead with frames defined, can help you out. 如果将图像添加为具有定义框架的子视图,则可以为您提供帮助。 Check this
检查一下
Try using slightly smaller images, tabbar repositions them slightly 尝试使用稍小的图像,标签栏将其稍微重新定位
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.