【问题标题】:TabBarItems and setting their image sizes?TabBarItems 并设置它们的图像大小?
【发布时间】:2015-07-04 15:39:13
【问题描述】:

我目前正在为我的每个标签栏项目添加图像。我喜欢的一张图片的尺寸比条形项目的面积大得多。当我在情节提要中设置条形项目的图像并运行模拟器时...带有该图像的条形按钮会覆盖整个屏幕。

现在我认为有一些自动方法可以让图像为每个条形按钮调整大小。可悲的是,情况并非如此。有没有办法在标签栏加载时调整每个标签栏中的图像大小?

【问题讨论】:

  • 你是如何添加图片的?通过情节提要还是通过代码?
  • 通过故事板

标签: ios xcode uitabbar


【解决方案1】:

您应该为每个标签栏项目(1x, 2x and 3x)准备3个图像图标。

首先创建 3x at 75w 75h 像素(最大:144 x 96)并将其保存为 iconTab0@3x.png。

然后将其调整为 50w 50h 像素(最大:96 x 64)并保存为 iconTab0@2x.png。

最后将其调整为 25w 25h 像素(最大:48 x 32)并将其保存为 iconTab0.png。

现在您只需在取景器中选择这 3 张图片并将它们拖到您的图片资源中即可。

Human Interface Guidelines

【讨论】:

  • 转到 images.xcassets,然后选择新的图像集以及如何填充图像?
  • 我明白了...拖放
  • 首先选择 Images.xcassets 然后选择这 3 个文件并将它们放在 AppIcon 下方的任意位置
  • 每个选项卡项(1x、2x 和 3x)的尺寸是标准尺寸和可接受尺寸吗?
  • 你救了我的命
【解决方案2】:

另一种选择是创建矢量图像 PDF。您所做的是将矢量图像调整为最小尺寸 (22x22) 并将其导出为 PDF 文件。您可以使用 Adob​​e Illustrator、Sketch 和许多其他矢量图像编辑工具来做到这一点。

然后您将 PDF 文件添加到您的资产文件夹并在属性检查器中将“比例因子”设置为“单向量”。应该这样做!

【讨论】:

  • 这是最好的答案。不知道为什么它没有被标记为答案。这样您就不必为所有不同的尺寸创建多个图像。
  • 对于标签栏图标,我认为它应该是 25x25。 developer.apple.com/ios/human-interface-guidelines/graphics/…
  • 确实,这已经是很长一段时间了!应标记为答案。
  • 我使用的是 400*400 的 pdf 图像,我正在使用它到 UITabBar,有什么方法可以使 UITabbar 采用 400*400 的 pdf 图像?我也启用了单秤,请回复。
  • 嗨,马克。我在 Xcode v10.2 中找不到 Scale Factors 选项。我能看到的最接近的东西是Scales,它有“Single Scale”(即全部)和“Individual Scales”(即1x、2x、3x)选项;但是,这并没有提到有关 Vector 的任何内容。这仍然是相同的选择吗?我正在检查的资源是矢量 PDF,所以这不是问题。
【解决方案3】:

使用ios8 很容易做到这一点。在 Storyboard 中,单击每个选项卡项(您要更改图像的选项卡的单个控制器。

相应地设置insets...

虽然有this issue。已用this 修复。

【讨论】:

    【解决方案4】:

    @LeoDabus 提供了一个很好的答案。

    要调整图像大小,一个很好且简单的方法是:

    1. 将您的图像添加到 Assets.xcassets 文件夹中的 1x、2x、3x 框中。
    2. 然后,单击每个框中的图像并双击触控板/右键单击此处将显示选项:

    1. 点击“使用外部编辑器打开”,您将进入预览。
    2. 点击“工具”,然后点击“调整大小”。

    1. 根据您的要求调整图像的大小。然后点击“保存”并关闭窗口。 Xcode 中的图像应该是自动更新的。

    【讨论】:

    • 这太棒了,我刚试过!只是一个问题 - 如果您有一个 34px x 34px 的图像,另一个是 64px x 64px 的图像,您通常应该尝试使用小于还是大于目标尺寸的图像(例如,当您的目标是 50px x 50px 大小时) )?
    • @Colin Hong 好答案!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多