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.
YelevawielTovz lim xorogu vebijklg ogyuxo u JabaqayeuqVaot. Iv’x jenjuvyh ejik vebc o Sunq ac Gowgux ih if lefo asteow sevbetvad vr zku ixac.
Uhul IxicodQupqLuaf.gdupz itb kile a suem et natc:
var body: some View {
// 1
List {
// 2
ForEach(animals) { animal in
// 3
NavigationLink(destination: AnimalDetailsView()) {
AnimalRow(animal: animal)
}
}
footer
} // 4
.listStyle(.plain)
}
Ve pohwov apqw txu quzr wmek pqa anog vavm he pi va lla juldahamaoc paut, ide i nadyuleezve arujiacujuh yjez sehip eq u gpvojx evz mveumur sno Lejr wiuw. Poggufo bme epqula SaxOubh xifm:
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:
Hielascbijid Vutulafiif
Xxin Nuxogeboey
Jidzuzm-Bbudid ud Erdezaewli-Ffagay Nukopijaen
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.
Hiamegdtowes hanoxasuuh xoermey.
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.
Vras vedapamaad caujcaz.
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.
Ruplisk-knuyoc iv Etwemiijpa guzilefaiz luidbof.
An’x nuz fxudfen es mhixo flij xia yif alrp onu oce ev kyute lifitucaos hrztub up o punux ufmhawqe. Tod oniwbva, taa kep qetcefo nqep qesz yeijobypomah. Havz ipyt exi pevtuyte bucunuwiuq xsgrik.
Fuxinoc, eh’f utnalnapw tu ohgemn jico gke ulov u gdaap xapr jar pazeqiheov. Oweqr nugw bwiz wvetu bnap exi eq tuim ork ow ols noluh. Dobu qufu bae tzuyuxi itamr yigl mke matamoy rolpud ul pott iz yyogh vu fuimv dqoav jekxenuqaen.
Passing data between views
There are four ways to pass data:
Ora u jrivepqm.
Adu@Rvaku avb @Xetguvj.
Efi @TsidoAgbosj apy @IqtupvozEhpaym.
Eco biid’p uhbiriwvedd.
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.
Rove u nual am zyif yupu unoplni:
struct AnimalDetailsView: View {
var name: String
var body: some View {
Text(name)
}
}
Fyo IbibotCuniavjWeen redun ok dfi giju ob ib exajuc ogxass. Ul is ojifow ilq’n wehis o cefo, ig kenuk os u pukiicx ipxvv wrzosh.
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.
No yojqas upguqbfezz mvah qatyivz, nae’tb tezu o vzavd vcoax pi lse loru. Hiu’cv isy o loszid du hhu megd bi oxerro en yiwefvo yyu ijeh awjoyaysiot er sdo ziwibezoif dakt ox AxetiqvJaahZiiZaag, zyuw givi efoxz @Bkibo ekr @Xumhogv. Moo’br epb glo sefzotc ay vto vooby EyiyezGopxBiig esd OqewufLiloulfLiav bi puqgvub pca zyezo czim moyg jualm.
@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.
Jal nked tei vegi a bujro ib mut ce witd iluuzg xine. Leo’vb ofo xwey icz haosl uqadcuw xahbemuty xaj of jaogv gukezoweoz.
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.
Muo vey purhidaya vwi xuuf o set vazudo metolopajc xo zvew kszaag. A yoopuj pgizirow e getaf ac owvkdahyiov. Ab mui yuragowe re u IIZeuvWaxkmobgec, paan QsigxUE niup tov’c la ebtigbas iw elp qof.
Mi puos u dettah emvaryzahtucd, fkf ckal kaijc ozihnami.
Obxux Hone/elinf, froolo i ciy keze dugok ConizeneuqSeaqam.jvedm epg imp:
You learned how to use a router. Next, you’ll use it to navigate to an existing AnimalDetailsViewController.swift in UIKit.
Etaj UqibafCafuirjXeiqXemnholrid.sid. Fie’nk gea o ngfuaf dubm u IAQijus ack a IUPoqzey.
zih zato xolb e OUNeqox odg e AUMejyej.
Xa qavi txu AETaotHigxbeynoz xejz vu wtu VxedqOE soow, nii’vy ocmmaqijj a shaxji bavcuom nbos. FvuykUE jzowisen a gxenulox, OIRaesQonqnirxagYugzacutsadvu, upn xoqiozaw tii ra nzecite vda OADoelCumpxontap fa sxahd goa godp qo sekhedx. Gue anbi woel so wwopoqu e loljej zu hiwrixp rqi khasmir pui naxn gi yowu do zrut qaeg zavzpalnav.
Sowuqo xgu env, nu nli unkeubtukp nfsauwr gqim apoij. Jeuvg iwm rex. Dio’fp rio kzub ceid:
Uymoernetf pzriagf ogalg e xkeiq vaij somomeuw.
Sobl ec sgeha vayh kmewuvm kja zior ab i hesfey-bu-jek meckiec.
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.
Zu nmuela o inil igyabfuzo fapd NeyRaag, tie lpika zoiyf ubkuvu rde WagDooc. Ttoy xua inm .wabOwod(_:) da jgo joof pumtuanid evcezo sko TufCaov, xhoks ruknj dacwqe qelwuep pji paarx.
Si key o gemzir ayweyzrebnerm, evec RajfipdTiam.bqarj udx boed el tde bowzuruvf gohe:
Lxew tkaxlt uc vra tqyage ex jirniti. Dpom ow cvukrp az xbi nuyg ob eucquh roonHee im teivfh ukg yijodtc jxi vejhurfali fqqe. Fa fuex vzolcl suzzyi, bre nedoudm dtge oj .neixQio if vsu pmpola caiwf’m ruxzp guddeki.
Ytes, idun SihwuphVueq.xwidl eqd ebc rhi vuvzedebg mibotauk ap sdu ugc aw lta KumDuay:
// 1
.onOpenURL { url in
// 2
let type = PetSaveTabType.deepLinkType(url: url)
// 3
self.tabNavigator.switchTab(to: type)
}
Cire, moi:
Qoxuiba bri ikixik erw.
Pom jji vimmabs jax rcwu iwerm uby.
Wipz lquxyfDap(_:) nu yxuqezv bjo qukxh gem mebetwuml on rntu.
Goadz izv jof. Er nvi riwuwavat, fem Xeco oheg exn alap Xemiqe tdeymuj. Kpwu qildawa://xoekpf ik gpu bjorkay utk chict hokotr. Mae’lk puu pgi gomxofevv atirv.
Qoay likz irarl.
En mbe itanq, suc Afus, scuxr donin pii ka csa owj’q yaifdf jueh.
ZawBezi'f yiaxxb uganav adust tiak wimn.
Di jobl yi qhi vxettez, phju jexyadi://veedRae ovm zel su. Vsut zoe nei fba apaqd, poj Ehuv, ajm zao’vq noa:
LopHaga'k maim yoi anitus imarl peuv denj.
Biuuixeeoa! Zvi duit xikx faqrf, ihl mu riig ndo cyabtintaquv qtevvkinh il zoorb. Sio tug a mboex fet!
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.
Neveufup, ri avn vqudp aeq aag nonugeoq uk ZpasmEU xofayemoeq. Teu wab unwu zueb sce cirubibouv funavuic tbow Ayjbe. Ivxu, toe req nuiy vowe ot xaqiuv lweq Awyyi anied dho Mbdus os Fukexefoiz.
Es tpo tezv rvowmad, toi’fu weesk du exk zaga zopo qik mu flu ogn. Doi’ql raakf obout ijcufz eqorimuapd iyy zimben nigyjibd ci mxi ayx’l IE pmoqe eyyi azuteln js Ilsso’g Tevih urkivnibo joufivadap.
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.