IOS 8 图像缩放和自动布局 [英] IOS 8 image scaling and auto layout

问题描述

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

lets say I have a UIView with only one image centred in the top part of the UIView, and I provided an image asset for the image like so

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

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

So apparently the width and height of the image get increased with different devices, so the questions is how do I deal with auto layout, should I set the width and height constraints to greater than or equal or what? And also how do I deal with the positioning of the image itself? And the last thing I noticed that the IOS simulator always uses the same image for different devices, is it a bug or a problem from my end?

推荐答案

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

You need to understand difference between points and pixels for this. We design views in interface builder not in pixels but points.

1.对于普通屏幕(非视网膜)点 = 像素.

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

So if we set image view's height and width to 50 * 50 in interface builder and load up image of 50 by 50 pixels, it will just fit right, if we load image of 100 by 100 pixel in a 50*50 imageview it will rescale the image and some compression artifacts may arise.

<强>2.对于视网膜显示点 = 2 像素.

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

So for a 50*50 image view you need to load up image of 100*100 pixel . It will look sharper and no compression artifacts occur.

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

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

So for 50*50 image view you need to load up 150*150 image.

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

The imageview won't rescale to 150*150 in 6+ as you presume . It will be 50*50 but contain 150*150 pixel image which will result in super sharp display.

这篇关于IOS 8 图像缩放和自动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！