不同屏幕尺寸的图像缩放/绘制有哪些好的方法？

Question

在我的iPhone应用程序中，我有一个控件，在不同的屏幕上具有非常不同的大小。例如，（在iOS点坐标中）

3.5英寸设备（iPhone 4S）：242x295

4英寸设备（iPhone 5系列，SE）：242x383

4.7英寸设备（iPhone 6系列）：297x482

5.5英寸设备（iPhone 6 Plus系列）：336x551

正如您所看到的，这些控件大小不成比例。 问题 此控件具有图像作为其背景。该特定图像对于品牌身份和我的公司设计师想要采用的自定义外观非常重要。该图像呈现出一种材料的外观并具有纹理。它也在自身内部有阴影。我想将此图像应用于不同屏幕大小的控件（我的控件大小根据可用空间在运行时确定，因为苹果随时可能推出新的屏幕大小）。 我的当前解决方案 设计师为每个屏幕大小制作了单独的PNG，并在事先通过数学计算确定大小后，使用if-else为屏幕大小硬编码到我的控件上。正如您可能已经注意到的那样，这是一种可靠性很差的方法。我还想扩展到iPad，拥有更好的缩放系统肯定会有所帮助。

一个想法是，我将重复纹理的最小单元图像应用于我的控件，并使用重复选项进行缩放，以获得最终图像。然而，这样我就失去了阴影和圆角。（我也尝试过直接使用最大的图像，但不成比例的缩放使得圆角非常难看）

我试图寻找解决方案，但大多数资源都没有涉及此类图像。我不能失去这个图像的任何部分，它应该完全应用于控件，包括阴影和角落。

如果我使用了错误的词语来寻找答案或者我的描述显得太幼稚，我深感抱歉。这是我第一次在Stack Overflow发帖，我期待着听到你们的回复。

谢谢！

p

编辑：

这适用于自定义的基于UIButton的控件，以呈现卡片的外观。

编辑2：Wain似乎提出了一个完美的答案。我会尝试一下并让大家知道结果。

- Derpity Derp

---

展示一些图片的例子。 - Wain

@Wain 好主意。我在原帖中添加了一张图片，但还不能嵌入它。（声望点数） - Derpity Derp

Answer 1

您可以使用Assets.xcassets来管理iOS中的图像。您可以按1x、2x和3x比例制作图像。

例如，如果您想要一个50x50像素大小的图标，则1x应为50x50， 2x应为100x100，3x应为150x150。然后，iOS会自动从这个集合中选择适当的图像。

希望这能帮到您 :)

- Ketan Parmar

---

好的，我理解使用2x和3x图像的概念。但是假设我有一个UIImageView，在iPhone 5上显示一个（理论上）50x50的图像。现在在iPhone 6上，我希望它显示一个60x60的图像，因为该图像是屏幕上的主要控件。能够实现这个吗？ - Derpity Derp

是的，你可以通过不同的方式来实现。你可以根据屏幕大小更改imageView的框架（在我看来是最糟糕的方式，因为需要太多的if else来检测不同的屏幕大小），另一种方式是使用自动布局（最好的方式）。如果你想要根据屏幕大小动态调整高度和宽度，你可以使用自动布局，但这需要对其有很好的掌握。 - Ketan Parmar

谢谢，Lion。我仍然担心缩放的问题。我知道在iPhone 6P上，一切都实际上是3倍，使用50x50图片只会生成一个150x150的结果。如果您尝试将其拉伸到180x180（如60x60所需），则结果将模糊不清。我能想象，在iPhone 6和5上，该问题被解决了，因为系统可以缩小3倍的图像。 - Derpity Derp

您可以使用最大的图像。如果您需要将最大值限制为180，则可以使用60、120和180。如果您在较小的ImageView中使用此图像，则我认为不会出现任何问题。 - Ketan Parmar

这让我们回到了关于不成比例的图像尺寸问题的起点。我认为@Wain的方法是最好的。 - Derpity Derp

Answer 2

我会按照您的描述使用平铺，并结合更改视图层的圆角半径和应用阴影偏移。通过这种方式，您可以将图像的重要部分分离出来，使其易于重复使用，并且可以利用CALayer的功能。

请注意，当您设置图层的shadowOffset时，还应查看shadowColor、shadowRadius和shadowOpacity。

- Wain

---

我喜欢这种方法，因为它潜在地节省空间和内存，并且更加健壮（尽管绘制图像可能需要更多的处理。那应该是小问题，对吧？）。我在平铺方面遇到了很大的困难——也感谢你帮忙解决了这个问题。 - Derpity Derp

是的，系统提供了这个功能，它非常快速，您几乎不会注意到任何差异，而且实际上可能更快，因为瓷砖加载速度快，并且在UI缓冲区中更容易复制。 - Wain

Answer 3

iPhone 5、iPhone 6 和 iPhone 6P 的纵横比几乎相同。但是，iPhone 4 的纵横比不同。

以下是帮助您的步骤。

• 因此，您需要一个适用于 iPhone 5 和其 @2x、@3x 图像以及 iPhone 4 及其 @2x 图像的图像，

  即，如果您有一张尺寸为 242x383 的 iPhone 5 图像，则需要其 @2x 和 @3x 图像，以及与 iPhone 4 尺寸兼容的图像。

• 您需要将 UIImageView 的 contentMode 设置为 aspectFit。

所以，想法是，分别制作 iPhone 5 的图像和其 @2x、@3x 图像 和 iPhone 4 的 图像。或者您可以将所有内容放在 UIScrollView 中，并为 iPhone 4 设置 scrollView 的 contentSize 为 568。并为 iPad 制作不同的图像。

- Jatin Chauhan

---

这与我现在使用的方法类似。但是随着我转向iPad，我又不得不制作不同的图像（但它们都是相同的比例，对吧？）。难道没有更好的方法，不需要每当苹果推出不同的屏幕时就制作单独的图像吗？ - Derpity Derp

此外，iPhone 6和6P拥有更多的屏幕空间。如果我只是使用较小的尺寸，我将无法利用所有可用的空间。您是否在说iOS会自动使用2x和3x图像，将较小的图像完美地缩放到较大的控件上？ - Derpity Derp

我已经更新了我的答案，对于iPad，您必须创建不同的图像。而对于iPhone 6P，则使用@3x图像。要调整控件的大小，您必须使用自动调整大小或自动布局。 - Jatin Chauhan

自动调整大小能否将较小的图像完美地缩放到较大的画布上？我认为这在物理上是不可能的。请解释一下。 - Derpity Derp

是的，对于简单的设计它可以完美运行，但是当涉及到复杂的设计时，更好的方式是为iPhone和iPad创建不同的故事板或XIB。 - Jatin Chauhan