2.4 导入图像素材到Xcode项目

接下来，我们将会为项目添加一些图片素材，并将一张红宝石图像呈现到应用的视图之中。为了可以在屏幕上显示图像，我们需要添加一个图像视图（Image View）。

实战：在视图中添加一个图像视图。

步骤1：打开Main.storyboard文件，在对象库中找到Image View，通过介绍可以了解到，Image View可以用于显示一个单独的图像或通过Image数组所连成的动画。将Image View拖曳到屏幕中央的位置，如图2-12所示。

图2-12设置UILabel控件的位置和大小

步骤2：在选中Image View的情况下打开Attributes Inspector，这里面全部都是与Image View相关的属性。其中最重要的一个属性是Image，它用于指定在Image View中显示的图像。在之后的操作中，我们会向大家介绍如何为项目添加图片素材。

步骤3：在选中Image View的情况下打开Size Inspector，将x设置为53, y设置为240，宽和高均设置为270。

步骤4：打开项目中的Assets.xcassets文件，在右侧的列表中有一个AppIcon文件夹，其内部有很多空槽，用于为项目添加各种图标。当我们将项目上传到App Store上时，Xcode会检查并确保所有的空槽都填充了符合要求的图标。

本书中涉及的项目源代码以及素材均可以在GitHub网站中下载，地址为https://github.com/liumingl/ios-11-Swift-4-Tutorial。

在素材文件夹中找到相关资源，然后对照空槽下面的描述将对应的图标拖曳到空槽之中。比如将Icon-App-40x40@2x.png文件拖曳到iPhone Spotlight iOS 7-11 40pt的2倍空槽中。因为它只接受40×40点，也就是80×80像素的图像，用于在iOS搜索的时候使用，如图2-13所示。

图2-13 设置应用程序的AppIcon

步骤5：此时，在AppIcon中有很多用于iPad设备的图标空槽，由于本项目只是针对iPhone设备，所以取消勾选工具区域Attributes Inspector的Pad选项即可。

步骤6：在资源文件夹中找到diamond@2x.png文件，并将其直接拖曳到Assets. xcassets文件的列表之中，此时在AppIcon的下面会添加一个新的diamond条目。

这里大家可能已经注意到iOS项目中图片素材文件的命名方式有些奇怪。在一般情况下文件名称被分成2部分，@前面的部分是图片素材的文件名称，而@后面的部分是1x、2x或3x，如果在iPad mini一代设备上显示图片的话，系统会自动调用1x的图像，因为它是标准的屏幕。如果在iPhone SE/5/6/7/8显示图片的话，系统会自动调用2x的图像，因为它们都是Retina显示屏。如果在iPhone Plus机型显示图片的话，系统会自动调用3x的图像。也就是说为了可以让你的应用在所有设备上完美运行，你需要准备3张不同分辨率，但是内容一样的图片。但是，如果在Plus机型上面运行，并且没有找到3x图像的情况下，它会自动使用2x的图像替代，如果没有的话则会再查找1x的图像（它是向下兼容的）。

步骤7：回到Main.storyboard文件，选中刚才添加的Image View，然后将Attributes Inspector中的Image设置为diamond。因为在Assets.xcassets文件中已经添加了diamond的素材，所以该图像会直接显示在Image View之中（如图2-14所示）。

图2-14 设置Image View的Image属性

步骤8：调整Content Mode为Aspect Fit，让Image View中的图像按原图比例调整到合适的大小。