ios TabBar图像的大小应该是什么?

ibrsph3r  于 2023-05-23  发布在  iOS
关注(0)|答案(6)|浏览(233)

我有大小为100的tabBar的图标。
我检查了at Apple's Human Interface Guidelines of 2013,它说图像大小应该是30x30/60x60
但是由于标签栏控制器的高度是50,我将图像的大小保持在50x50
现在,当我运行这个项目时,我看到了下面丑陋的设计:

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

**注意:**我也不写文本(例如:主页、搜索等)。标签按钮的文本在图像本身中。

vatpfxk5

vatpfxk52#

根据我的实践,我使用40 x 40为标准iPad标签栏项目图标,80 X 80为视网膜。
苹果参考资料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像素)(标准分辨率)

vi4fp9gy

vi4fp9gy3#

请在使用代码之前先竖起大拇指!!!为每个项目创建完全覆盖整个选项卡栏项目的图像。要将创建的图像用作选项卡栏项按钮,需要使用此选项。确保每个选项卡栏项的高/宽比也相同。然后:

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
ipakzgxi

ipakzgxi4#

根据Apple Human Interface Guidelines
@1x:约25 x 25(最大值:48 x 32)
@2x:约50 x 50(最大值:96 x 64)
@3x:约75 x 75(最大值:144x96)

1l5u6lss

1l5u6lss5#

30 x30是点数,意思是30px@1x,60px@2x,而不是介于两者之间。另外,将标签标题嵌入到图像中并不是一个好主意--这样的可访问性和本地化结果会很差。

pokxtpni

pokxtpni6#

根据最新Apple Human Interface Guidelines:
在纵向方向,选项卡栏图标显示在选项卡标题上方。在横向中,图标和标题并排显示。根据设备和方向,系统显示常规选项卡栏或紧凑选项卡栏。您的应用应包含两种尺寸的自定义标签栏图标。

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

相关问题