在不知道运行时的尺寸时提供正确的图像尺寸

supplying the right image size when not knowing what the size will be at runtime

我在集合视图中显示图像网格(3 行 x 3 列)。每张图片都是一个正方形,其宽度确定为 collectionView 宽度的 1/3。集合视图固定在主视图的左右边缘。

我不知道运行时图像的高度和宽度是多少,因为各种iPhone的屏幕尺寸不同。例如,每张图片在 5S 上的显示像素为 100x100,但在 6+ 上为 130x130。我被建议提供与屏幕尺寸完全匹配的图像。较大的图像在缩小尺寸时往往会变得像素化且过于锐利。如何解决这样的问题?

如果您的图像是照片或使用光栅绘图工具创建的光栅类型图像,那么您必须在某个地方将原始图像缩放到您想要的尺寸。您可以在 运行 在 iOS 中执行此操作,或者使用可以为您提供更好缩放结果的工具预先创建设置。不幸的是,唯一完美的图像将是原始图像,其他一切都是对事实的歪曲。

对于图标来说,唯一准确的渲染方案是使用矢量图形。像 Adob​​e Illustrator 这样的工具可以让您创建可以缩放到不同大小而不会降低清晰度的图像。不幸的是,这仍然会让您预先生成图像。您可以使用大多数工具编写这一代的脚本,并且假设您说您的图像都是方形的,那么所需的总数并不大。 iPhone 最多需要 3 个(4/5 宽度相同,6 和 6+),iPad 最多需要 2 个(mini/ipad1 需要@1,视网膜需要 @2)。

尽管据我所知iOS 不直接支持矢量图像渲染,但有一些第 3 方工具。 http://www.paintcodeapp.com/ 是一个示例,它似乎可以让您导入矢量图像或绘制矢量图像,然后在您的应用程序中为 运行 生成图像代码。这种工具可以满足您的需求,因为图像现在是按照您在 运行 时选择的比例绘制的矢量图。不过 99 美元。

还有 SVGKit (https://github.com/SVGKit/SVGKit),但不确定 good/bad 这是怎么回事。它似乎可以让您直接从 SVG 文件加载和渲染。可能值得一试。

所以总而言之,我认为您可以使用可以控制输出的工具预先生成相对较小的子集,在 iOS 中点击并让它缩放图像,或者使用第 3 方矢量到图像渲染工具包,它会给你你想要的。

通常的解决方案是为单分辨率、双分辨率和三分辨率屏幕提供三个版本,并在首次需要图像时通过 drawInRect 重新绘制到图形上下文中实时缩小尺寸.

I do not know what the image height and width will be at runtime, because of different screen sizes of various iPhones. For example each image will be 100x100 display pixels on 5S, but 130x130 on 6+

好的,所以你的第一句话是谎言。第二句话证明你确实知道不同屏幕尺寸的尺寸是多少。显然,如果我告诉你设备的名称,你可以告诉我你认为图像大小应该是多少。因此,如果您不想在运行时缩小较大的图像,因为您不喜欢由此产生的质量,只需为每个设备提供正确大小和分辨率的实际图像,并在您的实际设备类型上使用正确的图像发现自己 运行 在。