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

Question

我对视网膜图像有困难。

下面的屏幕截图显示了每个UICollectionView中包含UIImageView的UICollectionViewCell。

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

我希望由于图像的大尺寸（512x512），只需添加@ 2x后缀即可将其转换为定义的两倍（即视网膜），但从两个屏幕截图中可以看出，两个版本图像都显示为非视网膜。

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

travel.png：

[email protected]： *更新*以下评论中的以下请求：

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

// 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

TL; DR;

将视图层的minificationFilter更改为.trilinear

imageView.layer.minificationFilter = .trilinear

如下面的设备截图所示

正如Anton的答案正确指出的那样，您观察到的混叠效果是由源图像与其显示的图像视图之间的尺寸差异引起的。如果不更改尺寸，则添加@2x后缀不会改变任何内容。源图像本身。

也就是说有一种简单的方法可以在不调整原始图像大小的情况下改善这种情况：CALayer提供了一些控制图形后端用于调整图像大小的方法：minificationFilter和magnificationFilter。第一个与您的情况相关，因为图像尺寸正在减小。默认值为CALayerContentsFilter.linear，只需切换到.trilinear即可获得更好的结果（有关those wikipedia pages的更多信息）。这将需要更多GPU功率（因此电池），特别是如果您将其应用于许多图像。

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

Answer 2

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

要检测UIImageView是否自动缩放图像，您可以在Simulator菜单上打开Debug-> Color Misaligned Images：

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

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

现在，图像将在屏幕上绘制，而不会缩小尺寸，具有更好的视觉质量：

Answer 3

如果你的意图是只有一张所有尺寸的图像，我会建议它在Assets.xcassets下。这里很容易创建文件夹结构和管理媒体资产。

脚步

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

Answer 4

我已经修好了，@ DarshanKunjadiya问题。确保（如果您已经在使用资产）：

1. 确保图像未取消分配
2. 现在使用故事板中的图像或没有扩展名的代码。 （例如“image”NOT“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图像。

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