Xcode中@2x图像后缀在iOS中未显示为Retina

Question

我在处理视网膜图片时遇到了困难。

下面的截图展示了包含UIImageView的UICollectionViewCell的UICollectionView。

在应用程序中，我有一张512x512像素的大图，名为travel.png。 绿色圆圈显示的是当我将该文件命名为travel.png时在应用程序中显示的内容。 蓝色圆圈显示的是当我将图像名称更新为[e-mail]（即视网膜命名）时看到的内容。

由于图像尺寸很大（512x512），我希望仅添加@2x后缀就足以将其转换为两倍清晰度（即视网膜），但是从两个屏幕截图中可以看出，这两个版本的图像都未显示为视网膜。

如何更新图像才能以视网膜的形式显示？

travel.png:

[e-mail]: * 更新 * 根据下面评论的要求：

我通过调用以下函数来加载此图像：

// Note - when this method is called: contentMode is set to .scaleAspectFit & imageName is "travel"
public func setImageName(imageName: String, contentMode: ContentMode) {

    self.contentMode = contentMode
    if let image = UIImage(named: imageName) {
        self.image = image
    }        
}

以下是翻译的结果：

这是在应用程序渲染图像之前，它在Xcode中的样子（您可以看到它具有足够高的清晰度）：

- Charlie S

---

你如何加载图像以供显示？另外，你能否将图像本身发布在某个地方？如果图像看起来很粗糙，重命名它并不能神奇地使其变得平滑。 - matt

@matt - 感谢您的请求。我已经在自定义ImageView类中添加了设置图像的方法，并提供了在xcode中图像的外观（相当高清）。 - Charlie S

也许考虑创建一个小的示例代码来展示这个问题。那样检查出问题会更容易。 - manishg

如果图像视图的尺寸比图像大小小得多（从截图看起来是这样的），您是否尝试使用较小尺寸的图像？有时，即使在“缩小”图像时，图像也会变得像素化。因此，只需使用外观非常清晰且无像素的图像资源即可，在正确的2x尺寸下，即对于80x80 uiimageview，2x分辨率图像的尺寸只需要约为160x160 px。 - Swapnil Luktuke

“非常渴望学习如何在我的现有应用中添加高清功能。” 但是没有兴趣创建演示项目展示你正在做的事情。 - matt

Answer 1

你看到低质量图像的原因是反锯齿。当你提供比UIImageView（scaleAspectFit模式）实际框架更大的图像时，系统会自动缩小它们。在缩放过程中，曲线形状可能会添加一些反锯齿效果。为避免这种效果，应提供要在屏幕上显示的确切图像大小。

要检测UIImageView是否自动缩放图像，可以在模拟器菜单中打开调试->颜色不对齐的图像：

现在，所有缩放后的图片都将在模拟器上用黄色突出显示。每个突出显示的图像可能会有抗锯齿伪影，并影响缩放算法的CPU使用率：

为解决这个问题，您应该使用精确的尺寸。这样系统就可以直接使用它们，而无需进行任何额外的计算。例如，如果您的按钮大小为80x80像素，则应在断言目录中添加三个图像，其尺寸和dpi如下：80x80像素（72 dpi），160x160像素（144 dpi）和240x240像素（216 dpi）。

现在，图像将以更好的视觉质量在屏幕上绘制，而无需缩小。

- Anton Vlasov

Answer 2

如果您的意图是为所有尺寸使用同一张图片，我建议将其放在Assets.xcassets下。在这里创建文件夹结构和管理媒体资产很容易。 步骤

1. 点击+图标，您将看到一个操作列表。选择创建一个New folder。
2. 选择新创建的文件夹，再次点击+图标，然后单击New Image Set。
3. 选择图像集。选择属性检查器。
4. 在Scales下选择Single Scale。
5. 拖放图片。
6. 根据需要重新命名图像名称和文件夹名称。 现在，您可以使用图像名称在所有屏幕尺寸上使用此图像。

- Arun Balakrishnan

Answer 3

简述：

将视图层的minificationFilter更改为.trilinear

imageView.layer.minificationFilter = .trilinear

如下设备截图所示：

正如Anton的回答所指出的那样，你观察到的混叠效应是由于源图像与显示它的图像视图之间的尺寸差异很大造成的。如果不改变源图像本身的尺寸，则添加@2x后缀不会改变任何内容。

那么，有一种简单的方法可以改善这种情况，而不需要调整原始图像的大小：CALayer可以控制图形后端用于调整图像大小的方法: minificationFilter和magnificationFilter。第一个对你的情况很重要，因为图像大小正在被缩小。默认值为CALayerContentsFilter.linear，只需切换到.trilinear即可获得更好的结果（这些维基百科页面上有更多信息）。这将需要更多GPU功率（因此电池），特别是如果你将其应用在许多图像上。

在显示图像之前，您应该考虑调整图像的大小，无论是静态地还是在运行时调整大小（并可能缓存已调整大小的版本）。除了视觉质量差之外，在UI中使用如此大量的大型图像将会降低性能并浪费大量内存，导致潜在的其他问题。

- amadour

Answer 4

我已经解决了@DarshanKunjadiya的问题。 请确保（如果您已经在使用资源）：

1. 确保图像没有未分配的
2. 现在在Storyboard或代码中使用不带扩展名的图像。（例如：“image”而不是“image.png”）

如果您没有使用来自资源的图像，请将它们移动到资源中。

演示项目

希望能有所帮助。 请告诉我您的反馈意见。

- Muhammad Waqas

Answer 5

我认为没有 @2x 和 @3x 的图像会在低分辨率设备上（如 iPhone 4 和 3G）渲染。 我认为解决方案是始终使用 .xcassets 文件或在您的图像名称中添加 @2x 或 @3X。

- Houcem Eddine Soued

Answer 6

在iOS中，内容是根据iOS坐标系统放置在屏幕上的。在具有1:1像素密度的标准分辨率系统上显示图像时，我们应该提供@1x分辨率的图像。对于更高分辨率的显示器，像素密度将是2.0、3.0的比例因子，在iOS系统中分别称为@2x和@3x。也就是说，高分辨率显示需要更高密度的图像。

例如，如果您想在标准分辨率下显示一个大小为128x128的图像。您必须提供相同的@2x和@3x尺寸的图像。即，256x256在@2x版本和384x384图像在@3x版本。

在以下截图中，我提供了一个256x256大小的图像用于2x版本，在iPhone 6s上显示一个128x128像素的图像。iPhone 6s以@2x大小呈现图像。使用包含三个版本的图像的资产目录（即1x、2x和3x）将解决您的问题。因此，iPhone将会自动根据屏幕分辨率自动渲染正确尺寸的图像。

- Febin Fathah

---

请阅读以下链接，了解有关iPhone显示高分辨率图像的人机界面指南。https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/ - Febin Fathah

1. 我认为从问题中可以清楚地看出，人们并不期望了解有关2x和3x工作原理的一般信息。
2. 在您回答中的示例中（128x128为1x），3x尺寸将是384x384而不是512x512。

- Swapnil Luktuke

@SwapnilLuktuke 抱歉，我不小心打错了 512x512。 - Febin Fathah