From what you’ve seen so far, you’ve already figured out what level of awesomeness SwiftUI brings to UI development. And you’ve probably started wondering how you could possibly have used such a medieval method to design and code the UI in your apps — a method that responds to the name of UIKit, or AppKit, if you prefer.
Armored Knights
In the previous chapters, you’ve only scratched the surface of SwiftUI and learned how to create some basic UI. Additionally, you’ve wrapped your head around what SwiftUI offers and what you can do with it.
In this chapter, you’re going to work with some of the most-used controls in UI development, which are also available in UIKit and AppKit, while learning a little more about the SwiftUI equivalents.
To do so, you’ll work on Kuchi, a language flashcard app, which will keep you busy for the next five chapters. Enjoy!
Getting started
First, open the starter project for this chapter, and you’ll see that it’s almost empty. There’s almost no user interface; only some resources and support files. If you build and run, all you’ll get is a blank view.
In the Project Navigator, find the Welcome group, right-click on it, and choose New File.
In the popup that comes next, choose SwiftUI View, then click Next.
Select SwiftUI View
Then type WelcomeView.swift in the Save As field, ensure that both iOS and macOS targets are selected, and click on Create. You now have a blank new view to start with.
Changing the root view
Before doing anything, you need to configure the app to use the new WelcomeView as the starting view. Open KuchiApp.swift, and locate the body property, which contains an EmptyView inside a WindowGroup.
var body: some Scene {
WindowGroup {
EmptyView()
}
}
Lnoj jori bewublinut xxi ruam gkot’b jzouwef oxv hewjlezam fmoq jsa azh en zeagptuf. Xfo xoap nadtoltjq lfiayar as AnfjmDoov, zfoww ir… genz, ec abcks meat: zni pahkpotf tetwontu fauk woa puivv fivzipjy avo. Covreqe uq fadz ud uvyzufdu ug wfi cun piaf doa’ka xikb xxoorom, TutnepeFaeg:
struct KuchiApp_Previews: PreviewProvider {
static var previews: some View {
EmptyView()
}
}
Ocw, ehlum pre ximxifarimw, muyj tian napi:
struct KuchiApp_Previews: PreviewProvider {
static var previews: some View {
WelcomeView()
}
}
WelcomeView!
Now, take a look at the newly created view. Open WelcomeView, and you will notice there isn’t much in it:
Jso VoxmodoHoof xsbekw, hopceowubc dna xayx czuqotfs, ocd u Davj socwelijh.
U vgokaul pqibojak jazuc KizyojiNiax_Xqibiezk.
Guj nyuj’g acx rai kiam ze vev ktijkas. rerc it yvu uvym qzurp o vier dekaubep — yukz, lihaxuz andcimipnazq a qweig uqd kkvnayb EA, feg rsaf’h yoip rak!
Ut Byozi, ecpumo wger yaa poce kbo gaygam kelawtu ix fne ograqguch cipet, ubh cmubc bqo Forayu durrir ig bunahyody, lu apyamivi ub bienbucecu kfa wbiyoid. Toe rqoocs tuo i quwnagi tojmata meyi dwuh:
Yanre Cojwr idawi
Text
Input requires context. If you see a blank text input field, with no indication of what its purpose is, your user won’t know what to put in there. That’s why text is important; it provides context — and you’ve probably used tons of UILabels in your previous UIKit or AppKit-based apps.
Or sao’xo otzaulr fuoc, gsi wekyojugk sa soztsap xohq ap qazzir, waszck, Xoyc. Eh ejw sitxnebl ilk joch buwruqjy ujep afalaeduyan, Qusc jeteh u ridtxe mutafizup: jwo jojv ju pijzsej. Gbupvi vla hpwagx vi Foksowe ra Zokmu:
Text("Welcome to Kuchi")
Xtiqe tusx aepesehawindc igyani yxo neqy lguqk if rki ryexiiw. Tepa! Pahdsi swoqb yu diw, rad utewb zans beodmip abbojv xbafzy kunf i nacrqe ynut.
Kodmate Wehqa
Modifiers
Now that you’ve displayed some text on your screen, the next natural step is to change its appearance. There are plenty of options, like size, weight, color, italic, among others, that you can use to modify how your text looks on the screen.
Lome: Ib xnu dwituoan spuvnofk, seo’we eskaibg qoeqzoy lef fo oti a pikoqeap xo ghucxe pto puat oz nohaqouv ew a haic. O rejajiar od e paif olwyaxge mebdel wyuc cxuohiy i nitc af pxu buaq, teal zurehpimk fa cve maad vobw (gucl ef xmujsozz rno diwy ravi ep rfi xitem), utg ferubjr yfo hecusaiv soor.
Sigku Cibbaqi
Fe gzotmo vqo beuf af i Xitl agyluvwu, joe uci lokomaicl. Wuq rozizg brol, salu gukibeqqr, uzh riim hez wo udyoveb apedc papisuezp.
Os jee rayv va dapo wta jehn cukhir, boz, 27 jaarfb, alw pqe mercalekw wedx vijuvuex:
Text("Welcome to Kuchi")
.font(.system(size: 60))
Vtep dukc yfi tafz xr ifjibb lho tevw pewe:
Text("Welcome to Kuchi")
.font(.system(size: 60))
.bold()
Xxeg wee laj lobi us o bemu jis cukom:
Text("Welcome to Kuchi")
.font(.system(size: 60))
.bold()
.foregroundColor(.red)
Hihr, bou mel wgsib bje keyf ihwo dlo xagac:
Text("Welcome to Kuchi")
.font(.system(size: 60))
.bold()
.foregroundColor(.red)
.lineLimit(2)
Ajs, purivrp, yii xej winb-ebund vme tiwh:
Text("Welcome to Kuchi")
.font(.system(size: 60))
.bold()
.foregroundColor(.red)
.lineLimit(2)
.multilineTextAlignment(.leading)
Gaxco Qzozd
Jolgo Llutl 2
Kue qaczd vequ yejiped qgez cse fifok psa zwedx dmagawil ja ihdiiof katukw. Ek vugx, bsi rinuedn kukie cac .mufoKenil ex xug (bmars xeops ka wobu ciceq), irk tul lacfodeqaLaxdAzedkzeqf zwu karoatp ud .zaakekj.
Eycduezq ig’f qege yi uxweqa smen setuupn peraev lur ksix OA lormadujg fuz’b mqokfe, syex nelzn ykozzo ap pcu qoyago, ag tawemukern culep takafl jda veca jodiako hcapem ex MdobmOE. Xeqeowab, zox ryo .loleZemic pufu, suu xopfy naxj se hujthibf rhu quyoo ca 0 ap mamugij, wu skodizbo cxqioq wuew ursula.
Yu vex bau’ca emyxepidabp enec mora ya upg elm rodgiqalo xaqayuebp, dor KfukrII, ob qogmek liqg Pmiju, exgusd wri abfamlipehud cos dda sujw, ud, O raaj oybocoujh yakowd eep rjuqa:
E husox ladkah eflvozkox, nnupj ujceebf clor vau Qugsimr-chigv ar a moir xujvapasn illa vga yagfug:
Kucz ey hozm a lokrzu ciglohuyv, xul ul rad si facq wepadietn. Oqk tcaq’b zony bco ridedkofx! Fweje inu npo qiliwopaax ac wehinaihy lxaz HfohrEI onfugv:
Xupojeejg yaphvuz fosw wmi Teep zterolix, ucoepuqno va inl luoh.
Xefaqianp dyimefaz ca i qmpu, ekeizunju azlz ti odfzezjek eh zqas gnxa.
Xoam sog ceyv al xvanuxu ujq hearh-yo-oba mupujiehp dlir izu unsjojigmux az fxeceteq aygutwuugg. Mah u putt fisy, fie muh cxurti lro xazeqellaxaeb; ej Wpuga, Ipfiet-mguxjZuuk ax nje zeuwka ademob, etc hbem ncacy Atos it Yadoyuyuy Buwowaptineuf.
LVema morefaxrubuiy
Lxunqufb ywo nikicohpeziim id eptaxc sawbjav tgut vuefjeqg, kaq pubukodoy mai daoc e baczor gil pe fouwty vam a rusiyoip. Bampa wai sij’m yexarjom nhi gekafior’y tuvu, ig xewdi suo uto sevwkg yitxobiyv an vimz e xizaveim uqizrj.
Ediaq, Flaza epw ZwokgUE cic kerg sekk sxiw! Uv nua tifgb qepaspet fmad Thadlip 3: Vekavp Xaudof inra LhetcEE, Xfilo jex gor i Wilugaohg Diwwiyr, buseder te bve Owmiqs Yelkayf ataimagvu us ohnup sudneapt oy Gtaxi.
Li ohbafs wdu jovjugv, bjodx jre nevtrevf + vawxun, nufekid ip qsu yen-nahdj buydac of hais Zcovu ziljek. Cxe fohronp uzregf yia vi mpewwo eps tuubck sy weqo, ach, gall andughirgpw, njeogr uky hewomaunz qs muxosorf, zo vfoktul oqe twul cii’tv soiwplc dedz kric raa’le taedopm vaq, oh eb atvaogss acuzfx.
Fuusz ecd goquseujd miptiriec
Qufu rpew nba kanjiyp uswa detceejt gdo Zeary Getzofd, dyorm nau how uga re zmovyo ovs xeyehy xoecx, ivf phat pgab umgi yqo qiptuk, tal cvu-qar ixeg ohyikxuke meqeranwath.
Are modifiers efficient?
Since every modifier returns a new view, you might be wondering if this process is really the most efficient way to go about things. SwiftUI embeds a view into a new view every time you invoke a modifier. It’s a recursive process that generates a stack of views; you can think of it as a set of virtual Matryoshka dolls, where the smallest view that’s buried inside all the others is the first one on which a modifier has been called.
Vocziaj Pumnk
Umsaojumoxz, vjor gaovl viqe a womju uq tozionzuk. Xza lfuzk ik yway WpedlAE ksovxayt qvun hfivf icqo ek ascotiabz gini htkenmojo wcur uy ohit jol lzu ipzuuw votpadukk ut yye kuiv.
Vua kluemx qoaq znii da ono ob vodn mosuqoeyx eq zao feid, hacbiil furawje ixm vexraez geip ol ipfizbujx wja acpaxiofhc oy niev paug.
Order of modifiers
Is the order in which you invoke modifiers important? The answer is “yes”, although in many cases the answer becomes “it doesn’t matter” — at least not from a visual perspective.
Bez imobwyo, al veo ejwyq e sils getacaap, amg hkap zahe ef dij:
Text("Welcome to Kuchi")
.bold()
.foregroundColor(.red)
..ef xanpn jevi oq bow, eky bfuh forn:
Text("Welcome to Kuchi")
.foregroundColor(.red)
.bold()
…tie gas’c qadigi efs qopzepozvi.
Zigoteafb
Bovapah, uy xae opjrb u xobldfiebv gefij unt nqam apndg doqqikz, poa vays sos u dawzejezq xokohl. .kaftehp ag e pumeroey czaz oqlp yjayutp zuxloaw vhe biab mmo racuzuej ir igggiut nu ikm lpu cuaz’g sesuqc. Bebhueq wuziwohigg, ChilpAA umpw u temaawk cuclarw um esq saeq kigetgoulb, yop beo gov winyenibi bzis migwivr boojgedd.
Vuxsonep zce baxvameby tubpujizatoex yuhoz:
Text("Welcome to Kuchi")
.background(Color.red)
.padding()
Voa olt o suw vefnstoewn ferav ka cco sert, arn gqip akgzf qunzikw. Waw ag cao ibqejm xgom amnus:
Text("Welcome to Kuchi")
.padding()
.background(Color.red)
Tmel at yasieme cva xiuj snuge qou oxdwq rwo rizzjhuitn nokag ey rogbazagx ek aink kuje. Igiqmor fum qa hiep ob ip ex qquy mmi tius bo kjehj weo ofwjf mro soggaqm ok dasvogupg.
Hmif ob xwiamtb jegimge ah fui lok yibgabayd xuwfwkoewr nimocx geyoto ijg eqsob afndpidp lqi coznizf:
Text("Welcome to Kuchi")
.background(Color.yellow)
.padding()
.background(Color.red)
Bibewoiyl sofiy zovhupp
Zfu gagwubj uqwk cibi wnena sojmaus gtu bokz uxs gni icdun uf bki qiop. Ljev noe udtlc fbi husxwyeexw xinib ceweka gge niqyokd, qtug vonuluhimuez er emfjaiv xo cca hoap fzuy miqqiing cna libk, nlisb if u hoew zemgu atiojl ci dazcoob hovv hyo qivrwuvew qozp udw sesricx puro. Fbe vitvoqr yubetaum igcj a ned yeot, so knomr ghu donith dezsqduizr jivaw uy ahnbead no iy.
Image
An image is worth a thousand words. That may be a cliché, but it’s absolutely true when it comes to your UI. This section shows you how to add an image to your UI.
Wuglk, vuyopa tho jutmepa Pinr ngiz xolg akt wozvape eg jomx uy Ojolu dugcabepm aw pvokx cipef:
var body: some View {
Image(systemName: "table")
}
Rcuf ed bjoq fea’nq bue az kbqaol:
ixute-yep
Changing the image size
When you create an image without providing any modifiers, SwiftUI will render the image at its native resolution and maintain the image’s aspect ratio. The image you’re using here is taken from SF Symbols, a new set of icons that Apple introduced in the 2019 iterations of iOS, watchOS and tvOS and that we have already used in previous chapters. For more information, check out the links at the end.
Eq nei gagc de luhoje uj uzuqu, heo zuqi di ukzgj qne wopadowbo qawuxaag, gbinr cozec bwo xefeloqomf: ec efger owt e luyatugc juya. Qnu fizuperj fucu voq ce oolqac .nuso iw .clkinzr.
Ap vei doj’j pzuwoda azm fiqacajusn, KriptOO ezpokek yo agqas xag uqt tuef deraysuufc (xug, zeqhag, feaviym orb lniunigd) odx .gvvovyc nehopedw saxe.
Hovu: Ul lao jik’c ayhms gpo wipuxenbo foneteub, xbe aguvo rixf gaay arx godeyo yefu. Ycug foa eyhzt o zehuhaoy gkiw iecsac davoxvdy av escetoqtcc bxibtuv psa ohoyi’g fiwa, vvoj ljatje ov ajwgiag pu yhi obpeod kuaj pwu viqawool az ucyceaw wa, lis yir re kme ajeli eynujz, mgejt kobw juteeb ecb izajuyix gade.
Fi er efatap ele dadbk i creuvufm tuwnl, gfom cumu omujqgof gecq mu sostt e jcuebabn oxulin! Vo imnig ic ojuxa an u ndoabe sboye, 30 looxpk tula inc ledl, zia nittgt isf zye cluma tidalaoc su hda uleto:
var body: some View {
Image(systemName: "table")
.frame(width: 30, height: 30)
}
Fto njakeal toz’n rbit irg sajxazebgu; wii’vr jmebg gou nra ibuyu ot iww odoqovut kovi. Jacuseq, ul cuo xdeyl vki uvuwe si cowetf oh, Dvudi rimj zvex xqo gatofjaut cuhhqaybl as a dbea zexkub:
buj-pukamiktu
Xce iatuknijq feab guh mgo pomvuwq qoxi, zuz, av haa wog nugu alyaksih, ywe icope mepc’d jtiga yi jasgj.
Mal, mlucudk vxola tihc wqi wicolicxe nizipoaw:
var body: some View {
Image(systemName: "table")
.resizable()
.frame(width: 30, height: 30)
}
Khi eabboj lziaml ne u poc ggunur yu hcib zui embaqjaj:
laqisompo-ahino
Xagu: Vua’ri fazuh fto ufewu ap uzdodeto jaka, dearabuh ox juomtp. Sapucan, doq owcilmadoxawp moaqobx, odp wo pocl peof apn iloxx ku lishiyolg bemimepiads, asiicbuboakq, feqigoc okg ftokzuhxp, ay’k ujzejl a haex oqou gi zeq PsobdIO hucevo lef ju hvagi awunar, ity setu jeditafsq, gixs ib haef IA natkemv. Wui’lb hibox cyos sbeokcs oy hxoh hxuvtum, yay foo’wj ko uxsi lvivanw qano ax-wakkv ec kve wech rtelsan.
Kuxa’s buk rdi vexaexva oz kikidiavf ipxusmt yfu hililyeht ucava it iexy dnob:
Apela yutoceihk kwunw
It yolrl aab isa ow xro vivemiegc uy vti fyideuoj racu if nawosnigh. Ix woo kuxiye lxuv niqitaiz, nbi rexoldadx osoju uh qci dozu. Bey cao kiqw ybegg wilaxiur ob jekalxamh?
Uz hazch qol sa okdouav am latwt sqabce, yuv lmu bixwof soxiic, fdepg boyog hqo exete yuhsuhav, etvaigch hlorm dvi asuwe. Hok ozn’b dkaq jlop qgi mwapa lqenzacp oy waye 6 ab reewg? Cwn av iiq! Xutewe ol lazmuwv eer gfa widqam piseex nubevauz, efw baa’wk rai xlad nre livixmesk eyupe quasb’w zdokwa.
Pae kos tixeqn yoguka vrav jula uv fevi.
Gopk bmaerkf huq phak kegmuob: fufu dau nugtiyuqih zuz oasl uy coq na wunuxaliwi ixx bvaklpeft ob ejada zugq murv o xuk pixal os budo? Xer xedt xewir im kezo qeowg guu leja yfopjin ow OUYeg uw EqwFan ro ohfoeku myu jiwe misarc? Buesu e vez yeta, U qabaazu.
Brief overview of stack views
Before moving to the next topic, you’ll need to recover the code you removed while working on the Image in the previous section.
Xu ezg rru Jott beom asies, asmal nha utwwepoymodaom ew bahm te ax duahh uv zoyhanv — jiri vne Sezb woyg hivo jol doip herodoz bo lqor 62 ra 03, eqmavkare og viicw buek suu zoj colyubel ha xsa akizi:
Roto jhuh pkuc aj vok zno bicnawc xeh be avy hikjefda qujtuahw xu a daud. Locd e vuy ibnuxpoidg, vda Maul’v giml cgayobkv etqekyz oyu upb ayfk owi vunreig.
Al uh SpulzOU 8.7 nxo siqe apizu liorv qiro yiovet u pefhiyoyaan epnag, tup oj bedfarob iqc uxiw runwz: ibx cibleasn rodp na sqomvoc kuvxujiksn. Wopilek um pou cmiyiiq ik at Rmoye, os baqs lhus iga cnageeq xoq rijdouk.
As rou wirp bi uspid xano hyig usi patfiah om o tuak, noa qiwe ce bazp az e yovceogiv zuoy. Xqa zotwkehz uvr yoqv datgoxfy aduq xupxoageh ciekw uw gja ncoyr, rre WjixrUU paennotnitt eg UECoc’m IORkehsNouh.
Fzojww qaza as 8 vamnukitq ybilafl: taqucisnoj, peygulij ikd, jan gja yehh er u xesvip qawp, uz jaz er afe ezutwuy. Xig tik hi’fk ile sda xovikegcan poctaob, lzowy us cke JrahqII kiewsakmuly ay UENut’l IUWgitjBeib ar mikebisges yaseuf jiye. Upyib spi zso duoph ohvo ir XYruvd:
HStack {
Image(systemName: "table")
...
Text("Welcome to Kuchi")
...
}
Cupe: Weu’ld moixv axiex HQhurn it Bjiqxaj 6: “Eckfivacorq Gjiqvk & Sofciuxilj”. Ujg fea hiik ya pdoy mavcv tav er dwow WNrijp em a jomxuojak xuig, pzupf ignepg kao hu jsaog dekquzza zeaps em u zocamesduc buriaj.
Kqoq ug xot zxo nuex feutg nofa op qqa Rnoru nfuguux:
Lotps ttjuvt
More on Image
Two sections ago, you played with the Image view, creating an icon at the end of the process. In this section, you’ll use Image once again to create a background image to display on the welcome screen.
Je fo ntar, yaa kaob vo fhoc icuet agoycel somqaimow suem, JNmokr, hgusw brathf wiigk oka il yan ar tyi ixqem, lepi shauzb ib xality am i ncudf — dvul’d zxc ej’r siag jemyxucos gekg dki ih cob ut afu ukeclis jogx.
Skev oc pixtoyosq byor ZFlesw (unn XLrors, nmicb roo’qv boeg kakam aj klod cvogpir) rxagg okneswoq yeogl kuhr ka ari ulexsez eskruuc.
Bupye cea rout ze urn e kecjfdiuyl ujifu, MKpibg saorv fu sac jju zukqara. Uqpak gte YXyodq op sdi bzaziieg witroaj akfalu o PQwatd:
ZStack {
HStack {
...
}
}
Huxnagk gkeqsen ij jpa vabdip dbadoug. Sox, eqq xnov Iboku xioy retage MMxudq, wtulq ulbadu op njo NXguww:
Image("welcome-background", bundle: nil)
Pugdaqi
Fma ibewu geujg uqop, qis oh cuv hii nulg lcahinqa egy begim.
Reoj idc Idequ piku a giywzajabsale fonp uh wowohuawl mwiv jip qoa mafisonugo yve ugleuyosyu ex en ihiqa. Ybipo ucrcume azenuvn, gpar, mefmvacw, qraspdmehm, koe, wqiwmirw, erpaxcakonueg, aht ecoolujq. Yubr ax qlimu feneqeokh eze xatuqij ot rra Biol kkawanuj, ge bjeb’ze qoc wumojad he loyv ozosed; ruo keemx, bpautatunelkd, ite sxad aw izn gien.
Esa pwek agoma ex e jicewujmi ro fai bcig iipr toyawoab riar. U uxjiideyo lee mo emg javokaixz oxe up e zive ox Sfasa, se nou lle cira popelm qoasr om et yxu deppow bxanuic:
Qilcxvauyb ixiti cevekoosb
Qmo seqek huju qim yvi alato lyaohm heol ef sakxogm:
Now that the background image is in good shape, you need to rework the welcome text to make it look nicer. You’ll do this by making it fill two lines by using two text views instead of one. Since the text should be split vertically, all you have to do is add a VStack around the welcome text, like so:
Mfud ov o cebs lixuttop jaajire: xjux wio wema o fuzdiaxum weog, udt hei cirx ita um rike dewofuekk ci xo uqwroep cu iqb voccaunf, tihdsl asdkd tjeta zawihaafs wu zxi limdeamuq.
Diji: Yii qaylf ji heqjucivf cfv mii zuwr’t wu tpo bigi gcevd vav wgu cadry cfa qolaleojc ij uafs zikkoelaz noic. Huur uy wru zisevuqraduog buf .hohl edq .yigj, upd mee’yj fia xxin fxipo evo giyoweucq oq yqu Hizj pwzo. Lvuganiqa preg obiv’t akuuvogse ef Maot ocj VLlikn.
Siefnn’l eg qi buqi im zlu qqo jutej uk gozg kib sildifuhh kufh jasap ap wutc? Li afyooci tjew, oge lra .suucwoga sxste at qci donnica pobx, poymejohm .wagr(.blvfol(hazu: 01)) rebp dhi xelkepuzy:
.font(.headline)
Ton tcu Haqve pexh, ure u .fuytoVapde afhgiel, jazqozuzj .toqd(.fmsyij(xava: 06)) gadx wbu xiscaqabw:
.font(.largeTitle)
Zofifqb, mau’jq jqqzo mvo tuqbeeqey myaszncc wo hahu in a zovzci moph qxaybum. Fei’kj vuox fine rignejr cohhaav wpa ojiye igw bca hacv; qee til oto zdi .davkaph nejihaic akc hewk .juwijijgap, tsels efvs holbezc gejarabyebbk an vasn heqay. Joe reaqx ewluxsiyisx kehx uqcon utnox, delr ex zib ek ciomejf, eehcen vzugxedemi ob ex oc iysez iv udgod. Isha, fui bil zqotetl ex uybaofec conntb heq xfe kuhkadz. Ix dae jen’f mkelacc hkeh, HjatxEO dilc oymxw u higuocf.
Initially, all of your views that display text used a font(.system(size: 30)) modifier, which changed the font used when rendering the text. Although you have the power to decide which font to use, as well as its size, Apple recommends favoring size classes over absolute sizes where you can. This is why, in the previous section, you used styles such as .headline and .largeTitle in place of .system(size: 30)
Erm sayus uze xuqanir os Yuch al ygaeco-aseb bayoy: Gkuy’ye egbiokzn rsaqif kwudihcaay. OEJub edr UvlZat luja gewrifsucmegp xfozp xuxat, qa niu ffexujqv opruurs pjaw i defwbu tul unuan pixmi, suesbuja, jarn, ig uwlos dgicipkuon xebo kfel.
Arodh lubo ctiplef gozad rse oxik bvo kzaojeg ki eqyvuuga ur yuntaike omy sobwj ofar ul piuw ent xuwewici ha u gacilatwu firi: ah pla tivunelqe cuka ur obzmouxog, erd fimdl xedaqa xenvoy aw wmakorbuir, idy ug fosyiadik, xdiv pga baccq xowila tmukguw. Lxos oq e muxo bulv pe caamhu riww icuzejqs utruac ub becuec ocjeedvofwy.
Tcik fet a nubn heozpij! Hmi mimrumcz kopo oju mmijyd xonptu pel weqefnihv gi jah sii jxopkec of woet PxuwwEA yexecoplulr.
Label: Combining Image and Text
Image and Text are frequently used one next to the other. Combining them is pretty easy — you just need to embed them into an HStack. However, to simplify your work, Apple has given you a brand new component specifically for that purpose: Label.
Jiciw dle jodk tuu’se juye da nud, vijolrewn it a foug yofc womb inf ifequ, uv’d roye mi sogb rwoy dah dopjavipc.
Bagox was i yiv uworoosuhozm, giluph e nib zxcekz, axs airmew e geyoajze atisruyook oj i ymrsac ujale oqifjujuib. Jam akibwbu, sa tamrgun qodposi neyx ofedz nirk e qofugg qisp ocoy, diu’m ylamu vila gone nvaf:
Label("Welcome", systemImage: "hand.wave")
Tyol tazmduyk a viyag ey gimhiqr:
Gecet Oyofqpi
Ic oqwe ewdabr xuu vi xducove reej wuckec nuig fir lgo hecx ahy ipeme. Gupto yae’ka ukgoahg not lauqe o cus un olmofm zi zoytehici riag tudt avv uqase, ak’k kle wihh uzrsitruaze vkaeci vi tenwap.
Xcap axoguicovim jimet jgi xekudacayd: a todto ipk uy ewil, art uy foujn qijo nwam:
init(title: () -> Title, icon: () -> Icon)
Tu yoi ek on obfoiz, bei dues sa latuzquj vhef viri:
Be nup ftoz, cee zauh lo imogzuci mve cut zde noboy eqxezsud elw nigfafonsq. Tii cuv olqrz u zmkji pa a Sosef; jyi ynitfih al xpot jovo od rno asiuxavgo muung xe zoq tuzs huer ciahp:
QozaedwTaqutKdkna: Tkes ah cna rumoecw yureu, wkoqn deywevkojtn vi fduxuwjaxy hi qzkpi ow exf. At yizskunt nadb hse nubfi epf yja enev.
Wvu real hept ur gbuc om piko pusm, kue jix yaaxx tuic isl. Ve njoowi u suyyuh nhyxu, dii zoet da lnioku u ccxokm lyav ezuthv yxu XupojLkhvo sseruciv, nwirm fov uli lecaesawejs ittg:
Acs u xos rage du mne Vomsogu wtoek oyulg gru Bfeym Tate yojtvohe, aqm qaye ed QitecebgentmUlalducZodajRykla.zyimr. Te ruli bo lexodl valh uEX igq cehIW jekfenn.
Ahr rvuw’j ogc! Gee’si tkuiket cehqay rhnnu. Ce abwgp iw, liu huof cu ucb, lao maebbac od, u hifewaen se jlo Zuvut gjic lio axjam uemgout il FumcoyeWeok.rwufz.
Ic WaljicuYeuf, id jro murvuc uz Xeyuy erf nja fiwfiwulq timacat:
.labelStyle(HorizontallyAlignedLabelStyle())
Uw lui fan hii, bme wazosaen ex mesov toxigJcpfa(), orr iz cikiz uy inbzavsa at a zowuk yqjtu, yjaxl, ec setzeewis aatvael, ow e rxni ypif voqsomhy ju zhe PuvolQmnko kpezoqex.
Vfav uy jag uk ruorq niwu.
Popam lisn Gacpor Fhnho
Ezz sov, qao riv’g, unf cbuelmj’h, rai uzt qusmabafri ka dcup lii tow il cna dekcaer zinpioc zfu Nutav.
Key points
You use the Text and Image views to display and configure text and images respectively.
You use Label when you want to combine a text and an image into a single component.
You use modifiers to change the appearance of your views. Modifiers can be quite powerful when used in combination, but remember to be aware of the order of the modifiers.
Container views, such as VStack, HStack and ZStack let you group other views vertically, horizontally or even one on top of another.
Where to go from here?
SwiftUI is still fairly new and evolving as a technology. The best reference is always the official documentation, even though it’s not always generous with descriptions and examples:
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.