Xcode 图片说明 [英] Xcode images explanation

问题描述

是什么使图像成为 1x、2x 或 3x(@1x、@2x、@3x)?如何制作 3x 图像?

What makes an image 1x, 2x or 3x (@1x, @2x, @3x)? How can you make a 3x image?

推荐答案

iOS 在其坐标系中使用点而不是像素.在最初的非视网膜设备(iPhone、iPhone3G、iPhone3GS、iPad、iPad 2、iPad mini 和早期的 iPod touches)中，坐标系中的一个点映射到设备屏幕上的一个像素.那时，生活很简单，您向应用程序提供映射到磅值大小的图像，一切看起来都很棒.

iOS uses points instead of pixels in its coordinate systems. In the original non-retina devices (iPhone, iPhone3G, iPhone3GS, iPad, iPad 2, iPad mini, and early iPod touches) one point in the coordinate system mapped to one pixel on the screen of the device. At that time, life was simple, you provided images to your app that mapped to the point size and everything looked great.

当 Apple 推出第一款视网膜显示设备(iPhone 4、配备 Retina Display 的 iPad 和 iPod touch 4)时，这些设备的每个点都有 2 个像素.苹果设计了一种巧妙的方法来解决这个问题.程序员只需要在他们的程序中添加第二张分辨率更高的图像，并在名称中添加@2x.无需更改代码.如果您的代码加载了一个名为house"的图像，iOS 将在非视网膜设备(例如 iPad 2 或原始 iPad mini)上加载house"，并且它将为视网膜设备使用house@2x".iPhone 6 Plus 的分辨率更高，所以它使用了@3x 版本.

When Apple introduced the first retina display devices (iPhone 4, iPad with Retina Display, and iPod touch 4), the devices had 2 pixels for every point. Apple devised a clever way of dealing with this. The programmer just had to add a second image to their program with the increased resolution and add @2x to the name. No changes to the code were needed. If your code loads an image called "house", iOS will load "house" on a non-retina device (such as the iPad 2 or original iPad mini), and it will use "house@2x" for the retina devices. The iPhone 6 Plus has even higher resolution so it uses a @3x version.

那么是什么使图像@1x、@2x 或@3x?如果您的房子"图像是 120 x 90 像素，那么您的house@2x"图像应该是 240 x 180 像素，即每个维度中像素数的两倍(简称2x").house@3x"版本应该是 360 x 270(每个维度中像素数的 3 倍).

So what makes an image @1x, @2x, or @3x? If your "house" image is 120 pixels by 90 pixels, then your "house@2x" image should be 240 by 180 pixels, that is twice the number of pixels in each dimension ("2x" for short). The "house@3x" version should be 360 by 270 (3 times the number of pixel in each dimension).

您可以确保@2x 和@3x 版本具有更多细节，而不仅仅是更多像素.您可以使用 Photoshop 或 Pixelmator 来创建您的图像.首先创建图像的非常详细的版本(@3x 版本)，然后将其缩小到@2x 分辨率并将该版本保存为@2x 版本.然后再次打开您的@3x 版本并将其缩放到@1x 分辨率并将其保存为您的@1x 版本.将所有三个版本添加到 Xcode 中的 Assets Catalog，iOS 将为相应的设备加载相应的版本.

It's up to you to make sure that the @2x and @3x versions have more detail, and not just more pixels. You can use a program like Photoshop or Pixelmator to create your images. Start by creating the nice highly detailed version of your image (the @3x version), and then scale it down to the @2x resolution and save that version as your @2x version. Then open your @3x version again and scale it to the @1x resolution and save that as your @1x version. Add all three versions to the Assets Catalog in Xcode, and iOS will load the appropriate version for the appropriate devices.

这篇关于Xcode 图片说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！