【问题标题】:What size should TabBar images be?TabBar 图像的大小应该是多少?
【发布时间】:2013-08-06 18:37:33
【问题描述】:

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

我检查了at Apple's Human Interface Guidelines of 2013,它说图像大小应该是30x30 / 60x60

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

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

知道我应该使用什么尺寸的图片才能使设计完美吗?

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

【问题讨论】:

  • "我有一个大小为 100 的 tabBar 的图标。"你是说 50 岁吗?

标签: ios objective-c uitabbarcontroller uitabbar uitabbaritem


【解决方案1】:

30x30 是点,这意味着 30px @1x,60px @2x,而不是介于两者之间。此外,将选项卡的标题嵌入到图像中也不是一个好主意——这样的可访问性和本地化结果会很差。

【讨论】:

  • 我知道这一点,但是如果我想在图像本身中添加文字,那该怎么办?
  • 如果您打算创建一个完全自定义的 UITabBar,您可能应该这样做,而不是使用标准 UIKit 版本的图像。否则我相信你会在底部留下死角。
  • 嗯,正在发生...我会要求设计师按照苹果支持的方式为标签栏制作默认图像...谢谢
  • 谢谢,伙计。这是一个大而快速的帮助。
【解决方案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 像素)

【讨论】:

    【解决方案3】:

    根据Apple Human Interface Guidelines

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

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

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

    【讨论】:

    • 是的,这是正确的根据苹果。查看以下链接以获取更多信息developer.apple.com/library/ios/documentation/UserExperience/…
    • 很酷,但是如何将图像制作得如此之小而不会模糊?
    • 已更新为 23x23(正方形)或 25x25(圆形图像)(developer.apple.com/ios/human-interface-guidelines/…)
    • Seop,您可以更新我的答案以反映最新信息。但注意到我说的是“大约 25”,所以我认为 23 在大约范围内。
    • 我主要使用方形字形,例如主页图标,很高兴@SeopYoon 指出了这一点。我将使用 23x23 作为标签栏图标大小。
    【解决方案4】:

    使用代码前请先点赞!!! 为每个项目创建一个完全覆盖整个标签栏项目的图像。这是将您创建的图像用作标签栏项目按钮所必需的。确保每个标签栏项目的高度/宽度比也相同。那么:

    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
    

    【讨论】:

      【解决方案5】:

      【讨论】:

      • 分辨率为@2x。 1x 大约是 25px。命名文件时要注意的事项
      【解决方案6】:

      根据最新Apple Human Interface Guidelines:

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

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

      【讨论】:

      猜你喜欢
      • 2016-12-19
      • 2014-06-02
      • 1970-01-01
      • 1970-01-01
      • 2021-04-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-10
      相关资源
      最近更新 更多