选项卡项目和设置它们的图像大小？

Question

我目前正在为我的选项卡条目添加图片。我喜欢的一张图片尺寸比选项卡条目的区域要大得多。当我在故事板中设置该条目的图像并运行仿真器时...带有该图像的条形按钮会覆盖整个屏幕。

现在，我认为有一种自动方式可以允许每个条形按钮的图像自适应大小。可惜的是，这不是情况。在选项卡加载时，是否有一种方法可以调整每个选项卡栏内的图像大小？

- MooCow

---

你是如何添加这张图片的？是通过Storyboard还是代码实现的？ - Dhruv Ramani

通过故事板。 - MooCow

Answer 1

每个选项卡栏目应准备3张图标(1x, 2x和3x)。

首先创建大小为75w 75h像素的3x图像（最大尺寸：144 x 96），并将其保存为[e-mail]。

然后将其调整大小为50w 50h像素（最大尺寸：96 x 64）并将其保存为[e-mail]。

最后将其调整大小为25w 25h像素（最大尺寸：48 x 32）并将其保存为iconTab0.png。

现在，您只需要在Finder中选择这3张图像并将它们拖到您的图像资源中。

人机交互指南

- Leo Dabus

---

前往images.xcassets，然后选择新的图像集，如何填充图像？ - MooCow

我明白了...拖放 - MooCow

首先选择Images.xcassets，然后选择这3个文件，只需将它们放在AppIcon下方的任何位置即可。 - Leo Dabus

请问，每个选项卡项目（1x、2x 和 3x）的尺寸是否是标准和被接受的尺寸？ - MooCow

此答案不涵盖使用“preserve-vector-data”标志的情况。在这些情况下，图像会扩展到呈现的元素的大小。 - regina_fallangi

Answer 2

另一个选项是创建矢量图PDF。您需要将矢量图调整大小到最小尺寸（22x22），然后将其导出为PDF文件。您可以使用Adobe Illustrator、Sketch和许多其他矢量图像编辑工具来完成此操作。

然后，将PDF文件添加到资产文件夹中，并在属性检查器中将“比例因素”设置为“单个矢量”。这样就完成了！

- Mark Moeykens

---

这是最佳答案。不确定为什么它没有被标记为“答案”。这样，您就不需要为所有不同大小创建多个图像。 - zumzum

对于选项卡图标，我认为应该是25x25的尺寸。https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/ - Rygen

我确实推荐这种方式，但由于有点晚了，答案还没有被标记。 - MooCow

嗨Mark，我在Xcode v10.2中找不到“比例因子”选项。我看到的最接近的东西是“缩放”，它有“单一缩放”（即全部）和“个别缩放”（即1x、2x、3x）的选项；然而，这并没有提到矢量。这仍然是相同的选项吗？我要查找的资源是矢量PDF，所以那不是问题。 - TheNeil

@TheNeil 这里有一个关于如何在Xcode 10.2中实现的好答案：https://dev59.com/a1UL5IYBdhLWcg3w-sV4#55712653 - musical_coder

Answer 3

在ios8中很容易实现这个功能。在Storyboard中，点击每个选项卡项（要更改图像的选项卡控制器）。

相应地设置insets...

然而，有此问题。使用此方法可以解决。

- Ryan Walton

Answer 4

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

若要调整图片大小，一种好的且简单的方法是：

1. 将您的图片添加到Assets.xcassets文件夹中的1x、2x、3x框中。
2. 然后，单击每个框中的图片，并双指点击触摸板/右键单击，这将显示此处的选项：

3. 单击“Open with External Editor”，这将带您到预览界面。
4. 单击“工具”，然后选择“调整大小”。

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

- Colin Hong

---

这太棒了，我刚试过了！只有一个问题 - 如果你有一张34像素x 34像素的图片，另一张是64像素x 64像素，当你的目标大小为50像素x 50像素时，你通常应该尝试使用比目标大小更小或更大的图像？ - cheznead

@Colin Hong 很好的回答！ - Lance Samaria

请点击此处查看： https://softwarerecs.stackexchange.com/questions/399/app-to-quickly-generate-correctly-resized-ios-app-icons/37770#37770 - Rajamohan S