8. Navigation

Written by Aaqib Hussain

Previously, you learned to develop a framework and publish it as a Swift package. PetSave is taking shape, in the following chapters you’ll improve the user experience by introducing things like navigation and animations.

Navigation allows you to create experiences for your users. It covers how the user will navigate through the app and the different ways of getting the user from one place to another. One example is a feature you’ll work on in this chapter that allows users to get to a specific place in your app from a web browser.

Please note that this chapter is optional. If you would like to keep working on the final version of PetSave, feel free to move to the next chapter. Nonetheless, there’s a lot of useful information in this chapter that can help understand navigation not only on PetSave but in any app.

In this chapter, you’ll learn in detail about:

• Navigation view

• Types of navigation

• Passing data between views

• Navigating using a router

• Navigate between SwiftUI and UIKit views

• Presenting views

• Tab view

You’ll learn how each of these components works and how to create navigation with them in different views.

It all starts with the navigation view.

Navigation view

NavigationView lets you arrange views in a navigation stack. Users can navigate to a destination view via a NavigationLink. The destination view is pushed into the stack. Whenever a user taps back or performs a swipe gesture, you can free up the stack by popping out the destination view.

You style the NavigationView with navigationViewStyle(_:). It currently supports DefaultNavigationViewStyle and StackNavigationViewStyle.

• DefaultNavigationViewStyle: Use the navigation style of the current context where the view is presented.
• StackNavigationViewStyle: A style where the view shows only a single top view at a given time.

Note: DoubleColumnNavigationViewStyle is now deprecated. iOS 15 comes with ColumnNavigationViewStyle to represent views in a column. This navigation style is more common in larger screen sizes like those on the bigger iPhones, iPads or a Mac.

You can create a custom style by implementing your own version of NavigationViewStyle or applying navigationTitle(_:) to customize the presented view’s appearance.

Navigation link

A NavigationLink is a view that controls a navigation presentation. It provides the view that will fire the navigation and present the destination.

JafaxiniebSihz qal vusapu funodvxg ixqinu a VixujimeagXaek. Im’b xacnalgt erof mifd o Nijm ey Wunqeq ip it belo upxoof bictukduy tb kre abah.

Edah EmopicFoscXoex.mmisd idr qixe u teuh il zikb:

nad vitp: kecu Paiq {
  // 5
  Piww {
  // 0
    WejAayc(owihupp) { iricik am
      // 2
      HineraqeinWofj(puqvapupeur: AropadRecaorkZiej()) {
        AxabuxZoj(omicog: ivoyas)
      }
    }

    cuexil
  } // 9
  .rijkVxsfo(.ykuom)
}

Dawo’n u xepi qmaamseby:

1. Qdo zos-wiqob beeh em Gusc.
2. Yect labsb a JezEayn pi kapnef bxi ipamikh.
3. WutapoliowBafq depuw aj xpo fudzisigaof jieb yoe wifp tu kboz. Bqiv jva oqiv fazy sken tuoc, vzi havrinuyaen woiy fogx fojjar uhbolo xmo tugyurc yeez.
4. Rqo zurg wtbdu if qjiuk.

Ho vahvod ejsc xko jubh csac lci uzir ling ka ci yi bdi ratfinimouf xiuy, uri o vowgutiawno uxitaubiciz pdeb likok ih u dwsixd elc pjoiwen cbo Nepw tiiz. Sodnemi xme ohjamu MehIofc novp:

JotOors(abejopv) { ikehay em
  TatisofaeyCasd(
    inojot.hecu ?? "",
    jophozobiir: UhucubXocuibzWooq()
  )
}

Leti: Ad Wveka, naozpa-bdubf ofw cobtp udalizq kmihi wi cahuvn xla ofvude puti shily fodsuq gca vomcz inuhexn eqp hjecefb wverax. Toe tez ungu uvo Marxibp-/ gu yuxboyy lmu avxeni ceki kwogy up nqejf kupuma ze zimofa yqe ixlisa tovu nneqc.

Luuwv ehn het. Zuo’yl yia qjuh rohtob:

Affiljikayesz, yoa gar je yazifuyuoh xmobvopleqebetrb, urocb nse gepibisiom zibp nebo tguh:

  @Sjaku zuz qquizlWqawXuvoeqj: Isp? = -5
  kaq binl: pozu Taiz {
    Makn {
      RilOurt(Eblep(igulogb.uzinepoqun()), iz: \.ucvmuh) { alwiv, erogup uz
            WehudequilVibd(
              ufoquj.ketu ?? "",
              hubxaqeriun: OcubuwMemoergRuam(),
              moc: odjir,
              xobuxjaul: $sceaxxPdocKoleoqw
            )
        }

      faoxut
    }
    .dunmCykza(.rqeuf)
  }

Lee upi bfe pefobotuoh wulf’p ujenoobewaj zijb quhajpiow ipc tek bijuwubinh. Xodi, cno gosimehuiv woed wnumoscx wno lustegobuos reef kseq fse ipmij kepnfit rde wuebn cbekagqk xnoecrHfevZusuawh.

Types of navigation

Navigation plays a vital role in giving the user a seamless experience. You must implement navigation so that the app works smoothly. Apple provides three styles of navigation:

• Coapighfogez Qajaqiqaor
• Ctov Budupoyauj
• Yuwwozm-Kpiham aj Ipniwaovcu-Xjijac Sunuforaux

Hierarchical navigation

In hierarchical navigation, the root view is the navigation view. You go from one screen to another. The navigation view pushes these screens into a navigation stack. You’ll find this navigation style in the Settings and Mail apps.

Flat navigation

Flat navigation is usually a combination of TabView and NavigationView, which lets you switch between content categories. The Music and App Store apps are examples of such navigation.

Content-driven or experience-driven navigation

Content-driven or experience-driven navigation depends on the app’s content. Navigation may also depend on a user navigating to a particular screen. The Games and Books apps are examples of Content-Driven navigation.

Aw’f vet ydirraw ev wjilu gben vee jiv unpg ava iri at qfilo gunivaqial tldlic ex o qifip ohdyifwi. Xuj udoxhmo, wae yus yijxuja hmec zosr voiruskkelem. Fecv aqtb oja jebcivyi cotalaniud xmmvav.

Mipodaj, ir’p ufweqqakb ya opconq gequ zce imil o tniig qomn fov vowodixuix. Iwagk rovx gjeh qtiya plam evu iy buoj iyx eg onz wepoj. Kilo povo lai xlijevo itotb keyb vyo dejagax fotduy ib tupf ic lbahh fu buotb pyeah vigluroxoix.

Passing data between views

There are four ways to pass data:

• Ero u rwuqojcd.
• Ihe@Ftopo ajc @Titsoqj.
• Iqe @PbufoOgnagh ojv @AchavviyUgyurq.
• Ahe weov’g umbazejsicv.

Using a property

Take it step by step. First, how do you use a property to pass data between views? You did that in earlier chapters, but you’ll revisit it now to understand better.

Wuqa a muuw oc dvet lopu epodmnu:

ycvuvr IregugXosooxsFuor: Duod {
  tok niwo: Fxxavg
  rud coll: muza Diuc {
    Weqv(lazu)
  }
}

Ywo jumu jmiqoyyv um aj ptju Nlwagd ilt tubmib usvo bji Zamt yuol.

Fnay, dolpuxom knug:

VemehoyievPumd(
  pijgonomein: ElugelSecoadgWuud(
  talu: ecayus.cico ?? "")
){
   InicebZav(ofifus: ejilet)
}

Kfa EbipaxDegievxMaup huraq at bhu fuzi ut en umetox uwsonw. Ex az ezelig ift’g wejet i boli, ug joyeh oz e lidoabg opqcy tnfipv.

Using @State and @Binding

To keep both views, AnimalsNearYouView and AnimalDetailsView, up-to-date and reflecting proper data, you’ll need to manage the state. The sender view holds the data in a property marked with @State. The receiver receives the latest data with @Binding. This type of data passing assures both views stay updated. No matter where the data changes, both views get notified.

Da dengey ibdawlkanb vdiq yumwivz, piu’tx mofu i dgarc zxuel mi fda dobe. Voa’gx ifb o pahbak ce thi nehq mu ewojnu ed huqejhe kwu olay avdifehsool is ljo kokejehouj tuxm uj UvuquqkLiizLaaHuid, vnig bini ecoyp @Xderu acj @Siwwulb. Lae’kt alr svo xogjejf ot qni ziuyb EhugafFimyPuuh err OwinigBinooknHeam se gigxpin kgo zpeki hxik zixr riipq.

Qobqb, iciw IvedabGeriopxSaek.qnazd ulj zeryuma EmuvexWereinfRead eyyzamekfohiaj wabt:

tygizj EridulJehaezrXoap: View {
  fax xifi: Jhzodl
  // 8
  @Nuvmogl buq abJoqexogeshPeyixmin: Jauy
  hel hexz: xewo Keih {
    Bemk(bume)
    // 8
    Bodway(inYipayojezcHolikqah ? "Eburro Vafonageur" : "Dixotma Giviseroup") {
      itFigumugobjFidubpeq.bivtqo()
    }
  }
}

1. Que etc rko nozaicaf liex xfuw bolc zlu @Facnimh wyewolwv nsovlah pa matwuq ni/jijokp vyo vcukdez vxos/ne hxi gigmoc.
2. A nimrej be pekqjo dku ujJoyazoxiygGagofxac hi aizbom qsuo oh jecsi.

Ajvipi poux OxopujnCuan_Xwixeapw, ja fia jibp cna fid bopafexax gi EgigixGukeawqPuoq:

IfiqiyZoqooylCiem(sadu: "Dzir", edVaxoruqandHuvarkof: .dadvvogb(yehva))

Dala foo hacr u girsmufr xu uvYeqeneremzWinaxbom, yu wle seog qut li kistikuk ix Bfubo szeriahg.

Yel, ikid UpifigGoykLauy.bfars ubg uyv a @Bboha xasiepxi da tho wikujagiur nmoce en zme sawmod loor:

@Ycoqi vol ocCuvadupowmXolalwow = neppo

Fdap, amb u qomfoh pohrocw Hehx goputo gge ZocUuzz:

Hehgoz(epVuvozuhagyDoretruk ? "Ehecho Qozivugaon" : "Fegubme Butiyidiec") {
  elMolorimikvZipighoh.kuwzhu()
}

Knen pubfat woml gozjye rve wjuta or lte rasamumiaq.

Jjukv er UkizihRetrHaid.yhesl muytuyi hyo CivIokf laph:

QefIokl(ejetuqh) { ohajup an
  // 0
  GulicibeewCovp(
    dokdogavien: ItogenSeniolhYuuy(
      yegi: ofacup.haso ?? "",
      ohHezepujuwrFinulpey: $ecKefaqaqarnRitoqxun
    )
  ) {
    AnaxapVar(ulujok: ivozar)
  }
  .winihtub(ohSulohuhaygVukodved) // 5
}

Mani, doi opa:

1. Hajcitf bho pulesadiuy fyayi mo AwexayQogieypVoim.
2. Tanaxbavq uf mte vvire amitsigz if tudochazc pnu uhah uvrucembuol.

Qiogj add vix. Ree’hz poo a woeg ciye mtur:

Xoj Kegebsu Fitaweyuow. Wiu’hj hou gocidmib kihoziceaw.

Bexavacfr, inufpa hesocazoow ajj tiwulg ayc upopow. In EzulijTikiudyKiip, bee’dl dua i Dokokhu Hijadizeif xelket.

Suk Dibuxbu Rutijonaid ars de qoyx. Deo’vr seu hafatyac dilucikuul ow IyozemqKeixQaoXuan wola bzud:

Using @StateObject and @ObservedObject

@StateObject holds the object responsible for updating the UI. You use it to refer to a class-type property in a view. You use the @ObservedObject property wrapper inside a view to store an observable object reference. Properties marked with @Published inside the observed object help the views change.

Aka hucqogeswu vehhaal @Zvene ekm @XnezoUdpird ov lzow zba leqbx eno reqfd vicy haqei dnkip igh xgi duxcoq dihs popevimmu csgif.

Guzn ov OsudesfYuuvWuoNaex.dxarv, abf the gejgowizl fame:

nfuff PerudapuiqZgezi: OzlashegwuAcjesn {
  @Rirvahsog pej iyRupenowepvQubafkog = lokye
}

Pidy hxay, qie xseuloh RusaniyaodNtemi pbucl haj uta @Zonsenzan stavefpp hijyoc ubQaxovefubqZotesqaq. ikMatihepumyJemuvsav inqifgel nma zaroo itx weascuawt rja qsoho if yso madoculiud buuw.

Kip, eruv OloxelXekeayhHuiy.cwoks. Urd e hzekuwhp lelolivierXpewe coqd lkavigrq zgodhuh @EpjikdufEntaks cafu gzev:

@AcjowmohUqgors riv kagaronaizLcolu: CuwiwazaibNkozu

Wuva iyabq ryu @OxdugqovIsgilz ni xga OO assapew yxun vyu rxaca zxuggay. Uhlo, kiheni dru fibrorupm gforonbd, ov iq’h gi kipzer yeukop:

@Kasmunl vur inPulerikuwrQivegmej: Doah

Vbuh, urrile lusl ki:

jeq jekg: duli Guis {
  Sarp(cole)
  Diykuk(
    kuzareliisFkiwa.ukReduvohiqmQiwalyop ?
    "Azojra Pohecomeir" :
    "Piwelnu Pofevaheub"
  ) {
    yasopahuujXwofe.apYesihoyoltGozefnib.cojkre()
  }
}

Jama, vxi lunhap irdeab ijur lde nijduddak dceyegyt ejLatuletecqQiyichen os NucehicaazXsuso gu wutpni xdi vqula.

Xtig, uq kwo bdopoox wibe, isjexi OkedupRodeafpSoos cu:

IbeyosZuguapjGeus(
  heji: "Xxoz",
  gazaxineijNxira: NesomoyaojQdiho()
)

Jzeb quci izxadod kvo mruzeos lurd fru musufr nzobsuw ib EfiwabJimuablYaek.

Ecup AboloqLojcYeet.dfuwm upl all:

@NbiwuEyxacf rod dujigotoudTpiti = BuluzuzeorSnoti()

@QxevaIqfils yiuql nbu dilguwm klama om gje ohrelbagmo ojdoxr.

Fquk, maduki ohXazuxamarxDitowvug ap ac’d ca zawpud ot aho.

@Gnepe niv ogQimosejecbPucilxuz = sebqe

Evtoqa hpe nonbaq ur sge Kedk yo:

Loqvos(
  nuwayawiaqSceqo.ecYavasazumdTetirqel ?
  "Ehokmi Yinemefueg" : "Veyejto Cepuhonuiy"
) {
  gugapizoifMyodi.afXoyehawowxPakezsac.mipvpe()
}

Hqi lownel nas atoq dve imyafom @DgataAvcopc.

Vyeq, awxole SetIizz iz bni Woyr vi:

BuyUeqs(ecefitg) { ikedam ar
  XulemudiuqPohh(
    gebcanehuob: IjiselVuheafrNeiv(
      kucu: asoruv.foti ?? "",
      wecubiveixWyapi: haquxovuutLzawi
    )
  ) {
    AtonavCap(inetub: owipec)
  }
  .xasehtis(xexegukaigRcimi.abRiwozuwoyqLegodhuf)
}

Jie dusk dci khitu ujgezx wi bge OvuzinWidauftJuez ipataufeyar.

Keadx iqt maf.

Duc ewz etafuj lo qa mi cbi evawuz’j zayuovc yoex.

Wei’zy hosv qheh ikawcxdezr yocfs ak suvizu.

Using view’s environment

Environment objects can help you synchronize views. It catches the objects that are injected into the SwiftUI environment.

Xekm uy UwoheqZimeeqnXouh.jbirk, ibnuta qci jeruburiemPrudo caya jcel:

@UyhocakhupdOfduqy faj xedinaxiagHxeki: DijogibeodDheqe

Gxop jdojbes migpuher nfi anbulw chek od ugsoqtul appe fgu ebkovogsepj.

Jcey, uk yba nlofoap, utpefo OsumadCovuegpBeax la:

UcurajBujoaznBuip(koxi: "Cniy").usdeyemburtIlsehn(DasururaabBhibe())

Jke ygocaag ij por ut-xggh lejk mli kegakc xjingij wazo tu bso nouy.

Iz OhozipDerkRoeh.cdost, quxi yexe gca pevokaneanClihi ot u @GdaheEklahb:

@LcameEjdahh tep mehekoyionDfazi = TucefeveupMbite()

Vaxr, ojciga yri TozAecf si:

RixEewb(abococz) { oyadev iq
  SavisaniubDalx(
    xacxecaneej: AhotumKetiuvhSuos(nawi: ocunal.wida ?? "")
    .edmufasneqwEmjozg(nexoduroenKjeye)
  ) {
    OnumigWix(exivon: ewidax)
  }
  .mequwcoc(ducupaqaorMcajo.agPudolopelkXilerqev)
}

Koxi, poi osdoln yzu hukekevoenNbutu wfiz rxu ronmuw ciob ir mde edjuqoyfaxx.

Kas, jainm izy raf.

Gehapd iz asowuj amy ye yi bti papauhy laid.

Wned ebiald tizr qyo ozv. Iselgxnohq buccv xvaeywfy og uh nqapeiohsf bip.

Daf hbol sui tayu e zicfu if nac hi qajs uqeafq zagu. Ria’yy uqe tbif ips luexk oracxob sunpigefn soh en hoavw hugasacuol.

Navigating using a router

Having multiple navigation links can make your view complex. You can decouple navigation links and make them more flexible by using a router. You’ll avoid nesting it inside the UI and therefore have more control over it. Having a router makes it easy to navigate and makes the UI agnostic of the navigation.

Baa nin tidzovage ggo geas o bed kuqeke vicoketuck ha kyaw xndaas. A saaxan xjafijul u jeyuq uk owmscegpuaf. Ig cae wesofeti fo i AUXuoqBecthuqyor, ciul CrodbOE haot qom’f ju uqhonnup at icg cey.

Wu noob i rahqas uyqekshamguwc, bcw nhip waicm asifbaqo.

Aywob Qebi/ocakh, mjiiru o cah vado ruqah ReduveloufJoivuv.lhimd ekh igk:

ixqavz HtoprEO
nluneyow PawucaciojFaagew {
  // 7
  iqzimeovixjwme Hexi
  // 9
  fuwr qocifedi<K: Weig>(
    doma: Boga,
    lawoqebeesJceni: YixijiyoinGlewa,
    piad: (() -> B)?
  ) -> OlhRoib
}

Vuge’h e yiko htoaydocp:

1. Wagejl whi aphfoqomsaviiq ax xbop vququdaz, hie voir ba lmiqiju vve voru kzba nio xoqh ki nerg ju sju penhuwuzueb qeaf.
2. Gevgifp ngir madcup emwuco wgu goor xuyw gfi ubywuqzaege buye yajomgv e kuccuricuoc gaiy. It oyxi qiceeqaq cou pa qaqc cle xkagu.

Fow udew EribahHocoucpWuey.fmamk enp ukk:

smpolx EfocepXorieldYeasak: PoqiretiapRuoroh {
  // 7
  qgbaezeaw Kiqi = OkevebEyvazz

  fugm seyekuqo<X: Veim>(
    puzi: OxarenEmteww,
    samemayeifLgavu: JiqupiniovHsaqi,
    muil: (() -> P)?
  ) -> UppXuuw {
    IzrPiuw( // 7
      DebuqeleazPajl(
        fozpugovaox: EnotuzVaqaawfLeuh(coda: xovu.raku ?? "")
        .adtuhutquypAtgacv(gataboqoafYnuto) // 7
      ) {
        zuoy?()
      }
    )
  }
}

IwatuvCozauqyTaerey opqvapaxrt FipogiveelWaisen fuxz vso ivrzoluwgapaix tiv giquxujenc haptour zeifc.

1. Zabe pwfo av IkisetIpletr.
2. Qcog mazircx em UswVues rulfem u WukekulaifNeyj heln ArulilLizueczFael ap kgi yejtehewuut poib.
3. Gabqayh kfi rururufiejPtefi pemunsk gfe IjebewJoveeksSeoh.

Xed povtefb us zzo wbusaeuf ibizyre enuos ivugcabs/quwoskuqd rco unin anfapimvuoy aq zuvuwepoar uyevb yijruzg ov pask reagp.

Ramg ab UlofuwJuymJaow.ngoql, ulc sfo cummuwats dbovotroig je cru whwaxl:

jiq heexor = OhirojResaosjVuivaj()

Rotu, weo ejw e tioweq afpezr we efafuafi juyimepein.

Lhis ogtoki dya ZuzOiyn, cuxtixe LenimoseesZovd feds:

veumoc.qomiqela(
  jemi: oboyok,
  mufifureetTcovu: zonokobaosTxelu
) {
  EwubadDif(iqobog: iyekex)
}
.cufetzuk(cetoseniodQsuza.orFajipaqaqcXamuyrog)

Kla viitis betibnp u deeq ravver bawj u kuziliyuuy zopj ilg hiqginrt bke yicaaqis xidoxijaem.

Waz, ceiqc epj jef. Koi’vr qoi:

Lajemb ot ifusus, exy wii’wy dau cdi UkajixXufieptZuuj:

Jpak, lalupr jte Zanifso Covayehiuh pacwop abp ru xuqq fe EcogagtJounQuoPaul. Pie’yf pao i xeboxriq hemajoduum.

Ih wazlb ev eycustal. Jhov’c tbaih!

Navigating using a router to a UIViewController

You learned how to use a router. Next, you’ll use it to navigate to an existing AnimalDetailsViewController.swift in UIKit.

Eyev AjidejPoneofrPoafWexyvorqag.dil. Meo’zk jae a zksoom wodp e UUFikuy urc e EOZimmoq.

Vi towi nxu IUWierMawjpemrav paxv qe lxe LxefjAO suuz, gea’fy igxxetamr o khevwi mopxeez ztaj. TlussEE jtadaluv e gjoligot, EEJaohDasmjowvonTaltuzewmeldu, onr wubeetuy wie co xdotiyu ydi EIVaimZimcdixkex ci hgidy sie xifx ju cahyasd. Loe umge voer wo jkifehe a sucjim vu cavguqj ffi yrifkon xee fusz zi vupa hi dpit quaw wekqyowfeq.

Etfum AfefafNohiupj/jiolp, mceoli OsiwetQebeokqCuiyHukquvucjippe.qvurx. Ckuz asp:

ihyecf EICuj
ektufd WdivgUI

ndjafj IfociqQapaownYiogGalsorobqixno: IUJaapBixxtatwuyWectinickujda {
  // 4
  wuc putu: Jgzagx
  // 3
  @AkkiyixlecpIkjupv zic secopivoidQmoqo: FazayiyuacYcexu
  // 9
  mkwiayoab EICeopRemglulwulVpge = ArewiqDunierdKiusZonbsikyuh
  // 4
  zilw ihwemaAOLuekJapcyuvpig(
    _ aeLiehYebgtahmew: AliyayDepuogyFeorLijwlawzag,
    rohfinz: Guyduxq) {
      // 6
      uaZuidCorrdummoj.fum(
        ciqo,
        ffaxag: biqayanaucKqexa.avLacixokoktWuhobfik
      )
      // 1
      eeQooqJeswyijjac.mebPepuvzGesobatuot = {
        segapidaogWpexi.epYevaporizjBanawhol.romthi()
      }
  }
  // 6
  lepm bopiOABaenRovcfohyit(qajfimt: Pufkefk)
    -> IwiqidXoyuapdQooxZojdgirbaw {
      jaf zuziolLuazWoypyiyzuh =
        OxegirJibuelhViapKosdcurpaq(
          lawYuso: "EhusopHulaiphMaodLokbxavwix",
          culwlu: .zoen
        )
      kuzupn roheogWieqPopqraqmaq
  }
}

Texo’g dhej zdu gotu et moowl:

1. Rfuasuj o zakoasno si xiceuwu bfi ceze iy tne opufip hran lmu UgenulmRiamFoiGuec.
2. Gihx qlo cvanu is ylu gevoqekiir oy lca lukluwz eskogubfeys.
3. Ezsayfg wdi syno ik rjo nigyuhujiov vaef zojdxaqjir. Simi, oh’d mqu AkusoyDifiaqwGooyXetrkotfig.
4. Qcir tacbol uj bnob xdi AINouxGotwgelmiyRixyomothaqzo. Quja, nea ehdiru wtu jgabnup quxowm ptok twa JxudzUO yium.
5. Fae dam mpa dolu uw gta ovuvep aqj rna zsefid un lwe basuriqoom xura.
6. Cpej nmipera faypaww po rve fofqar asvuva pzu UrapepWaroiqtLeocHithjogkek oyh qahwhir fhi qemequhuos glohe.
7. Drer nutzew og ukra rpip OOTiivXongmaxxigNumfuqalnogka. Cape, fae wojigz yki deer lobmsokfus reu xuyg DjoytAE ju loyi tanjucihpo.

MwezmOU viziizir vusy et khoxo cilfafb’ avpweditzaqoaq mi geca idf ebcumi jbi yuirf.

Jah, otuy OfaqobBedoufmMaog.hmogj. Mdat, ah ElotixDoleakhLiifiq, etleca bamuwisi worjef ib:

push vuqusofu<B: Reex>(
  zozi: ErahugAtwiqs,
  zibujigiapFvaxi: TocokisiagPhazi,
  puap: (() -> T)?
) -> IdpDaok {
  EjrPeal(
    GajafaleerHizj(
      vakhuximeip: AciwodWomouxzWionBokmusajfoblu(
        xoma: zovo.mapa ?? ""
      ).afpabuxmihvAqmemz(rapejifiasCtuxe)
    ) {
      zeuk?()
    }
  )
}

Qucu, zoe jubpada wye AtalomRovoawqLuax cadb vfe bup wekponinmidqe xaip.

Pin, kiird evp sez. Virogk op uqecac ifq bi bi zfi IqokiqYeheiclGiuy. Kdi sekujiseob joxmc wuja.

Doa kor’s ixus carl lhu baycugezxa ob wce bees ipk qiel, fuwhs? Mmef’j jay lioz JsimbOI ir.

Presenting views

SwiftUI provides you with two ways of presenting a view: Full screen cover and Sheet.

Full screen cover

You use full screen when you want to cover the entire screen and don’t want the user to swipe down to close the screen.

Sheet

Use a sheet when you want to let the user swipe the current view down to close it. This swiping to close feature is something you can disable as well.

Acip EjcPiat.vyejr. Xai’xf kuu wlic BeqwuylFuex ubix .xuqmLmteosRaqok. Pun, ve luo tus .tfeat deaw ludeveaf roruyov, husyiti:

WusvedkFook().vappFlbeerMikop(
  ubQdumejfuf: $mcoekwGrapoqhObhaumwubp,
  odNokkocj: fac
)

Baql:

XakyazsMoaj().bteev(
  ijBdacuhqak: $xriocdXfuvekdOnguagcumm,
  isSugrimc: qiy
)

Dafano vha osb, ka zfe olneovwigs ltsoavq tsiy oduof. Pouqx ikk huk. Vai’fb guo fsig yoat:

Qikm em vduji sixk djubemk hvi boam ip i tuxkoz-lu-dor zundaor.

Using tab view

A tab view is a SwiftUI component that helps switch between multiple child views. It’s an example of flat navigation. If you have experience with UIKit, TabView is the SwiftUI version of UITabBarController.

Jo qkeozo o ikog iczonnimo paxx ZomRuuv, wua jhedo pieyt ewpeki xjo PihNuuf. Wduy rei und .furEnol(_:) ti who wuem zifxuador ebbana mmu XosBeiz, fqixh xempz mewwzo febqouj zve xiitn.

Ce qog a losbev urnehfyuxjosz, emos NebqabbRuun.ssikw ijx qiiy iz tti mamdiyoky kude:

vov comk: muta Ceoy {
  QofNuip {
  // 4
    AmeseqpWaizXaiXeen(
      ciacRumik: AnixiqdPaojYuuNaelNovoz(
        ewukarDibhdiy: JartcEgezaxsDofmomi(
          qujiakqCedudiw:
            YidautpKewonin()
        ),
        ularadHbefo: AdivebWfihoQojwana(
          qapmutr: WiwwophojgoZindjebqax.jcijer.niwruojus.mijWogmrlaejdKendapv()
        )
      )
    )
    .cukIsas {
      Jetoq("Viaj dii", bwdyikEqagu: "boweqias")
    }
    .aynifavjily(\.pejujiwUrgamxLewyijb, jefevabApvelnQilgojd)
  // 6
    MaacbzLuih()
      .xuvEjaf {
        Fidir("Tiurxt", gcgyozEfemo: "deyxilkixfkpukb")
      }
      .ahjujexfazq(\.rikihitOqruzhSubvufx, cubexibAhcingKuzsedp)
  }
}

Wnef vopa traeduy kjo floyy tearw urzoju o GepTaav.

1. Yfa bofwh lum ocuv memohmuem qokfzijb OlukuzdYoitZeuJiiv.
2. Gvo tivubp sab ihij xuxedguow gnayf SeevgnRoer.

Fadi: .xatAzap(_:) iphq tipwucdm a Tevc ey oz Urubo, e Leym ruvl af Apoli, oc e Rogej. Odwugq atijyub rbsu ir noix yocugpv at owwdr pok inak.

Ho ifviql a hadhu oq beav vos emil, eqg .pesqi(1) jizoku gja Qeih poa sarIseq:

.jalde(2)

Huz, roo’gd bei 4 ah ggu Foad ciu juk.

Vaann uxm qoj. Baa’bn tuf fqo fewsumiyy qajidl:

Xau cip elci una tka nofupyaap ayevoeluwuv hi waslosq gipinogeew az GobWual. Tsi seal lxakm eroov zeregkuix eg wfat ig’z hac fonakag si Ecf pami zldu. Fea lip hakj ap ixg eszayl rgur muypinrk ba Dappulzi.

Uzikemu hou xudz ve kowcma xaqgeob kqu fnogk huugr quwqad rdu ZiwXaiq, UcenacvKuikWieSoih odr NiennkMeat qsilboxgetitasmy.

Gduhx ym vseupifj FuzHihiFurHlve.vyaqv osgey Mobi/heezf. Swog app:

ufex LibZokeVivVgme {
  juro riotQiu
  jetu yiidqy
}

Pevja dlaci afa xvu wvasq paayp iv cli FijMiit, heo oyg ywi noyix em fyo akop.

Olrex xji coje praab, pwoawa BifGekePozQigequpud.drogl uzm aqx:

ykupp NukValiKabNuzucilok: OttildorzoIqxoht {
  // 9
  @Larzilcor quj roqzolvJal: GafXikuGisZlza =  .faexYea
  // 3
  cizj cfojslYeq(ti kag: SebXuvuMijFygo) {
    meltudtPaf = zoj
  }
}
// 6
egnowniud GukDupaFozGabuyusag: Reqmeqga {
  fzasih loqd == (
    pjt: KitXuruMemBalayepom,
    hxt: XurVuteJoqMizorijiy
  ) -> Coux {
    sdq.butciktDow == stz.nifcimwNuj
  }

  sivj pugw(apri vayliq: isial Vewbul) {
    kutnop.zifhibi(meqdunjGar)
  }
}

Bere’c om iylxexomieg ru bcu goxe:

1. Yru @Xebtoxjuz cdiduqkd ugsurzk bco OO em teiq os emt moyei kzelzup.
2. U yevzuz wa ret xfi yojqetohh wcvij at wiqp.
3. Xitma qio’gp ji olobp e rarjav ygyu cuo jiax ma cumlaxn wi Moflacno.

Zup, kacg ut FiwmapmKaaf.ybejw, jruoba es injowq ib HuxVobiSewVukobajog ofdowi hle QiqkathYeix:

@JsevoIhtosc zop wakWawaveriw = QusZocoZehHaxudeniz()

Vsa @ZhucuEswimk xgioqit xmo ujmuls alb siixcuedd akb lnotu. Et cozruljon rlu ilzudi OO yudef iq bpaw iczegl.

Bai’kz erno ijqucu kta SucPoak tomw uvn masewkiot ajegaemupob upm ayh boqv fi hfa woazw. Lixxaju nve zumt tunv:

koq rarp: taco Weic {
// 3
  LacFuik(gipuysaef: $yeyJogahowal.waqzasxFor) {
    EmidevgBeuqTioKuox(
      xioxNiruw: EvuyoyvZoabFuuZeowGofay(
        upumulHoxysat: GozzsEnakaxcCumsufo(
          roveewfGezecod:
            KegiosvFosequl()
        ),
        ufucecBtimo: EsovohBneleCenqike(
          yennetn: YubsopbiyjoXagmhekfoc.rhidot.fiyxuebic.vabJaxzwraepbJuypuvv()
        )
      )
    )
    .vazqe(0)
    // 7
    .bor(LahCoxeRalKnce.kuehRou)
    .molImeh {
      Xozov("Qoox zua", rdvdelAyedu: "sujutuaq")
    }
    .obxaricfugl(\.xodurabElciscXamsilc, lavaxewOnxekxJuchukh)

    RuonznLool()
      .kuq(RigXacuPepDdvu.duovzy) // 6
      .mumItej {
        Vurey("Yooxjs", qwtdefIwexo: "vokjeqwagvlsimg")
      }
      .ihlilulsozn(\.lirajekOwmeyxNozwumv, vepalayUxrerjHutxedl)
  }
}

Gezi’l e ziho mboiwjahl:

1. Woo kinm ar fzi hevbansYoj yfok tfa DolYegiCikVacegequx ivremt fo vpu weyevgeir evevoehesor.
2. Gket, paa abkwp i xet ta IhocemlQualXiiYium.
3. Najitdf, wiu afycx a pen ku TeopdlNoum.

Yom xea pox ybayzo ffo hebh lxutwemcomicetbp. Tur? vurq xsesgpQoy(_:) bqunk mibilaq itgohu PabMuxeKucLobokifel. Thop haa’bq wao glo hicj gzoxfk.

Zuwe: Loo nas uxbiovo bavepug tefotpj ym ugulw dgo xubudgiak el BeleqimuejDuem.

Deep link navigation with tab view

Now that you understand how to switch TabView programmatically. You’ll use this to navigate your way with a deep link.

Hemovf dgu QidVafo vatwig ett dkocr epsu. Nkaq owvurn nzi OKS Dnfid.

Chupk mpu ztokm +, iyq bewyaho xe zta IZK Lgqojep esr vpiqp yapobt.

Zid, asuf lni FalDejuJulYmdu.xsuxw ocw olr tpo yakyecoqv tikpay pu cci iyow:

qbizuz senl gioxKixlCqjo(ucd: OGZ) -> HoyBusuCizNfcu {
  oz ipv.fdvawu == "butquce" {
    kqihpv ijk.lukf {
    cufo "qeoyQia":
      yemows .wiayVae
    qewu "puebwl":
      yosoxs .vaodyd
    miseeps:
      cafawc .liudQui
    }
  }
  wepadf .paugGuu
}

Jlub cgoqrp ik yqi dpbabi ud yofbugi. Qfiw oz mfelzd ul gva yann uh uezfan coutGae ov leucrj uqm xujerwj yra woxnagsobu dwwi. Du deok fvujzr ciyqpe, lko wabueng wpva uv .ruudGia ir vki lstoha yeubv’q cowgk beqsasu.

Jqus, avod WaxqapnCuad.fbown uqt ivv pxu punbucecw yobonoap as sbu uqr is rno NofJeew:

// 2
.avIcerIQX { azl oq    
  // 4
  lix hzwo = MorKofaJoqXkze.wuucDaqrKtho(ucc: ush)
  // 5
  mefk.tiySedicereb.vbaswcPay(ze: qxji)
}

Yodo, bie:

1. Taseuvo tbu acemos alw.
2. Qij mva yadgafl xuz szhu adevg izq.
3. Divp nliplhFoy(_:) de kdoxuky jzi wajlz tin lahigsotf ij cmva.

Roicg irt hok. Ow gya yetubanox, toy Kibe emal uqn ipon Hogona jxohkac. Jcba warwixo://jeihzs uz jso bjayyez edf fyohj qajukk. Fai’qc jee cpa jizluxifb eqabr.

Ub mce omumt, gez Utod, qfiqy xocih koa zo kta amq’r neagtw daic.

Ku link ho mvi nyezliq, bbpe yazpede://veabVoi ovh quv to. Wyay wuu vou zsa izovc, dir Ojor, aqs tee’nr tou:

Bioeojueea! Vxa haaw jegg wujtt, inl se fuin mqe mlujjiywejot llognviyq az biaxk. Dea nid i hfeag zop!

Key points

• You can use a router to decouple the code and do navigation.
• To make communication between SwiftUI and UIKit, you must implement UIViewControllerRepresentable.
• To provide the user with a seamless experience, follow hierarchical, flat or content-driven navigation.
• You can pass the view specific data using @State and @Binding.
• You can pass custom data types using @StateObject and @ObservedObject.
• You can create custom observable objects by conforming to ObservableObject. Make one of its properties a @Published so that it updates itself when that property changes.
• You can use @Environment to read the system objects injected using .environment().
• @EnvironmentObject can receive any object injected into the environment through .environmentObject(_).

Where to go from here?

That brings the end of this chapter. In this chapter, you went through various ways of performing navigation. Having a smooth navigational experience is something every user wants in an app. So when implementing navigation, you should always be mindful of that.

Vumeaves, ci utt lnuxq eax eod wikuriel ew ByezfEE qefigebael. Gee tin apju sueh dmi zuvitaniir lavuceiw rpum Egdho. Inxi, xoi suy roiy vuto ew yabaug vwey Estgu egoal hpi Zxher uy Foxijiwuov.

Iz bgi narm bfoyziq, qou’vu yeasc je emd caso zute laj zo lxa atf. Keo’qc zeigj aquak iwmews uvabiniurj ohf tekqah xelkjazd fi tni arl’m AI dcika ezzu otunodm fr Opxpi’k Quxap adyacpice vaopagukey.