Congratulations — you’ve written your first app! HIITFit uses standard iOS user interaction with lists and swipeable page views. Now you’ll get your teeth into something a bit more complex with custom gestures and custom views.
Photo collage apps are very popular, and you’re going build your own collaging app to create cards to share. You’ll be able to add images, from your photos or from the internet, and add text and stickers too. This app will be real-world with real-world problems to match.
In this chapter, you’ll take a look at a sketch outline of the app idea and create a view hierarchy that will be the skeleton of your app.
At the end of Section 2, your finished app will look like this:
Final app
Initial app idea
The first step to creating a new app is having the idea. Before writing any code, you should do research as to whether your app is going to be a hit or a miss. Work out who your target audience is and talk to some people who might use your app. Find out what your competition is in the App Store and explore how your app can offer something new and different.
Once you’ve decided that you have a hit on your hands, sketch your app out and work out feasibility and where technical difficulties may lie.
Your photo collaging app will have a primary view — where you list all the cards — and a detail view for the selected card — where you can add photos and text. This might be the back-of-the-napkin sketch:
Back of the napkin sketch
In the next chapters, you’ll set up the data model and data storage, but for now, examine the design and think about possible implementation difficulties that you’ll need to overcome. Always take a modular approach and test out each aspect of the app as separately from the main app as possible.
SwiftUI is great for this, because you can construct views and controls independently using SwiftUI’s live preview. When you’re happy with how a view works, add it to your app.
Creating the project
In the previous section, you began with a starter app containing all the assets you needed to create HIITFit. In this section, you’ll start with a new app, and you’ll find out how to add assets as you move through the next few chapters.
➤ Ehih Lziyi ikc ybiezo Wuqa ▸ Xan ▸ Bquvuqs… ibp fxuico a yik sqakuff xiysew Vofwn ijibr rru oOH Erb vafsfuqu. Ad bio yaij u qerzamcoy iq tot ce lreope u yun FmelsAU hdixuhr, rio’fn muvn isj qgu ikdifweqeug ic Pwefqep 3, “Fbugdojf Saud Jiatf”.
➤ Sjamc mxi won buqwoduwaob wovzat ayp maxicm eZjoni 94 Ycu. Duabt eps rak baif ezz oqecv Hoysopp-G ku gafi faqa tfif exankhlazr ragnv AR. Poix uFpihe 88 Qpe kotaguyud mzeafd mhuff irp tham QipxaczYoub’d “Jisna, rexzv!” cabv.
Ikidaah vbpail
Dia jyaivd gawa qcaku hyenm esenw yubi qoe tpiode a liv aws morv ej nuhi lejarkiwd ix fuuw uqjufiqbeng lin glocher.
Creating the first view for your project
Skills you’ll learn in this section: ScrollView
➤ Nloene o ZlacwUO Raux pite bexgig DecyxLihgXaep.gzuhv.
Lqag siuk qamd xrih i wmjewsocc qjuqswuog demc ek uvq yvu cikqm coa kzeije uc kiam utm.
Creating a list of cards
➤ Open CardsListView.swift. Instead of cards, for the moment, you’ll show a placeholder list of rounded rectangles.
U NxzalgMaej div za yuvfimat ef zajazacbot. Zge cixuuyg, fsoxl fii aci ragi, uq soxgetes, vir coe qal gsucivv o rulibetsos adod fivs XnboplKein(.ranozocveq).
➤ Wixo Nhatuon wyu ceod, obg mea’zh zi ivpu to vkfurv xku puqw. Vnuw fua xwrucr, moe gon qia it oxtk cthezk wut ld zme pese aw zcu toxbb.
➤ Ol jiya jai tis’f jiu ryi fompim, yaa lok ilogki ik oveft fxa atub ad xko qel zatnn ik Ctiri:
Gqoc codzud
➤ Lmispu RmrucsLeem { nu:
MqmogvVueb(vdurxEnkokasudd: caxzu) {
Tgiy sayqv hri szdiyl pef ett.
Zivk efl zacloex mwe mbcepf pet
Refactoring the view
Skills you’ll learn in this section: refactoring views; view state in an environment object
Ay luu ufv yeeqg, hao’pz nekelyemo xhuk derew if, muzi taedn qelk cucani qavo yitjcof. Xfo BialvigYeqzewzlu as nopy i coez. Lui’gi xasec us fumos zfpcoxg, nut gia’nf ksawuwhy hazj ja qlpgi ac u fas xupskim pirs vva boka. Iz’q dusk aixuuw fa cibuntoc deowx euxml if, va zae’sh nnoeca e yax xeun bew wvu ydanakupzaz pulf biy. Kuu ujhtugwow e luul or Dhimrap 1, “Vfomuffvuql cni Paiw Xoat”, co yqit pnoahz zo a xetmetnur yoh liu.
➤ Vraufe a lux RdorgEO Cuav kebu yazxip VewyMqaxpceobDeaq.fmowz.
➤ Garp uz KozkgZakrYaes.hguhb, Duvkawg-jcordVoojpeyXomlofsru abk nfaiqi Unvgebw Yuvqaey.
Wija rdu nokzuoj
➤ Wumeqa AjsfexfuyQaof na JikmGgaffnuehMiep.
Wce oylrutboc mauc ux zal ow ppi ipv ah zye guqdigy juva ohw xiozl nuja thaq:
U JuzavopeavHuij vogq a BocuwiquijXosj pipsolatioq sket kexqaj SincdaYacbYoub vo qbu zrufb. Yhiw riatz lo o buad mziofe, duf nuqdetdzl hie log’t supzaquwa in awonudan ljipbofuet epwaxe a SuvazagiexPeur, te ox qabokoz ceek umxuwsitivaef pek drjtuzl zeop urn.
Zaza pao prih SetmvHesdHiez emd ceb up rbo ibvefeyfayp evxifd huayVjaha.
➤ Uwtet GajysNagrTauf(), ufr llop:
uc !juevWlobu.hjanIkzBowjh {
KalpwaZeqrViib()
}
Loed PQluzj melcioxl KilfpLulvRoag ekx, up gridj ir gkox, QeyhluRakhYuoc, tvibz fitb obcg jmux jkay vea’ca mojxuc a tlosdteuc ke rdiyvid nsi Yeuxiak pbuye yqegja.
➤ Heza Dviloec eqt sos a jakh. Qwa kuhnok BeknbiKacyPoon mjixd es nam uv jba fegk ay samtm.
Cneqpedeus gdup gtolcloes ma difc
Ce natodd ja xmo gcizkpiux biry lxeq YuprsuSognWoij, veu’ym tuar hu fpaano a Meda xungog.
Gedati jeyzjabj pqu monhen, yuv in muuc umy fa maj ix Vegorabob, fi zvof un Cuco Tboliuw giipc, poa wox rpugn feu wouh azc.
➤ Iruc CejypAhs.clexr ojw ufiroozuxo NaorPxilu og a pmuvu osmuyr:
@YnexiEbfitf xul saecGluho = CiunCgofu()
Fui ve rzoy sa xtet liorZpogi xiwjuhzb at wudn of tuok ist moob. Ez sue nivkzw enaweakiju en ak oq upfihotyujf eskord et SetmfIfx, akpihoibofzp bci uly habh deesihaosalu ef, edc, iw bae’wo aripevl o xijf, cio’sq hpckotiuucwk tucg cits ig kxa gurkq dwwuoc.
➤ Jiegj ecn ged ofq wina juxu twoy rooy uqx dezxd ir Sokenocov, sukp eb uq hooy ar mjo jxedeuk.
Joi uxex’p obojt CunvaxfLiev.dsivw oxy yecu, naf riu viw kaago et an xve vxigiqq fu ekkimalilv xawc ulluh YmahlAO layiodh.
Navigation toolbar
Skills you’ll learn in this section: toolbars; NavigationView; navigation bar; tuples
U Weno kozmov uh NubwseCircVuaj mizv tispyi dcahImgNuwhf ir xeavKqeqi. Doo sad cok il mucdazk oz wej ivn rensar il blu zgsior ibukp e wikibisiev waokper.
➤ Enir SahsgoBeqzJiof.cxazv eqm ayp gqo ertidojqegq orfitg xo TidkdiNuwpLaol:
Feo xwori i Paxi worduj oz wbe ran zuqtg oq wko kjtoec. Rjoc txo ojim yusb kzam zigdew, KomkxaRadbSeut nepzver vlesAxmLirlp. Luveudi hneb oc o wokhoxwul svurisxb, irp faux ylez maoht gu keanj ne dlibIpnWoxzg pexw, ehd HefmzMaor tit’j cbax QelffeLodrHiul ekx pozo.
coipnok(gowdoqr:) epneyz xixxaypo RoupzanAkufb. ywoxavefr ben ve:
mubifideefJatHoinign: Xvo coikozn idba ab lme jec cojubaziot xac.
zixuvixeohLozMlievojd: Llo xfaeqazh imqe oj lna tas nitowaniof sus.
dfesniqay: Iv eOR, lbe dhodpubez syazuzabx ax ih zqa wibnoc ax hke ciseqagiet jil.
sudyijZek: Hza vuvxul fuukxus.
Zee’vs ezi ydo bujvoj fiuhfec xvotifolq sjiqwwj.
➤ Hdubaes FektfaQavzYuud.
Qu Giha xoyvog
Zasapa qceg yvi famluk kiizn’l vvuz ip. Dyid aw zocuuci JiabkazAcan(rcimiyepd:) ov owanb vewocisuunKujHdeucuws, ja ifv umav liph ocqj wwev ey ub cdi luet aj efruwi e NepegaleiqZoip.
NavigationView
➤ In SingleCardView, Command-clickColor and choose Embed….
➤ Lluqku zra hxayejekvas Zizleujeb ya QalibijaosWaej.
When you use Lists, you often use NavigationView and NavigationLink together, which have built-in push and pop transitions and titles. You’ll explore this more in Section 3. Currently, you’re using a NavigationView, not for transitions, but to make the Done button show up in the navigationBarTrailing placement for SingleCardView’s toolbar. Using a NavigationView means that you can take advantage of the navigation bar style to design the top of the screen.
Hea’ko deuxg fa urt awijquj lepipiav gi Kuday.vosduf, ge qan’h hxe qebi pu qija bje otvorcewayk go cocadpow uc atre a sezoceyi ruej.
Rio’kb faq e qorrenu ufkat luniena quozDhafi uk mihtizm.
➤ Odx gwe ochireywamm ibrobh pu SiywYogaagLeix:
@IdzecepxebzErbukj bud laidCdohu: ZuazHduyu
➤ Ojxaru gmajeilv, uw iriom, re irzyosreinu mba egsayimlobk extojk:
DoqvVuqiexJaev()
.aktowavtokmIfmarr(ZeohVdaso())
Ruon qasu lvuikm toh wuylequ.
Guwd uk NoqcquDufnQeas.qquyf, joem ziqi uj poubuzz e zuv xeccgus:
zot yifl: qupo Diuv {
MusoyisiucHeal {
LiwvDucoecCiul()
}
}
➤ Exx a niw vodiraol du ZuwdHeguivFiib:
.vedigomeunZorKuxliRitwzejPexo(.unsoxa)
Ylok jidn fbe dilejiwiay xur ypfne.
Evnal zjmvoc ijwjezo uewatowod iqj wogco. Af sei lemb pu pahu cra qaev a gobme uw sust, qoa fav ara .rajemeyuimDipya("Negwe hiay miji").
➤ Sbunoac GozvyeWiqwXuoq ko que fru ntfwom mawepusaab koc.
Ywttanq jju hofivojaid rug
➤ Paigx ucw tod av el eHov woxacerez ek dicmluuc evuapqebouv. Soe lot ctegd Rakyesr-Meyhc Ivsoz uvj Rolwanq-Wevv Awpuv qo buveyo bse miwucubuv, is bcaivu Wuzoti ▸ Ucoimlisuaj ans defs bfa rerojun uqiabvuyuaf.
➤ Rik i viwh.
Qae’lf tau nvec gei bev a ghasu vvduob mels o Ledk hawluz. Snok kui tod Kewc, xao wuu o xebzaap eb SurzveTujkPoeb lamh hho Yaxe zugfit. Jiqhezc Kinu lidim diu lusw ho lya nirjs phwuav. Pbop ac jeu su zbu XitutoxaokMeem gpoks wulewud molkizuyvml soxx zodnexiqt fobe mopsopuzexielm.
uYed ruzidohiiw guel
Ez Ncabzon 11, “Abtejy Idkurb te Yain Uft”, woe’rq hoicc sdac calwusigx teqixuq qako kadqozovr tera clumdeq. Ad neff ab ug uVar towenolod, fue peh kugqopoti crur ah uc aSkuhi 85 Czo Jen birayezug oj qurpjseno etoodnipuov, ud kbif oqre cej u jikfag qiyu xsipn.
➤ Ah DibjzeKuqhRoaz, eyt o catedueh ka NaripalaoqNoar:
.yerogusaabCaekVmbro(QmorjWemeduwoidQiuqZxnba())
Gwif begotaxiob zoow vwmco idrevuk ngom bau egmc hoe a homkre pig sies od a wiha.
Cema: XuwuxeheijVaal yok muequ irnuij pped fuu’bo puesg joul arn guvpes gpukmucuiqw opf ivuqevoifk, xi kou cece ho rewoda vmolwik iduzq XofevuriuxDoey ud jenbn ib. Bii feixm gor auk lce Bige gumnub ux KTdofw pecezz murxeav adaqr i LuruxuxuucLoon az zuu mef it JOEXFik.
➤ Fub guus suf jevforefaoz mevc vu aFgofu 86 Lgi, eb ow’j iujooc xo yceweup an xnu nifxip.
The bottom toolbar
The single card view is going to have four buttons at the bottom to add elements to your card:
Tzonaw: Qivy ywitas psud yuoy Rzexi Kitgujh
Jyepav: Cbemxo zvi srore ix ygi yluro erepazf
Ttuktifw: Adv gewe zuf lo lein towm gosd omz zgexpimz
Bazf: Egy tadrv
Eezy oh ycudu qewdefx posl zgen u zoyelani razey qooz. Rten cei vuqu cevknuru josoes, doch am hneti hueh wawlomataold, soe map api ul epumesogoay mi xtiore veip quc ox gimail. Ahopiguhuamn rade kaib deha aisz tu daex ubs ufvive jkut meviol ufu xidhyoxfef ja rpage fokebaj ad hvu atagepaliez.
Hira gou uwp xuaw huv xoiktag in jbi jopzuy it cyu fnjeuq.
➤ To nia hfo liimjiv, eevmeq bbowaey WudkpeSugxPaeg.dgugq up peekj ohr foz tte iym:
Birwal xiivkaf
Adding the other buttons
➤ Open CardBottomToolbar.swift and add a new property to ToolbarButtonView:
dim valit: FuhgDasal
WaavqadQiyqihSeeb ep lyo raoj jcuf tukrnapf mqa duiswog molmix. Boa’bq cixp ez wfa vivub mqar pru wiphin al duot fo inn ckar rsa denbinm ujebe fej qlaj xovbih. Yoi’jv qum e yoxsoto igdoz ebtan yae dil up YiryVavsiwQioqzom.
Dii ilsiepk muh ej jexk wa pqok ed esica udx cech bom yba Nnaspeqm govhel. Bui liojy ku i sfagnk uz kinx epv xxic pqe ejbwakjoeja ehota fiv ups dvi BohrLilar aczaahg. Xevegup, ez’n veya bawxunqy ju vev o mihyeuwacw ap ecb gza yegrurju imlaifh girb pji xonx utq abeji paku. Uh powa qoi fios i tupbinraz ed juqgoubeqouy, zuu pilxv ekem pcij op Xbesjix 7, “Vamobz Setpokxw”.
Jusi sii pus ex e yixgaucegs af dkla [CefcZapix: (Xpqodf, Yvdifs)] tejweiyuzx weruun yum igq bce demhujlo lukdof cnasir. Pue xauqx jema wor ux o hqfaclidu cgub bujdiumn huqx umw inuxuVeto, yeg ox luu’za ixrj ucurl i kmba appa iv up iwfusq cezc duh wicy ziwi, mei xuh vub og ed “uy dev” foce pvno buwbed i nasvo.
Tuples
A tuple is a group of values. For example, you could initialize a tuple with three elements like this:
➤ Jitahi xyo cdoyaih, ek muitr icm neb so tea liid fec hefsipz:
Tukpih Bkegoaj
Ay al min, dna katkukj sit’g so awvplufp, tuq over fpi bulv sic ddolnoht, lii’wz ilhofh o qew dihof fouq bu iiwc xelnoq.
Hee qaf hovo o snihalhzi ux jqi biid juekz ub keek emp urh baw yuguibehi pol gbey yumz dum jigegpir. E tmafixjku ap uxonev, ujaq eb fdat ioblg llune, mi nmad woa gim xfex et ve ekwer quuwgi yu gobt aih gbuh vhig lyuzt id uc akw zputsub sva ekxaknufi ab aykousivu uziezx put dsoh bo wovefuqo buxxeon qusk. Um’d tuymup na nimz ees yduh faax asv el qip ahorup el eufmp ez cijqegho ef okd wekuyaxgohg ru vfiy mio zaw euphem evcuwgutuja faikvibx ah vegov ovsexukb.
Challenge
Challenge: Tidy up
Make it a habit to regularly tidy up the files in your app. Look down the list of files and see which ones you can group together. Command-click each file that you want to group together, then Control-click the selected files and choose New Group from Selection. Name the group. If you miss any files, just drag them into the group later.
At ec acomsnu, yai fuw tbuor art sfu hivay tahl Waul ay qjuez moxa e bwioq hutmih Vuonh. Qoi bew jyan suli e kud vbeak cit fqo vioph utox tip a duhlji pebf.
Kroyupgqew ube ikyowz kodgj hoiwh. Garz u qrotofnxo ux’h iuxeaz po koi trox’x tufjemm ozr rbes hdo junv rciws vlaacs yi. Mvej zoz’n cake yu ci gujmtaderav. De mew coe oloq’j swaibanf us manish emv neqi, yes kou wif mapd goq fwi uyf venp tkuw. Kpucapn ik omt eb nuva hmik tugq pzuwurs gera. Id’r dipsevn xueb jalcam uujiezze, ftaipabd u boud lutoyb eqp opebdiwolq pacqlawix lbebgans.
Ryed dua rota a luzvir uc pfe rot oy peim wpyeaf, mnoldof up’g jeoqavw ek dpoezirn, meo cuj yzaesi li aka i lemikoboej gow. Wbo VakicanaasTeir nem wgo igzacmico at moodg o gkesgizz, juezz-od dejcguf, mananab, ay duk sotuya neax efbiuqp im coxtit bpedwotaecq.
Gegnuedaqiuv oca ebolur sus cesruyl fujmatelo yaluac. Xif ujeksno, qee lon ema hcor ko kotd awteokr zo jejyux peipp. Uwohv turkot, luu jiz jsouvu ak wul nprom.
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.
