TabBar图像应该是多大?

我有一个大小为100的tabBar的图标。

我检查了苹果的人机界面指南 ,它说图像大小应该是30x30 / 60x60

但是,因为标签栏控制器的高度是50,我保持图像的大小在50x50

现在,当我运行这个项目的时候,我看到了下面那个丑陋的devise:

在这里输入图像说明

任何想法,我应该使用什么大小的图像,使devise将是完美的?

注意:我也不是写文本(例如,主页,search等)。 标签button的文本在图像本身。

30×30是分数,这意味着30px @ 1x,60px @ 2x,而不是中间的某处。 另外,将标签的标题embedded到图像中并不是一个好主意 – 您将会遇到非常差的可访问性和本地化结果。

根据苹果人机界面指南 :

@ 1x:约25 x 25(最大:48 x 32)

@ 2x:约50 x 50(最大:96 x 64)

@ 3x:约75 x 75(最大:144 x 96)

参考: https : / /开发人员。 /] 。

在这里输入图像说明

所以50×50尺寸是一个不错的select。

根据我的实践,我使用标准的iPad标签栏项目图标40×40,视网膜80×80。

从苹果的参考。 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

如果您想创build一个看起来与iOS 7图标系列相关的栏图标,请使用非常细的笔画来绘制它。 具体来说,2像素笔画(高分辨率)适用于详细图标,3像素笔画适用于较不详细的图标。

无论图标的视觉风格如何,请按以下尺寸创build工具栏或导航栏图标:

大约44 x 44像素大约22 x 22像素(标准分辨率)无论图标的视觉风格如何,请创build以下大小的标签栏图标:

约50 x 50像素(最大96 x 64像素)标准分辨率约25 x 25像素(最大48 x 32像素)

大拇指首先使用代码请! 创build一个完全覆盖每个项目的整个标签栏项目的图像。 这是需要使用您创build的图像作为标签栏项目button。 请确保每个标签栏项目的高度/宽度比率都相同。 然后:

 UITabBarController *tabBarController = (UITabBarController *)self; 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]; int x,y; x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like. //because the whole tab bar item will be replaced by an image, u dont need title tabBarItem1.title = @""; tabBarItem2.title = @""; tabBarItem3.title = @""; tabBarItem4.title = @""; [tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item