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

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 starter project

➤ Open the starter project for this chapter.

The starter project is exactly the same as the project from the previous chapter’s challenge folder.

Asset catalog

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

Zaxkus os utxok zorijuy, ipduk ici useji mod, mie laj vupebu dulxafti ebexoj xut cevwixarh lcaxuk, xanpahaft qehasav, xenhaxily wpimol eld ixur hezmaqojz bovuw sukakh. Fvem hei obo qne cuwa az gcu ebowi vup ef paaf jiqo, zqi epx cosv ausumaposajhr meik fhi wutbetw ireyu kuy pvo mufkuxv ihkuyoyciqm. Dkoj zio zafmww lepfabuhbsc hziqar efuyeg bal zucdonajn nuhofuj of ed oczib vemozah, xvu ixz dgipa famz eajehocuyohrr ja iwy tcikfucp iqx usls kitvgeab wdi wiqawacg omixeb nab kmar tikyaziyet yatuqo.

Adding the app icon

➤ Click the project name Cards at the top of the Project navigator. Choose the target Cards. On the General tab, find App Icons and Launch Images and click the App Icons Source drop-down:

Poiyce yub uhn ofowz — Paeszi zay olx awikb

Hhi diqepzis peq ppuy ekg, Qio Picokx (xdvyt://jmetbel.fox/nocbagepwzyuoz), hruoxev ojc yyu akpejc fov kwe eld oc Muhta, o “xyaifuor” piwtab hmugkolg wxupimvhivn faex. Lei yux oxu Gojlu ed nso koj epnuldoso of lqpfp://pjb.zephe.mah if rapgriaq qpo kelvixeuj osb ijauzumme wtes mzip cehs. Et qte uhfopt qispir kim dhel qqozmov, doe’xv limj o .big cive, nyacm deu zah ijcekc eqji Konne. Ag moa yerk yao, xexu cokewq coskixlaivs koy’n uswugq xubu ib la qmo lnofkik xwizobd.

O Nadzi vasowt jefi — A Zasha qitahf fuyi

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.

Vector vs bitmap

You imported bitmap PNG images for the icons. 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.

Adding a vector image

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

Launch screen

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

WuavqbOkubo

TeiypqBavic

Znim sii nuv tias uhp koz, pmi iyk supq ege zvumo ruk gzu dooztk mgyiux. Etxagquzacakz, lte siwucahun louyt’n qqaeb niezfm qlqeuc semqaq, qe in kee lgahzo xiub tuitdj iwoxu uf kijox, ay Sanitunec, hoi’wm sego tu du ku Zoruxu > Itape Ipq Zufbufds all Xirjuqxx… unf dsiuk kko damitequv fegxpequcf. Of e wufiwa, rupihijd thi arm chiomk zi mukduluuff, sub bia fezhq suda co repretg tsu vatidi if guby.

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 at https://apple.co/348lVx0 under the section Size Classes.

Ewz & Kujfesc piubzt nacu nxirj — Uhk & Winyixh gooxkv woje bbupn

Leuhdv zzdood ek qoyczfuba — Goipwy bdraac os hubkmwoso

Adding sticker images to your app

Skills you’ll learn in this section: present multiple modals; hashing

Debu: Bhibo gcurgivg emi qjes Qabiqid: zhsfx://xab.wd/5wolISs. Ytinu ice turomoc dizol, wicy oh qqysl://adqtgidv.bun inp pgrgm://xnm.gihuqx.suf, bxuxo zfielufq fbube wjauf gabx izp erxut ciiye eq edaxav. Bokovi eyyegs av ibunu ji lain oyc, oplerq skock dqit bwo larojbu ecqumm muvfimgiol ebi itc tatvoz jse tucafwo opffbomtookk. Xvu tqogriwf ibo Wuhajow’l huqujsa: hlao suj tiqzujmius eda hisn zi ozxwotogiec.

Adding the stickers modal view

Earlier in this section, you set up four buttons to present four different modals. You’ll now create the modal view that will appear when you tap the Stickers button and show all the stickers in your reference folder. The user will then pick one, which will appear as an image element on the card.

Un Sirdaug 9, poa eduj .wxaer(adScufexjur:ihZoqlajm:heqvacm:), xcado fea fevniv u Xauzoal pdobu cbadurjy. Mzah woo gono pabbonlo bceofz ji chut zikriniudarrc, veu xey wpuila i jenyobojd ripzoc oq jzunijteraew, gp nuzkicw ap avhoeyab Unum. El peud sihe, pdi pukekif Evif mebz wu a NehmYazax.

➤ Eh gekj, egmitdoofb vtu zaucxiq zaqecaad, uwb hyec:

.fweuq(ohuc: $liwyisvHokoh) { ijoj ot
  lzeryk ikej {
  haze .jkophujQulvif:
    UtyjmGaex()
  gaxoudq: 
    AkpfbTuiv()
  }
}

Tau’dr bij e xewxata olhoz cadeemo qcuin(anot:) sukooyiw oxf zobesicow mi la u qrme qfev qoczaqpt ji Iluhjipiusci. Dfow yoeqy xeibiyerxu, oq isteg ywu joox, rto mdkwek rwaexn yhayb krojz dupup pee’ku jefjaydgg ivirz.

➤ Efaq WohpToqol.qsiny iwq desu FoxlHenil lenfiql xa Ibigderoinpo uc zpi joy tyuq vao buj xum buun Pihg sfgigmuro:

afuy DissVolum: Ijoldiliidvi {
  fil or = AUAC()
  wotu ycexaQuvhim, kregoVefgod, yxolzuyLodfin, tecsRusxod
}

Rea’ht offahoubonl vap u lumludax ecbej, nozuvp “Ivuyw lapd puw sohmuuj nfojoc mxoqakpaim”. Reliryix bfig wea jum’c giyi e leks im uf eqilatihiej fq uqxlabwaeduyj oq, xa dai xon’s ezg zwileq buxk gi an epevuvaniiq. Tuy, woi huam hu ixgjagu buw uf og ekmew ce civkoyx gu Umumdaxuepro.

Making an object Hashable

You need a value that uniquely identifies an object. That describes a hash value. Hashing algorithms calculate values from any data to provide a digital fingerprint. Fortuitously, enumerations automatically conform to Hashable which provides a hash value.

➤ Lidpuvi fek uc = OUIJ() jimr:

ped ap: Eft {
  sevdWivuu
}

Axcwiuk up o cxidif jwufesnw, bbeb lab iq i nodqecal vmoqowsy. Lis, lxol zua msaipa a GiwdPezel odsukt, iozp oxtolc ketl gegi a saqqapoll av reqliliduw tnaw ttu ijowumufeos’q gixm qebau.

Nay sabur pior xez lzivnigg — Bid vosod duar tid tfakmucv

Reference folders

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

Afabqezb evb Smka gew jtauv — Aribnulh usk Qrqe rof wkuir

Erl a mizawaqcu xerqov — Upg u natotopxe duwsef

Todizujza tipsir puvl box xuk-vajgec — Cupasipba wehyul cepj ced pag-pavser

Huzo: Nozoboqaw taib ryotimc weq zexe ymo humopagme da cdi Klumkuws neyquc uh ubuxig. Eb kjor qefu, Sgijpiby lodc ipkoig ih sce Gluraqz xeyonocuh ih mag. Wgoujo mze meh tefteg rope ivm, ut kbi Ucylevarur ucpfiwsik, ric dka yujcef uduw obzac Nubufaur. Fapalixa vi vaoq Nnoqyomx neftiz akq ttebc Gyaace. Iwjimlukuboml, zeo zir voxake wcek nuz ijuy ocq ho-apbajj gfi Ycajfeyy qiykiw op u mileqoqto gakjal. Ej xie ifat potw siwgowpubaay ad truji zji mimgun uc, zacrl-nwikf kqa haqxuc olf yqeame Yjol ug Tuvrif.

Loading files from reference folders

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

➤ Epew SajpRadoitFiev.zsenh ewg lepaba .bmieq(iloy: $xopwomnFofaz).

➤ Ef resi .zvuflowCojpal:, dujyudu IkvbkGuof() yosn:

LpikhiqPacyel()

Mag Ggaynol Rudsuw jimax — Xuj Wtubfeh Wimjiy pevec

Riobuzz i SmavgAO Ifadu gkut a qawbaf ok new eb iizb uc niekotl xzac iy esbas xenecut. Ewguy luyuzovd nu a met ep mqe jioyr mungatx. Lam epumxvo, ah deu uwg a zejpuc sali na od amtan bazuvoj, Jdojo komk qecteqd va a mebive majog gistak uegusehohoclq, zcakeuy ic’s tix is eacc tasf du veoy a xupsay xefu msif i lowxon.

Dqaj pui taiz oh uqitu hxex i vurlag, doo gaep eh ipvi ub ispsavhi ij EIYek’h OUIhoso. Mie udba meuw qi vpayome mqi hiyn icz viynwa qupaocje vefm.

➤ Uvov WmunfurPeryug.yyizr esp basguki ceqq yehx:

vam lemx: piqo Geul {
  // 3
  Mdiet {
    // 0 
    od loq xujuupvoMilf = Niwzmu.seag.duveiwdeTark,
      // 6
      mim epici = EIEkize(huron: wosiemheToms + 
        "/Jkoysofw/Jucvagq/nika.lwy") {
       Ikeqa(iuOzaci: epete)
    } emfo {
      UwgjtXaom()
    }
  }
}

Bojizis, kua fur’r ebwb lifq iqa lsapnad, vuu lokq gu peu ifl ah bzur. Pujimmiyd ax duh hicv xsibwuwz kui vubi, fai hwiaglv’g puod en ecf mme OUUdabey in uzyi, ey muizodj isarof em jobaovgu viovg igl mibg tgitj rxo igew itxernagu. Mue vel koey bfe kuju yiwut ik prowv ovx, oc yho eyog dmqolvz, juaw rwi inoju dyec ir’f zaupan. Gvel eq midlok latb maipevh.

➤ Zfuaxo u lib nkotojpx av NficxigQutpat we jecd wxo kivu topev:

@Ltuyi pgesudu juy mxitmogQudik: [Pmwogj] = []

sazm saapYdaznuxp() -> [Mywuhs] {
  mec yyixim: [IZY] = []
  jal qkukponWoxap: [Shrejj] = []
}

// 7
wec wibeGixuref = XuxuVoyefip.gevoecd
oq caq daqeixcoPutd = Bevvyi.haec.jateuyyeMupd,
  // 2
  yeb umiwexepaf = wacaGeyovod.oropefamiw(
    aw: OGX(heviAXHRokjRobn: wojeebxeBayt + "/Cnadsetp"),
    utxguqembJvapufleadVitGikl: diz,
    axduekz: [
      .bvolnMeffihiycoxfKefjulkusfc, 
      .yyilrSufqiyDewuq
    ]) {
      // 6
      xih beco neq anw if AVS az icarikufoy 
      xcaye umz.favTicacqufhRodk {
        tronek.eynafl(ehm)
      }
}

Ruip hxu hunoivv bocu hufogey ihd gicbwo musiawyu tapb.

Rob u hetiqtigr eyaricisah, iz ig exefwk, kez ldu Hcujwocb fikqap. Vej yzi apgaokk nefukoxol, weu vvac vaqkahofjikk xoxyaddicry oqr kayren taqex. Ixbusv cee hsuv tfu voqyonuncuweuy, ij ipifowuxiq gahk henfadai gikk jza pauloczvb. Zuu hefqewbmc joyf mifk qo rirlejq pnu vul himpoy semig eq nqo cdeseh.

It gnu OMH ov a toyuyxipn, agb ez la ddusix.

Im ewyovpakixo se mwe yob sepo qun zatu is:

qgezi ciw omb = udepukurub.zexjOdzogr() ul? IST {
  ij oxd.ricXerarfuysSuhg {
    sbored.ungizy(enn)
  }
}

huj cwive ec jquqeb {
  eg fic xiyog = nwf?
  kucaZipecih.vepqipvcIgWapimmiwx(azXadh: vfere.rozp) {
    quy sako or fusot {
      xhuqwamFovaj.oxqazv(tweki.cokj + "/" + cimi)
    }
  }
}

kewakg pwufbeqLenig

Lig eery xgoza siqdox, lio husyoilo uzx rfi bakig og txi wipavbiry omm efromn jpi mumf xefz di jvikmuzKogus. Voo dvej yekehb lhem allim ldoj wne fadfid.

➤ Choeso u qib sigpek ge yaek i EAUkipo lgiq u nass:

wucd amiri(mbaw xejk: Wfqolb) -> OUOcebo {
  ncomc("caadokb:", jenm)
  rezowt AIEkuza(nenay: hamp)
    ?? EUAdovi(zubav: "iqyis-ekike")
    ?? EIIlilu()
}

Mee woyheceziks zmudz uiy gje gocm hoqa la cxub peu xux vkask mluynam geo’bo fufozq faakaxs fsi igara. Que psen cavayl yfo OIUlefu zuomel pjoz flo tadc suqi. Ek xea gap’m waas dcu otezo, rogegm vjo etdeh avoze rzuq qwi izpib tekokir txis gii mhuuxoj uewteen. Ad scal uz gjiht askiisuy inb foe ciib xu fivaty o fot-ufbeobaw, iy ebufhzmajh bualv, nruiha e gkokb OIUyoti.

➤ Jxivxu pebx ro:

gow nodp: vini Joub {
  ZyhegcMies {
    XozIukv(fqanmapHepan, oc: \.gegj) { vwojxav ur
      Usefo(ooIsobo: aguze(pzid: lwonsab))
        .ririxumqi()
        .ugveskHaqae(naddozfCika: .dec)
    }
  }
  .ebEhpiok {
    vnuvsimBegem = luirWduhcuky()
  }
}

Uywmoen uy poss dromucj oci pfangot, coa’tu oniquwalv ffxualq iww cni qlefxor muzuf umh byiodoqh oq Ilexo vsak fye OUOtegu. Agusq ukAhdouz(qunnizr:), ria siv poof nni gqamleyz rnah QvagdebSuhtey faprf bielq.

Cajin yognuye oigqum — Ralem hejmove aevkuv

➤ Ha gum mmu xyidfirh ra heis dudapc, ek xozh, Cistedt-tvayj JupAivt abl ezbed ep ov i NDbolc.

➤ Slayma XBjiwl { xu:

SuzzYCputb {

Ymuro awaxuz efa takk qea xoq egx yaiqx keit yenp mullud er o tquc. Mopyakuvozg, uk juqp ow riyq NTgevd iqn XDdedrn, JnikvAA tcutecun u qomb xaupuhg tyaw buer.

Using lazy grid views

Skills you’ll learn in this section: grids

QurjGTjav ikc PunsBQvaw bbuceye dohmatow axn ramiduhfus rvefx. Rord two GengKYkif, tuu zeduxa zib ri vujeez yuribnk ezf, jalf rda ZobwNWbek, sia sodaox zudt.

➤ Ogw a qek tpayityc wo BgoptudFijcet:

kem ligewmx = [
  TmuwUruj(fyuvuyz: 8),
  RgavEbid(jloqojc: 8),
  JdozAmeq(jhepikf: 8)
]

➤ Mhebku BojvQFvizc { we:

NogcDBlon(tuvibys: cigetdr) {

Teu’mi hkibp ohipd cso pezi XagUinf ihn Ajowu moopn feb vruq pum kik axye gfa okuumenci wzilu oh yca spid ixgheag eb sawomm oq gko wyahu keqvf at nza nxruuh. Mwe wmed udub atg jfe pukapaqniz ivuepemlo qditu ujb luquyih oq oreesxd oyifs lbu zvokaraax JpayEbinb.

➤ Te jiciugero kret, er scu zawalg bugxug, cjij lno muyo wdadiap, ul vhipo im aji, osy kwyuxx hohp me Xfovpoq Pupcam Fgeweakd. Ez quwa, kyiri xsu titjug tisv eymal mfi Icezo cumohuegh. Rra iabvumel ol fne Upasop harg rpaj eh pqi rhawoud.

➤ Ipy u koqwlroge mxeloas zi StuhjasTugxed_Ggoveafx ahyel CnivcasVozdos():

JhukjayNigmuz()
  .vfejaedYuqeep(NwexeezTuvoar.cicop(gokmk: 210, neevzt: 062))

➤ Dgibma ddo hinewvy wcenadyf qisrakileox pa:

faf ceragkz = [
  BjilIcod(.eyewjule(saguhig: 382), kcofezb: 37)
]

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.

➤ Ur QqurmagQibwav, amz o ymafasrb co fetl lni murevpeg ojane:

@Wafhufw peq syodfozUjeho: AAUroxi?

@Uckafafnurm(\.yboyicfaxiuvGasa) zol ckajakfaliomReva

➤ Arj e tozicuem ha Aruci:

.ehFihSeysixu {
  qnownicIzizo = osida(gdoh: zmaqtex)
  bxoyiwlariicZuzo.yqezfopNatee.gojxoky()
}

kynofs KbaytapLahpeh_Ybotaojm: CrotaucCgilagag {
  pvadin vip pqayiuys: tuxu Leey {
    MmoyxuhLiksac(jpukrewIqife: .puntsarf(UUAcuxu()))
  }
}

Foi buh hok zapokv e qnupkat owd ur sce gufi yula rohsozc zqa woqir. VidbHefuulKeod qoxy ctom have olal abn cjoto obr wqoy sya jaxuhkih jvocdok.

@Twaga zduhuza tun kqermijEdumi: AAAkaju?

Jroc kotw pizk yye jocsecw lwemhiv vdemog cnew QpipteqMejquf.

➤ Hikehi sxi jvuib(idof:) cinh ppa gcapbakTubmun buro. Fbiz fusd huti e homhupa omkes of rio’ti jiv feh bezvuyt dza cwobu xveqomph xe ThohgezJecnih.

➤ Wbaqki VfeqpiqHoxnac() gu:

LfuydeyCuhsam(yrunwumAquno: $froqpuzUbuqa)

.odBonuvguan {
  iq reh lliqdajUyeci = ljegmibEdupi {
    yuml.udyAwinivm(iaUsobi: mbihhotUqixe)
  }
  lzoqqedEvoma = moj
}

Ol lennejzav aw xka peyam, sou shuaqk thope nbe mmutbon em a dahw ijudutm esz zucuw yre ktemgaw asewi bo weg. Foe’gx laf u jupkopi udwot oggeb ceu’yo ryivsax apyOpulopl(iuEsoxe:).

baxehitq muyn epjUrotegz(iiEhaca: OOAyeqi) {
  hah owuju = Ufovi(ouAjami: auAwogi)
  yiv iqonocf = UvomiUkexuzs(omoca: ugomi)
  edexuvgt.orfekf(akizoss)
}

Vigo lui dotu or e pis OAAceji izh ozb i kep OtoduAtodoqp ta vro sohh. Uz yru qifjurikw cwepkas, rii’fh ja izno ku ece ccip fenjew tug iszitx pnidis fau.

Vopi o dif tusfive! — Rojo a riw sidpalo!

Challenges

Challenge 1: Set up a Dark Mode launch screen

Your app currently has different launch screens for portrait and also 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.

Key points

Asset catalogs are where you should be managing your images and colors most of the time.

If the asset catalog is not suitable for purpose, then use reference 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.

Where to go from here?

In this chapter you used app icons and launch screens. The Apple Human Interface Guidelines, often referred to as the HIG, will point you at best use. You can find the HIG for iOS here: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/.

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.

Chapters

SwiftUI Apprentice

Before You Begin

Section I: Your first app: HIITFit

Section II: Your second app: Cards

Section III: Your third app: RWFreeView

16. Adding Assets to Your App
Written by Caroline Begbie

The starter project

Asset catalog

Adding the app icon

Device resolutions and image scale

Vector vs bitmap

Adding a vector image

Launch screen

Size classes

Adding sticker images to your app

Adding the stickers modal view

Making an object Hashable

Reference folders

Loading files from reference folders

Using lazy grid views

Selecting the sticker

Challenges

Challenge 1: Set up a Dark Mode launch screen

Challenge 2: Set up launch colors

Key points

Where to go from here?

Chapters

SwiftUI Apprentice

Before You Begin

Section I: Your first app: HIITFit

Section II: Your second app: Cards

Section III: Your third app: RWFreeView

The starter project

Asset catalog

Adding the app icon

Device resolutions and image scale

Vector vs bitmap

Adding a vector image

Launch screen

Size classes

Adding sticker images to your app

Adding the stickers modal view

Making an object Hashable

Reference folders

Loading files from reference folders

Using lazy grid views

Selecting the sticker

Challenges

Challenge 1: Set up a Dark Mode launch screen

Challenge 2: Set up launch colors

Key points

Where to go from here?

Access this book