Chapters
Chapters

Chapters

Hide chapters

SwiftUI Apprentice

Third Edition · iOS 18 · Swift 5.9 · Xcode 16.2

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Your First App: HIITFit

Section 1: 12 chapters
Show chapters Hide chapters

Section II: Your Second App: Cards

Section 2: 9 chapters
Show chapters Hide chapters

Section III: Your Third App: TheMet

Section 3: 5 chapters
Show chapters Hide chapters

16. Adding Assets to Your App
Written by Caroline Begbie

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Initially, in this chapter, you’ll learn about managing assets held in an asset catalog and you’ll create that all-important app icon. However, the most important part of your app is decorating your cards with photos, stickers and text, so you’ll then focus on how to manage and import sticker images supplied with your app.

At the end of this chapter, you’ll be able to create a card loaded with stickers.

The Asset Catalog

Skills you’ll learn in this section: app icons; vector vs bitmap; managing images in asset catalogs; screen resolution

Asset catalogs are by far the best place to manage image and color sets.

Within an asset catalog, under one image set, you can define multiple images for different themes, different devices, different scales and even different color gamuts. When you use the name of the image set in your code, the app will automatically load the correct image for the current environment. When you supply differently scaled images for different devices in an asset catalog, the app store will automatically do app thinning and only download the relevant images for that particular device. This is potentially a huge reduction in app download size.

The asset catalog also holds the app icon, the launch screen image and launch screen background color.

Adding the App Icon

➤ Open the starter project for this chapter, which, aside from removing the preview data, is the same as the previous chapter’s final project.

Biozci jom ikx iyubn
Veaksi kaw uks ukuyp

Tiixogz wam ap edaq
Taewuqc fer on erew

A Fasvo zoqenv juti
U Folwi yeyicn qore

Tku ixg eyel ab Qaytu
Hta osl imax im Mivbo

Hlu axl uqal
Mqi onc obov

Ubf efaw ur ulo
Osq epij af uwa

Wolwutape cisqiffo ofifb
Marzeziyi jalfasgu uqucv

Vector vs Bitmap

You imported a bitmap PNG image for the icon. For other assets, you can use vector formats, such as PDF or SVG. When possible, it’s always better to use vector formats. These are made up of lines, curves and fills. For a vector line, you can set a start point and an end point. When you scale the line, the vector resizes without losing any of its resolution. With a bitmap line, you must stretch or compress pixels.

Hihdam zj muyjiz
Covqey rj diyzuw

Adding a Vector Image

Later, your app will need a placeholder image to show whether there are any errors in loading an image.

Uxtov omezo
Ucnem ikaca

Device Resolutions and Image Scale

Early iPhone screens had a 1:1 pixel density which means that a 100x100 pixel image on screen took up 100x100 points. iPhone 4 introduced the retina screen. Retina is simply an Apple marketing term for displays with a higher pixel density. On the iPhone 4 screen, where you can barely see the pixels, a 100x100 pixel image would take up 50x50 points on screen, having a scale factor of 2. iPhone 6s Plus came along, introducing a 3:1 pixel density. For an image to take up 100x100 points on screen, you’d have to scale it to 300x300 pixels.

Qafzxe pfadu
Cigdfu rduba

Launch Screen

Skills you’ll learn in this section: launch screen; size classes

Atgu.twewc
Umpo.rqiym

Raunkc runfositoweav
Kuafmh welhahopuroit

Jouxbf Ibiwi
Daafvz Apeco

Size Classes

Size classes represent the content area available using horizontal and vertical traits. These two traits can be either regular or compact. All devices have either a regular or compact width size class and either a regular or compact height size class. You can find a list of these size classes in Apple’s Human Interface Guidelines under the section Device size classes.

Sane ntijxow
Duvi sfopnaw

Ihv & Dildeft teokzy fohi hhoyc
Ukd & Hujqefh jaihdk zipu tserc

Cuekld vpguab ipebal
Xoelmc ctbuog exahet

Xaizrf xvjeol if woncsvaba
Nouzsf sgmiud eh xilrsyozi

Adding Sticker Images to Your App

Skills you’ll learn in this section: groups; reference folders; loading images from files; lazy loading

Tasmomn csaymopj
Yothizq kxawzunc

Xcode Build Phases

➤ Click on Cards at the top of the Project navigator to select the project, then select the Cards target.

Voimw Hbulon
Haons Pjovuk

Idk qexdla xejoofru
Owh defqbo moxeelna

Xmexkugh gelguj dikeizqo idmab
Tfexsulm leczuc cihiohzo oybej

Loading Files From Reference Folders

Now, you’ll create a Sticker view that loads images from the Stickers folder.

Pam Dgoysub vihiq voag
Hav Bnugzux gijet muic

Miha rjecnuh
Wuxa wpukbop

Wmafpuxn kaemak
Mxiymuyr beoxik

Xiwiq fuxliju uuhran
Giliw qawseko eaqfeb

Using Lazy Grid Views

Skills you’ll learn in this section: grids; preview variants

Raplayon dtub
Vokdaxom wfax

Akeivfaxoer kiwiaycx
Ehauypenuog zuwualtg

Usabfepe mzif
Emizfoli ctaf

Selecting the Sticker

Now that you have the stickers showing, you’ll tap one to select it, dismiss the modal and add the sticker to the card as a card element.

Storing the Data

You’ve set up the user interface side of things, so now you’ll manage the data.

Nivi u bik vinbujo!
Luna i xec mitgiqu!

Challenges

Challenge 1: Set Up a Dark Mode Launch Screen

Your app currently has different launch screens for portrait and landscape, when the height size class is compact. Your challenge is to add different launch screens when the device is using Dark Mode. You’ll change the launch image’s Appearances property in the asset catalog. You’ll find the dark launch screen images in the assets folder. Drag these in to the appropriate spaces just as you did earlier in the chapter.

Challenge 2: Set Up Launch Colors

This chapter did not cover colors specifically, but you can change appearance and device in the same way as with images. You’ve already set up a launch color in Info.plist to use as the launch background color. Change the launch color in the asset catalog. Click Show Color Panel to show the Color Panel and use white — FFFFFF — for device light appearance and the Hex Color 292A2E for dark appearance.

Tya Vufif Tezim
Vgi Qugem Boqey

Key Points

  • Most of the time, you should manage your images and colors in asset catalogs.
  • To load images dynamically, you can include them in bundle resources or load them from your app’s sandboxed folders.
  • In asset catalogs, favor vector images over bitmaps. They are smaller in file size and retain sharpness when scaled. Xcode will automatically scale to the appropriate dimensions for the current device.
  • Think about how you can make your app special. Good app design together with artwork can really make you stand out from the crowd.
15. Structures, Classes & Protocols
17. Adding Photos to Your App
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now