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

Question

我在视网膜图像上遇到困难。

下面的屏幕快照显示了UICollectionView和每个UIImageView中包含的UICollectionViewCell。

在应用程序中，我有一个名为travel.png的512x512像素大图像。 当我将此文件命名为travel.png时，绿色圆圈显示应用程序上显示的内容。蓝色圆圈表示将图像名称更新为travel@2x.png（即视网膜命名）时看到的内容。

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

如何更新图像以使其显示在视网膜中？

travel.png：

travel@2x.png： *更新* 遵循以下评论中的要求：

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

// 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中的显示方式（如您所见，它具有足够高的清晰度）：

Answer 1

看到低质量图像的原因是anti-aliasing。当您提供更大的图像时，UIImageView的实际帧（scaleAspectFit模式）将由系统自动缩小。在缩放期间，可以在曲线形状上添加一些抗锯齿效果。为了避免这种影响，您应该提供要在屏幕上显示的确切图像尺寸。

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

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

要解决此问题，您应该使用确切的尺寸。因此，系统将直接使用它们而无需任何其他计算。例如，如果您的按钮尺寸为80x80px，则应添加三个具有以下尺寸和dpi的图像来断言目录：80x80px（72 dpi），160x160px（144 dpi）和240x240px（216 dpi）：

现在图像将在屏幕上绘制，而不会降低比例，并且具有更好的视觉质量：

Answer 2

如果您打算仅对所有尺寸使用一张图像，则建议在Assets.xcassets下使用。在这里创建文件夹结构和管理媒体资产很容易。

步骤

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

Answer 3

TL; DR;

将视图层的minificationFilter更改为.trilinear

imageView.layer.minificationFilter = .trilinear

，如下面的设备屏幕截图所示

正如安东（Anton）的答案正确指出的那样，您观察到的锯齿效果是源图像与其显示的图像视图在尺寸上的巨大差异所致。如果您添加@2x后缀，则不会有任何变化不要更改源图像本身的尺寸。

那是不改变原始图像大小就可以改善情况的一种简便方法：CALayer对图形后端调整图像大小的方法进行了一些控制：minificationFilter和{{ 3}}。第一个与您的情况有关，因为图像尺寸正在减小。默认值为magnificationFilter，只需切换到.trilinear即可获得更好的效果（有关CALayerContentsFilter.linear的更多信息）。这将需要更多的GPU电源（因此需要电池），特别是如果将其应用于许多图像上。

您应该真正考虑在静态显示或在运行时显示图像之前调整图像的大小（并可能缓存调整大小的版本）。除了不良的视觉质量外，在用户界面中大量使用如此大的图像还会降低性能并浪费大量内存，从而可能导致其他问题。

Answer 4

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

1. 确保未分配图像
2. 现在使用情节提要或代码中的图像而无需扩展。 （例如“ image”而不是“ image.png”）

如果您不使用资产中的图像，请将其移至资产中。

Demo Projects

希望有帮助。 让我知道您的反馈。

Answer 5

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

Answer 6

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

例如，如果要以标准分辨率显示大小为128x128的图像。您必须提供@ 2x和@ 3x尺寸的图像。例如，@ 2x版本为256x256，@ 3x版本为384x384。

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