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:
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:
Device - iPhone, iPad, or the App Store
Component - Notification, Spotlight, etc.
iOS setting - image sizing required for selected iOS deployment target
Size in points (pt).
Relative dimensions: 1x, 2x or 3x.
Let's review the last three further.
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).
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:
Physical Dimensions, in
Rendered dimensions (resolution), px
1.94 x 2.91
320 x 480
320 x 480
1.94 x 2.91
320 x 480
640 x 960
2.65 x 5.47"
375 x 667
750 x 1334
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.
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:
And finally have them all set in place:
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, but let's get to the icon! Go to iOS Simulator menu (or use a shortcut Shift + Command + H): Hardware -> Home:
And here it is - our beautiful icon on the device home screen:
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. 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.
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:
This time we don't have placeholders for them, just grab them in the finder and drag them over to the project under 'AppIcon':
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):
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:
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:
After adding the new images, your images assets catalogue should look like this:
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:
Now drag them to the image asset catalogue. Your image list list should look like this:
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':
Then name the new folder 'FrameITPicks':
And you can observe that all images we added to the project are now available in the Media Library:
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:
We'll need only one file for our design: Nunito-Regular.ttf.
Embedding font files includes a couple of steps.
First we need to add our font file to the project. To do that, select "Add Files tp 'FrameIT'":
Select the font file from the location you saved it to, expand Options and make sure you have 'Copy items if needed' checked:
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:
Verifying the app bundle Resources
Next we need to verify the file has been included in the app bundle Resources:
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:
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:
All done! Now we have to trust it works and will test it shortly!
To manage images and icons of an application, we use the
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.),
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
Adding custom fonts to an application is done using plists.
An app can have multiple image assets and plist files.