IOS 8 图像缩放和自动布局

Posted 2023-02-23

【中文标题】IOS 8 图像缩放和自动布局

【英文标题】：IOS 8 image scaling and auto layout

【发布时间】：2015-03-24 14:48:22

【问题描述】：

假设我有一个UIView，只有一个图像位于UIView 的顶部居中，我为图像提供了一个图像资源，就像这样

iPhone 4s 和更早的 50x50 正常 @2x for iPhone 5/5c/5s/6 100x100 @3x for iPhone 6+ 150x150

显然图像的宽度和高度会随着不同的设备而增加，所以问题是如何处理自动布局，我应该将宽度和高度限制设置为大于或等于还是什么？还有我如何处理图像本身的定位？最后我注意到ios模拟器总是为不同的设备使用相同的图像，这是我的错误还是问题？

【参考方案1】：

为此，您需要了解点和像素之间的差异。我们在界面构建器中设计视图不是像素而是点。

1.对于普通屏幕（非视网膜）点 = 像素。

因此，如果我们在界面生成器中将图像视图的高度和宽度设置为 50 * 50 并加载 50 x 50 像素的图像，如果我们在 50*50 图像视图中加载 100 x 100 像素的图像，它将恰好适合它会重新缩放图像，并且可能会出现一些压缩伪影。

2。对于视网膜显示点 = 2 像素。

因此，对于 50*50 的图像视图，您需要加载 100*100 像素的图像。它会看起来更清晰，不会出现压缩伪影。

3.对于 6+ 点 = 3 像素。

因此，对于 50*50 的图像视图，您需要加载 150*150 的图像。

图像视图不会像您假设的那样在 6+ 中重新缩放为 150*150。它将是 50*50 但包含 150*150 像素的图像，这将导致超清晰的显示。

【讨论】：

好的谢谢，我明白了，但是你有好的教程吗？

reigndesign.com/blog/… 这可能会有所帮助。我建议您也阅读文章下方评论部分中的讨论。它使事情更清晰。

如果我想让图像视图本身调整不同尺寸怎么办？

为此，您必须设置约束以使图像缩放。由于图像视图具有内在的内容大小。这意味着它将根据您加载的图像缩小或扩大大小。如果您希望图像在不同尺寸的屏幕上重新缩放，则不应提供固定的高度/宽度。

【参考方案2】：

首先观看介绍：WWDC2014 https://developer.apple.com/videos/wwdc/2014/ 的界面构建器的新功能，并了解为不同的屏幕尺寸设计不同的 UI - 大、小、默认。

在界面生成器中，您应该使用最小的约束 - 50x50 并输入所用图像的正确名称。然后只需添加带有@2x @3x 前缀的其他图像，系统将根据您使用的设备使用它们。

【参考方案3】：

屏幕上 UI 图像的实际宽度/高度以点而不是像素定义。提供图像源，@2x、@3x 等，以便为更高分辨率的屏幕提供所需的额外像素精度。例如1x1pt 在所有屏幕上都是相同的，但显示高质量图像所需的像素是：@1x 为 1x1，@2x 为 2x2，@3x 为 3x3。

因此，请使用以磅为单位的宽度和高度来定义您的布局。除了为实际设备的不同分辨率提供版本之外，您实际上不需要担心原始图像像素。

您需要担心的主要考虑因素是图像在屏幕上缩放时的外观。通过以点为单位设置宽度和高度以匹配@1x 图像的像素宽度和高度来实现完美的图像。这样你就知道当它使用@2x 和@3x 时你在屏幕上的像素是完美的。使点的宽度和高度大于或小于原始图像分辨率将导致缩放或缩小图像，这将对图像的清晰度产生一些影响。