ios - TabBar图像应该是多大?

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

我检查了Apple的人机界面指南,它说图像大小应该是50x50/60x60

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

现在,当我运行项目时,我看到下面的丑陋设计:

enter image description here

知道我应该使用什么尺寸的图像,以便设计完美吗?

注意:我也不是在写文本(例如,主页,搜索等)。 选项卡按钮的文本位于图像本身。

6个解决方案
194 votes

根据Apple人机界面指南:

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

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

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

rsc answered 2019-09-10T08:26:05Z
98 votes

30x30是积分,这意味着30px @ 1x,60px @ 2x,而不是介于两者之间。 此外,将标签的标题嵌入到图像中并不是一个好主意 - 您将获得相当差的可访问性和本地化结果。

garrettmurray answered 2019-09-10T08:25:22Z
32 votes

根据最新的Apple人机界面指南:

在纵向方向上,标签栏图标显示在标签标题上方。 在横向方向上,图标和标题并排显示。 根据设备和方向,系统显示常规或紧凑的标签栏。 您的应用应包含两种尺寸的自定义标签栏图标。

enter image description here

enter image description here

我请求你们使用上面的链接来理解完整的概念。

Mihir Oza answered 2019-09-10T08:26:43Z
5 votes

参考:[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-图标/]。]

enter image description here

所以50x50尺寸是个不错的选择。

Allen answered 2019-09-10T08:27:14Z
2 votes

根据我的惯例,我使用40 x 40标准iPad标签栏项目图标,80 x 80用于视网膜。

来自Apple参考。[https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1]

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

无论图标的视觉样式如何,都要创建以下尺寸的工具栏或导航栏图标:

大约44 x 44像素约22 x 22像素(标准分辨率)无论图标的视觉样式如何,都要创建以下尺寸的标签栏图标:

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

firelyu answered 2019-09-10T08:28:10Z
-3 votes

请在使用代码之前先竖起大拇指!创建一个完全覆盖每个项目的整个标签栏项目的图像。 这是将您创建的图像用作标签栏项目按钮所必需的。 务必使高度/宽度比与每个标签栏项目相同。 然后:

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
James answered 2019-09-10T08:28:35Z
translate from https://stackoverflow.com:/questions/18068597/what-size-should-tabbar-images-be