• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 04/07/2019

Manage assets to add images and icons

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

We’ve created our project. We have our designs and requirements handy. Now, a good way to start implementation is to incorporate the assets.

Assets, in terms of an Xcode project, are external elements that need to be incorporated in the project.

Some are required (we cannot submit an app to the App Store without them) such as an app icon. Other assets are optional (they depend on the app context), such as custom fonts or other images.

Managing image assets

Let’s start with the images. They are stored in a special file format with an extension  .xcassets . Each project may have multiple image assets files. This is also where the app icon images must be supplied.

Let's switch to the assets file included in our project. The only elements it contains by default are grouped placeholders for the app icon. Let's select AppIcon from the contents panel:

Xcode images assets file default contents
Xcode images assets default contents

Understanding the image sizing

As you can see in the central area of the file contents, there are placeholders for images with various labels that consist of combination of the following components:

  1. Device - iPhone, iPad, or the App Store 

  2. Component - Notification, Spotlight, etc.

  3. iOS setting - image sizing required for selected iOS deployment target

  4. Size in points (pt).

  5. Relative dimensions: 1x, 2x or 3x

Let's review the last three further.

iOS settings

iOS settings are defined by the deployment target we choose for our app. The deployment target is the minimum iOS version we choose to support. This setting is specific to a sub-version.

Choosing a sub-version may be critical as subversions typically include issue fixes that may be critical for app functionality. Different iOS versions require different image sizing.

What iOS deployment target to choose?

Apple recommends supporting the two latest versions of iOS (the current one and the one just before that).

Size

The sizing for all visual elements, including images, in measured in points (pt). A point is an abstract measurement unit. It's relative to a particular context, for example, a device screen size. 

Points render to pixels. A pixel (px) is a basic square unit on a digital screen. 

A point is represented by a number of pixels on a screen. The number of pixels depends on the screen's physical dimensions and resolution.

The more pixels per point a device screen displays - the better the quality of an image.

Let's select a number of devices in order to show this more clearly: iPhone 3, iPhone 4,  iPhone 8 and iPhone X. They have following screen dimensions:

Device/Screen

Physical Diagonal

Physical Dimensions, in

Dimensions, pt

Rendered dimensions (resolution), px

iPhone 3*

3.5"

1.94 x 2.91

320 x 480

320 x 480

iPhone 4*

3.5"

1.94 x 2.91 

320 x 480

640 x 960

iPhone 8

4.7"

2.65 x 5.47"

375 x 667

750 x 1334

iPhone X

5.8"

2.79 x 5.65"

375 x 812

1125 x 2436

As you can observe, the changes are not always proportional. Let's take a closer look at sizing in points and pixels.

For the app icon, we have the size requirements listed in points.

To maintain quality of the image, each device requires different physical size of an image in pixels.

Let's look at our device comparison table above, compare 'Dimensions, pt' and 'Resolution, px' columns:

  • To provide an image for iPhone 3 (320 x 480 pt), we need to generate an image with 320 x 480 px.

  • To provide a suitable image for iPhone 4 (which has the same display size of 320 x 480 pts) we need to generate an image 640 x 960 px - which is 2 times larger.

  • To display an image on iPhone 8 375 x 667 pt, we need to supply an image 750 x 1334 px - also 2 times larger.

  • To display an image on iPhone X 375 x 812 (same width as iPhone 8 in points), we need to supply an image 1125 x 2436 px - also 3 times larger.

Relative dimensions

As we can see, the physical size of required images can be a number of times larger than the required size in points, in particular 1, 2, or 3 times larger. To describe those we use following labeling: 1x, 2x or 3x. You can see this indicated for the app icons in our image assets file.

All currently available devices have a Retina display and there's no need to apply 1x  images for our apps anymore. The only place where 1x images are still required is the App Icon for specific purposes - like Notifications etc.

Setting the App Icon

Even though the requirements change for the app icon depending on app configuration we choose - like iOS target for example, we have a cheat sheet help us navigate these requirements: the placeholders in our assets file.

Let's review all of them and resize our original app icon 1024 x 1024 px to the required sizes.

Make sure you have all the sizes.

Then drag the files of a required size onto dedicated placeholders:

Drag icons to placeholders
Drag icons to placeholders

And finally have them all set in place:

App icons
App icons

Done! It's big step, let's test it out in simulator. For most of this course we'll be testing our app using iPhone 8 simulator. Make sure you have it selected on your test device panel:

And click run! We can see a blank app, :o but let's get to the icon! Go to iOS Simulator menu (or use a shortcut Shift + Command + H): Hardware -> Home:

Access home screen on simulator
Access home screen on simulator

And here it is - our beautiful icon on the device home screen: :ange:

FrameIT app icon is set up!
FrameIT app icon is set up!

You notice that all the icons on the home screen, including ours, have nice rounded corners when we supplied perfectly square versions for all the sizes. :o That's because Apple takes care of the rounding for us! This way it's ensured that all the icons from different designers get the same final treatment. This add to the perfection that can be witnessed with everything at Apple. ;)

Party time!
Party time!

Adding other images

Before we move on, let's add two more images to our project - the app logo and the app name - white images on transparent background. Let's name the files:

  • "FrameIT-logo@2x.png"

  • "FrameIT-name@2x.png"

This time we don't have placeholders for them, just grab them in the finder and drag them over to the project under 'AppIcon':

Drag and drop other images
Drag and drop other images

As the images appear in the main area, they will be placed in the 2x slots. Those images you've added to your project become available in the media library on the Utilities panel (you can then drag and drop them to various parts of your app interface):

Custom images embedded in the project
Custom images embedded in the project

Image file naming

Why did the images drop to the middle slot?

The images we've just added were automatically considered to be 2x images because we provided that indicator in their file names by including  @2x  at the end of the file name. If we were providing images for all 3 sizes, the file names for the logo would be as following:

  • "FrameIT-logo@1x.png" 

  • "FrameIT-logo@2x.png"

  • "FrameIT-logo@3x.png"

This is not mandatory, because files with various names can be dragged onto the placeholders individually, however it's recommended in order to follow the established naming convention.

What about other other placeholders: 1x & 3x?

For images other than the app icon, if a specific image is not provided, iOS is going to take what's available and optimally scale it up or down. I'd like to offer a trick: during the development process, provide 2x images until all the designs are confirmed. This way, you only need to place the remaining images once before the final testing and deployment.

This trick can be helpful if you are responsible for scaling the images. However, if you've already received them from the design team I encourage you to include them right way.

To complete our image asset catalogue for the app development, let's repeat this for 2 additional images we'll use in our project:

  • "FrameIT-placeholder@2x.png" 

  • "FrameIT-startover@2x.png"

  • "FrameIT-name-tiffany@2x.png"

After adding the new images, your images assets catalogue should look like this:

Frame image assets
Frame image assets

You can observe that the newly added images also became available in the Media Library on Utilities panel. 

Local image selection

The last step for setting up images is going to be adding the 5 custom photos to use as local image selection when the user chooses 'Random' option.

Download the files, name them as follows:

  • "Boats@2x.png"

  • "Car@2x.png"

  • "Crocodile@2x.png"

  • "Park@2x.png"

  • "TShirts@2x.png"

Now drag them to the image asset catalogue. Your image list list should look like this:

FrameIT images
FrameIT images

Now, let's organize our images a little bit. Select the random selection images and right click for the context menu and select 'New Folder from Selection':

Create new folder for local images
Create new folder for local images

Then name the new folder 'FrameITPicks':

Rename image folder
Rename image folder

And you can observe that all images we added to the project are now available in the Media Library:

FrameIT Media Library
FrameIT Media Library

Exploring plists

Another important element for configuration and customization of a project is Property Lists. Those are files with extension  .plist . This is where we configure fonts and various parameters of an application. 

Each project may have multiple property lists. By default there's always one plist file included and we are going to use it to add our fancy font.

Unpack your zip file:

Fonts folder
Fonts folder

We'll need only one file for our design: Nunito-Regular.ttf.

Embedding font files includes a couple of steps.

Adding files

First we need to add our font file to the project. To do that, select "Add Files tp 'FrameIT'":

Adding files to the project
Adding files to the project

Select the font file from the location you saved it to, expand Options and make sure you have 'Copy items if needed' checked:

Select font files to add
Select font files to add

Let's verify the file is included in our app. Click on the font file we have just added and make sure target member 'FrameIT' is selected on Utilities panel:

Verify the target
Verify the target

Verifying the app bundle Resources

Next we need to verify the file has been included in the app bundle Resources:

App bundle resources
App bundle resources

Configuring plist

And we have finally got to the plists! Let's open the file, add a new row on the list by clicking a  +  circle next to the 'Information Property List'. This will add a new row right below:

Add new row to plist
Adding new row to plist

Replace the default caption 'Application Category' with 'Fonts provided by application' and expand this new row. You'll see one sub-row added by default. Good news - we only need one! Just Copy the name of the file into the value column:

Adding specific font to plist
Adding specific font to plist

All done! Now we have to trust it works and will test it shortly!

Let's recap!

  • To manage images and icons of an application, we use the  Assets.xcassets 

  • The app icon must be supplied in different sizes, which are described in points. The variety of icons depend on:

    • intended use of an icon (Notifications, Spotlight etc.),

    • device (iPhone/iPad),

    • iOS setting.

  • The actual image size is described in pixels and is a multiple of point size: 1x, 2x and 3x.

  • Property lists are configuration files with the extension  .plist .

  • Adding custom fonts to an application is done using plists.

  • An app can have multiple image assets and plist files.

Exemple de certificat de réussite
Exemple de certificat de réussite