如何将图像上传到Xcode

To use images in Xcode, you need to upload them to Assets.xcassets, located in the Supporting Files folder. There are two options you can go with: bitmaps (aka .png files) or vectors (aka .pdf files). The first step is deciding which file type you’d like to use.

要在Xcode中使用图片，您需要将其上传到Supporting Files夹中的Assets.xcassets 。 您可以使用两种选择：位图(aka png文件)或矢量(aka .pdf文件)。 第一步是确定您要使用的文件类型。

位图和矢量资产之间的区别 (The difference between bitmaps and vector assets)

Most tutorials online use bitmap assets, which are .png files. This requires you to drag over 3 copies of the image into Xcode.

在线上的大多数教程都使用位图资源，它们是.png文件。 这要求您将图像的3个副本拖到Xcode中。

However there is a school of thought that believes vector assets are superior. This article has a great explanation of why that’s the case. Vector assets are .svg files (or .pdf for Xcode). If you choose to use vectors assets, you only need to upload one version of the image to Xcode.

但是，有一种流派认为矢量资产是优越的。 这篇文章很好地解释了为什么会这样。 矢量素材资源是.svg文件(对于Xcode，则是.pdf )。 如果选择使用矢量资产，则只需要将图像的一个版本上载到Xcode。

Here’s what I’ve heard from those much wiser then I–Android phones use algorithms from the vector asset to generate the image in any size required. Makes sense given the wide breadth of devices and screen sizes for Android.

这是我从那些比我聪明得多的人那里听到的-Android手机使用矢量资产中的算法来生成所需大小的图像。 考虑到Android设备和屏幕尺寸的广泛性，这才有意义。

However vector assets in iPhones don’t actually scale with algorithms (apparently). So you don’t get higher quality images by using vectors over bitmaps. Instead what you get is the same quality as bitmap. The iPhone simply takes the “vector” asset and converts it to the same three bitmap sizes.

但是，iPhone中的矢量资产实际上并未随算法扩展(显然)。 因此，通过在位图上使用矢量不会获得更高质量的图像。 相反，您获得的质量与位图相同。 iPhone只是获取“矢量”资产并将其转换为相同的三个位图大小。

Aside from the algorithm logic above, there are a few more objective benefits of using vector assets for iPhones.

除了上面的算法逻辑外，还有一些 在iPhone上使用矢量资产的更多客观好处。

1. Reduces likelihood of human error. Right now there are three bitmap sizes (1x, 2x ,3x). That means you need to upload three images to your assets. That’s three opportunities to accidentally drag and drop the wrong image. When you use vector assets (which come up as universal in Xcode), you only need to upload one image instead of three. There’s less chance of uploading the incorrect size or image.

   减少人为错误的可能性。 现在有三种位图大小(1x，2x，3x)。 这意味着您需要将三个图像上传到资产中。 这是不小心拖放错误图像的三个机会。 使用矢量素材资源(在Xcode中通用)时，您只需要上传一张图片，而不是三张。 上传不正确尺寸或图像的机会较小。

2. Speed. Same reason as #1. If you are using a lot of images in your app, then using vector assets reduces the number of images you need to upload by a third.

   速度。 与＃1相同。 如果您在应用程序中使用了大量图像，则使用矢量资产将需要上载的图像数量减少三分之一。

3. Future proofing. The iPhone currently only uses three image sizes (1x, 2x, 3x). This is to do with the increased retina quality of the screens. When Apple introduced the high retina screens a few years ago, the number of pixels per point increased for a sharper image.

   将来的证明。 iPhone当前仅使用三种图像尺寸(1x，2x，3x)。 这与屏幕的视网膜质量提高有关。 苹果几年前推出高视网膜屏幕时，每点的像素数量增加了，以获得更清晰的图像。

   It seems extremely likely that similar technological increases will continue to occur. In the future, we may need to upload 4x, 5x and 6x images. If we use a vector asset, the app will scale the image for us. This saves us from dropping in the new sizes of the bitmap asset.

   类似的技术进步似乎极有可能继续发生。 将来，我们可能需要上传4x，5x和6x图像。 如果我们使用矢量资产，则该应用程序将为我们缩放图像。 这样可以避免我们丢弃位图资产的新大小。

   Although I have to admit I’m a bit confused about this, given that iPhone vector assets don’t seem to actually work on algorithms. So I’m not sure how they will automatically scale to larger sizes. But my wise mentor explained this and I trust him!

   尽管我不得不承认我对此有些困惑，但考虑到iPhone向量资产似乎并未真正在算法上起作用。 因此，我不确定它们将如何自动缩放为更大的尺寸。 但是我的明智导师解释了这一点，我相信他！

The one big downside for using vector assets in Xcode is that most places don’t provide the .pdf file. You need to convert it from .svg yourself.

在Xcode中使用向量资产的一大缺点是，大多数地方不提供.pdf文件。 您需要自己将其从.svg转换。

Update on 18 June 2017: Apple have announced in WWDC that iOS is now supporting true scalar images! Or at least, that’s what I think they announced. Now there is even more reason to use to use a single scale.

2017年6月18日更新 ：Apple在WWDC中宣布iOS现在支持真正的标量图像！ 至少，这就是我认为他们宣布的内容。 现在，有更多的理由要使用单个秤。

如何上传矢量资产 (How to upload a vector asset)

Head to the attributes menu. Change the scales to “single scale”, and check the resizing box to “preserve vector data”. This will change the upload option to “all” instead of 1x, 2x, 3x.

转到属性菜单。 将比例更改为“单个比例”，然后选中调整大小框以“保留矢量数据”。 这样会将上传选项更改为“全部”，而不是1x，2x，3x。

Next you drag and drop your .pdf file into the one slot. I’m not too sure how to convert .svg to .pdf yet, but I assume it’s fairly easy with Preview.

接下来，将.pdf文件拖放到一个插槽中。 我还不太确定如何将.svg转换为.pdf ，但是我认为使用Preview非常简单。

如何上传.png文件 (How to upload .png files)

If you decide to go ahead with .png, you’ll need to upload three versions of your file. This is to cover the varying screen resolutions of the different iPhones.

如果决定继续使用.png ，则需要上传文件的三个版本。 这是为了涵盖不同iPhone的不同屏幕分辨率。

First, ensure the “scales” option in the attributes menu is set to “individual scales”. This is the default option, and it will show you three slots that you should fill:

首先，确保将属性菜单中的“比例”选项设置为“单个比例”。 这是默认选项，它将为您显示三个应填充的插槽：

Second, find an image that you want to use in your app. Let’s assume it’s this icon:

其次，找到要在应用程序中使用的图像。 让我们假设它是这个图标 ：

Wow that’s big. It’s because I downloaded the 512 pixel version from the site. However I only want the image to be 20 x 20 pixels in my app. To convert the image to 20 pixels, I’ll resize it in Preview.

哇，好大。 这是因为我从网站下载了512像素版本。 但是我只希望图像在我的应用中为20 x 20像素。 要将图像转换为20像素，我将在“预览”中调整其大小。

Make three copies of the original image. The names of your image should look something like this: zen.png, zen@2x.png, zen@3x.png. The important part is that the files all have the same name (here I’m using zen), and two of them end with @2x and @3x. When you use this naming convention, Xcode will be able to automatically find the correct size based on the device type.

复印三张原始图像。 图像名称应类似于： zen.png ， zen@2x.png ， zen@3x.png 。 重要的是文件都具有相同的名称(这里我使用zen )，其中两个以@2x和@3x结尾。 使用此命名约定时，Xcode将能够根据设备类型自动找到正确的大小。

Next, open the image in Preview and go to Tools > Adjust size to bring up the menu below. Specify 20 x 20 pixels. Press ok and save the change. This is your base image, zen.png.

接下来，在“预览”中打开图像，然后转到“工具”>“调整大小”以调出下面的菜单。 指定20 x 20像素。 按确定并保存更改。 这是您的基本图像zen.png 。

Do the same thing for zen@2x.png. Only this should be 40 x 40 pixels. One more time for zen@3x.png. This will be 60 x 60 pixels.

对zen@2x.png做同样的事情。 仅此应为40 x 40像素。 zen@3x.png 。 这将是60 x 60像素。

Now you can drag and drop the images into the correct boxes in Xcode. Done!

现在，您可以将图像拖放到Xcode中的正确框中。 做完了！

翻译自: https://www.freecodecamp.org/news/how-to-upload-images-to-xcode/