TabBar图像应为多大？

99

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

我在2013年的《苹果人机界面指南》中进行了检查，并说图像尺寸应为30x30/ 60x60。

但是当标签栏控制器的高度为50时，我将图像的大小保持为50x50。

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

在此处输入图片说明

知道要使用什么尺寸的图像才能使设计完美吗？

注意：我也不在写文本（例如，主页，搜索等）。标签按钮的文本位于图像本身中。

— 法希姆·帕卡（Fahim Parkar）
source

1

“我有一个大小为100的tabBar图标。” 你是50岁吗

— 布拉萨德'16

112

30x30是点，表示30px @ 1x，60px @ 2x，而不是介于两者之间。另外，将选项卡的标题嵌入图像也不是一个好主意-这样您将很难获得可访问性和本地化结果。

— 加勒特穆雷
source

3

我知道这一点，但是如果我想在图像本身中添加文字，那该怎么办？

— Fahim Parkar

如果您打算创建一个完全自定义的UITabBar，则可能应该这样做，而不是将图像用于标准UIKit版本。否则，我相信您会在底部留下死角。

— garrettmurray 2013年

嗯，这正在发生...我会请设计师为苹果公司支持的标签栏制作默认图像...谢谢

— Fahim Parkar 2013年

谢了哥们。这是一个很大而又迅速的帮助。

— 费利佩

208

根据《Apple人机界面指南》：

@ 1x：约25 x 25（最大：48 x 32）

@ 2x：大约50 x 50（最大：96 x 64）

@ 3x：约75 x 75（最大：144 x 96）

— rsc
source

是的，根据苹果公司的说法，这是正确的。检查下面的链接了解更多信息developer.apple.com/library/ios/documentation/UserExperience/...

— Chamath杰文

很酷，但是如何使图像如此之小而不会模糊呢？

— niX

2

此后已更新为23x23（对于正方形）或25x25（对于圆形图像）（developer.apple.com/ios/human-interface-guidelines/…）

— Seop Yoon

Seop，您可以更新我的答案以反映最新信息。但是注意我说的是“大约25”，所以我认为23在该范围之内。

— rsc

我通常使用方形的字形，例如主页图标，很高兴@SeopYoon指出了这一点。我将使用23x23作为标签栏图标的大小。

— Cons Bulaquena

44

根据最新的《Apple人机界面指南》：

在纵向方向上，选项卡栏图标显示在选项卡标题上方。在横向模式下，图标和标题并排出现。根据设备和方向，系统会显示常规或紧凑的标签栏。您的应用应包括两种尺寸的自定义标签栏图标。

我建议您使用上面的链接来了解完整的概念。因为苹果会定期更新文档

— 小野美治（Mihir Oza）
source

2

由于这是他们的新指南，因此应该对此予以更多支持。

— Seop Yoon

有关说明如何为定期或紧凑标签栏设置不同的图标看到这样的响应：stackoverflow.com/questions/49492229/tab-bar-icon-size/...

— 玛丽安CERNY

6

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

因此，50x50尺寸是一个不错的选择。

— 艾伦
source

1

分辨率为@ 2x。1x约为25px。命名文件时要记住的一点

— Rene Pot

2

根据我的实践，我将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像素）

— 火柳
source

-3

使用代码前请先赞许！！！创建一个图像，该图像完全覆盖每个项目的整个选项卡栏项目。要使用您创建的图像作为标签栏项目按钮，这是必需的。确保每个标签栏项目的高宽比也相同。然后：

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

— 詹姆士
source