SwiftUI Navigation - NavigationView & NavigationLink Tutorial

today we're going to talk about the basics of navigating through your swift ui app using a navigation view i'm going to show you how to go from screen to screen past a little data and some basic customizations before we dive into that though today's video is sponsored by squarespace squarespace is a great way to showcase your work and get that ios developer portfolio up and running very quickly so head over to squarespace.com sean allen to check it out okay as always i like to keep my tutorials focused on the task at hand which is the navigation view so i do have a bit of a starter project however i will take 30 seconds to run through it real quick just so you're you're caught up so essentially i just have uh one view which has a circle number view and we can pass in you know the color we want and the number we want and that's what you see here on the right you got the circle with the one on top of it all that circle number view is is a z stack right with a circle shape i made it 200 by 200 i gave it the color that we pass in and then i put the text on top of the z stack with that number you know made the font white and gave the font you know a size and font weight and then here in our main content view we're just using that circle number view again with the the parameters of the color and the number to create that and you'll see that's how we created going from screen to screen how i get like the blue circle the green circle etc okay so that is the starter project now there's two main setups for our navigation view one is to actually create the navigation view and then the second part is to tell it where to go when we tap a button or tap on a cell or whatever like what destination view do we want to go to so those are the two steps so let's handle the first one now let's create our navigation view so here in our content view which again is the screen you're looking at here the circle number view let's just wrap that in a navigation view navigation view and then open close curly braces and we'll do a quick cut and paste to get our circle view inside the navigation view now you may not notice like anything changed our circle got moved down a bit so you can kind of tell our navigation bar is there but we need to give it a title to to show what we want it to say now we want to put the title on the elements inside the navigation view let me type that out and i'll explain that further so on our circle number view we could do dot navigation title you can see it just takes in a text and we're going to call this red one with a capital o right so now you can see our navigation you're probably used to seeing this this was introduced in ios 11 these large navigation titles that's what we have here but your first instinct may have been to put the navigation title not on the circle number view but down here on the actual navigation view and you can see we get nothing well a navigation view if you're coming from ui kit is essentially just the ui navigation controller and if you're not coming from ui kit let me just give a quick 30 second explanation so think of the ui navigation controller as like a container that holds multiple views in it it holds an array of views and that's what you're doing when you're navigating from screen to screen you're either adding a new view onto the stack or you're popping a view off the stack you know when you go back think of it like a deck of cards right each each card is a screen and the deck is like the navigation controller like holding those cards so that's why you want to put the navigation title on the element inside the container right because the container doesn't change the views inside the container are what's changing so you can see on our future views we'll get there in a second we're going to add our navigation title to those views that way when those views are on top of our stack that's the navigation title that will be shown and if that was too quick for you i did a whole video really diving into all this with diagrams and everything about ui navigation controller so check that out i'll leave a link in the description okay now that we have our navigation title on our circle number view you'll notice something happened when we added our navigation view right our circle got pushed down a bit and that's because our circle is still centered in the view but the view doesn't include the navigation bar at the top so that navigation bar is taking up space so just a quick little ui thing really doesn't have anything to do with the navigation view i'm going to add a little bit of an offset to our circle view just to bump it up a little bit so offset we don't care about the offset x we just want offset y because we're on the y axis and we'll just do negative 60 and you'll notice that just bumped it up 60 points and made it a little bit more centered just a small little adjustment to the ui but i wanted to explain that just to show you that how adding navigation bar to the top of your screen will kind of push everything down and that may affect your design okay so that was step one right we've created our navigation view we see the title step two is telling it where to go like what view to show when we take an action right if i pull up the design again you can see we tap on this thing that looks like a button and it shows the blue circle screen right so that blue circle screen is our destination so we need to tell it where to go when we take an action so to do that we need a navigation link we want the navigation link to be below our circle number view so we're gonna have to put it in a v stack so let's do the v stack here open bracket close bracket and we'll do a quick control i to line everything up in a second here so uh the top element of our v stack is the circle number view we want the bottom element to be our navigation link here and if i initialize that you can see we get a bunch of different ones uh you know for the sake of this tutorial we're just gonna do destination and label and hopefully that destination uh word is ringing bells here because that's what i said we need to tell it where to go essentially so i'm just gonna like line these up differently i don't like it when it lines up like that just a style preference but anyway highlight your whole struct do a control i it'll line everything up for you but now you can see in our preview we have this button that says navigate i'm going to actually change this to say next screen there you go and then okay so the destination right now is just a view a text view that says destination but we can actually test this now we have the basics of our navigation in place so if i hit the little play button on the preview here if i hit next screen you can see we go it's just a text view of destination that's not what we want we want those circles again to represent you know each screen but maybe you notice all we need to do is pass in a view here for the destination but we just need to create that view so we're going to create a red one view bluetooth view green three view right that's what you saw in the design in the beginning so first off let's take this content view here we're gonna name this red one view so right click refactor rename and you'll see we get the nice xcode renaming tool so change this to red one view and you'll notice it changes it wherever we need to change it hit the rename button and we're good i lost my canvas bring the canvas back out make it not ridiculously large hit resume there we go make it back to 75 okay so this is just right where we left off now what i'm going to do with some tweaks is we're going to create our bluetooth view in our green 3 view now i'm using these very simple views but imagine if you had like an onboarding flow or just some flow in your app red one view bluetooth view green three view these are all just like completely separate screens so just imagine you have individual screens navigating through your app that's what these represent so let's create our bluetooth view for that i'm going to copy and paste here and again you could put this in a whole separate file if you want again for the sake of the tutorial i'm going to keep it all right here but let's rename this blue 2 view and again instead of the circle being red it's going to be blue and i know this is not like refactored perfectly you could write this nicer just an example i don't want to waste time like refactoring i want to keep this focused so instead of the navigation title being red 1 navigation title is now blue 2 we still want to offset it and move it up the navigation link will keep for now but we are going to change that i just wanted to create this bluetooth view so we had some place to go when we tapped our button now i've made a mistake i don't know if you've noticed it but remember i said the navigation view is like a container well if you look i have a navigation view on my bluetooth view as well because i just copy and paste it well that's going to cause issues let's actually hit resume let's run our preview and take a look at what's gonna happen right so we're gonna run the preview here when i hit next screen we're gonna go to bluetooth view no we're not because i didn't change the destination so let's change our destination on our navigation link in red one view to blue to view okay so now the destination is bluetooth view that's where we're gonna go now so now when i hit next screen you can see bluetooth view blue circle all that good stuff that's expected however look at our navigation title it got pushed down well that's because we have two navigation bars in there right because our red one view has the navigation view and then we pushed another navigation view onto the stack so they're like nested that's not what we want you almost i can't think of a reason why you would want to do that never do that so in our bluetooth view let's delete the navigation view here make sure we delete the extra curly brace again highlight it all do a quick control i to line it up cool hit resume now when i hit next screen now that's the look we kind of expect right we we don't want that bluetooth to be pushed down and as you can see typical navigation we have red one up there we can hit back and go to the red one screen right go to bluetooth red one now you'll notice our navigation link is just this generic blue link looking thing right we don't want that we want to stylize that a bit well that's the cool thing about navigation link here is whatever is in this label closure this view builder you can customize however you want right it's kind of like a view so let's customize our text to make it look you know like that tappable button so the first thing we're going to do is make it dot bold we want bold text and then we're going to do that frame with a width and height of 280 by 50. this is just the typical button size that i like and it's you're going to see it's going to look like the typical default apple button just this is all pure stylistic subjectiveness style it however you like but that frame and then we're going to do a dot background color it's going to be color dot blue because that's the screen we're going to that's why i colored it blue and then dot foreground color this is the color of the text dot white there you go and then we'll add just a little bit of a corner radius to it we'll say 10 just to give it a little bit of rounded edges so there you can see we just quickly styled our button but again i wanted to point that out our navigation link is just wrapping our text and we formatted our text however you want and the reason i want to point that out is because that's how the navigation link works like yes we're wrapping it around a text but maybe you this was wrapped around a cell in a list view or a table view that's how when you tap a cell you can go to a destination view so that's the basics of navigation link whatever's in this label view builder closure is what you're going to tap on to go to the destination and again the destination is whatever view you pass into the navigation link and on that note when you're passing in this view let's say you wanted to pass data to the blue 2 view that's where you would initialize this bluetooth view with whatever data you're passing in so let's say bluetooth view actually took in a color so we'll say var color and that is of type you know swift's code so with ui's color so now you're going to notice i'm missing an argument so now when i initialize the blue 2 view i have to pass in a color so instead of the background color being blue here that we pass in we can make this you know whatever color we pass in this is us the basics of passing data here right so whatever color we pass into our bluetooth view we're going to pass that right on through to our circle number view and that's going to be the background so now when we tap the navigation link we're initializing a new bluetooth view except we want to make this dot orange i don't know i just pulled that on my ass so now when i hit resume now when i pass the next screen the circle color is orange because that's how we're passing data so again that's just the basics of the passing of the data i'm going to copy and paste this real quick and to make our blue screen navigation link have the same kind of dynamic so we're gonna make it color green and then one more time for for repetition uh let's copy the bluetooth view this one's gonna be much simpler because there's no navigation link let's create our green three view i just copy and pasted it no big deal green 3 view we're not going to take in a color the background color is going to be dot green and the navigation title green 3 again the navigation title goes on the actual element and then there is no navigation link because we're we're done there right so now hit resume run it um our blue bluetooth view is going to be orange because we whoops running on the preview bluetooth view is going to be orange because we passed in that data but if i hit next screen here oh we're going to destination because i forgot look i forgot on our bluetooth view to make the destination green 3 view so again practice repetition you'll pick up on all this remember the destination where we want to go is the green three view so now when i hit next screen here on blue two we're on green three and there is no navigation link because we took it out this is the end of the line and we can continue to go back and back now look at these back buttons they're this default blue color let's get into a little bit of customization here this is super simple we want to change this color we don't like the blue right maybe we have a certain color theme going in our app so at the root of our navigation view which is our red one view right that's the root we can add an accent color so on the navigation view if you just highlight the curly brace here like that and left and right on the arrows you can see make sure you're on the navigation view that's very helpful in uh in swift ui so let's add dot accent color and we're gonna do color dot and initialize that with dot label now label is a ui kit ios 13 semantic color basically it's going to be black in light mode and white in dark mode right you don't want to just make this color like yellow and then it looks great on dark mode but doesn't look great on light mode you got to take all that into account so now if i hit next screen see look now our back button and color is black because that's what the label is now if i stop running this and we'll change this here to dark mode there you go now run it and now you can see the back button is now white that's what the color label does and that works well with the dark mode now the last bit of customization i want to show you and then you may be wondering is okay red one is either black or white you know i have a theme in my app i want to change this color well there's no like super simple way to do this i guess when you see this is relatively simple but what we're doing is changing the appearance of all navigation bar titles so make sure if you do it this way you want all of them to look the same if you want to change them from screen to screen a different color that gets more involved more complex now you're talking about some custom navigation controllers way beyond the scope of this tutorial but i'll show you the quick and easy way to change the color of the navigation title uh globally for your app so for that we can go to our app protocol here this is the new in ios 14 just how you create your app well you your app has an initializer that you can override here and do some stuff when your app is initialized so we'll do an init here and then we want to do ui navigation bar dot appearance now remember when you do dot appearance this changes everything like globally like so all your navigation bars are going to have this so you can do large text title attributes and that is going to equal a dictionary here we'll say dot 4 ground color and it's going to be ui color dot we'll say red just for us so now when i run this on the simulator here you're going to see my navigation title is going to be red and we'll move this over see there you go now you see the navigation title is red our back button is still black if i do command shift a we can go from dark mode to light mode so now you can see the color being changed and then one last thing i forgot to mention let's go back to our code here on our red one view is the hit resume so the navigation type will stop that the navigation title defaults to that large text right like i mentioned earlier that's like the new default in ios 11 you can however go back to the old uh you know inline one is what they call it and for this we'll just redo the initializer i don't know this is just maybe a habit of mine i just find this to be safer and works most of the time and you can see down here we have navigation bar title text and then display mode so we'll do the title again red one display mode dot inline right and you should see uh this update right so you know you see this is like the uh the old style navigation bar right just it's filled in has small text there you go now sometimes you need that because sometimes the large title which again is the default i'll delete that like sometimes it just takes up way more space than you want so you know there is a use case to go with inline so that's how you go back and forth now if you're here learning how to navigate through your swift ui app that means you're an ios developer and showcasing your work in a great way can really help you land that next job or get that next contract and that's where today's sponsor comes in squarespace squarespace is an all-in-one platform to get your ios developer portfolio up and running very quickly to showcase your work and it handles so much for you like i know as developers we want to build it ourselves like i'm a developer i can build a website and you can it's just very time consuming right you have to make it work on all different screen sizes you get that with squarespace out of the box looks great on mobile you have to design it squarespace has all kinds of themes like all the seo analytics like squarespace just takes care of so much for you so again you can just showcase your work very quickly and not have to worry about it so head over to squarespace.com to start your free trial today and when you're ready to launch your website go to squarespace.com sean allen to get 10 off your first purchase of a website or domain all right that wraps it up for navigation view in swift ui hope you enjoyed it and we'll see in the next video you

Channel: Sean Allen

Views: 30,013

Keywords: Swift, Swift Tutorial, iOS Developer, iOS Development, Swift Code Tutorial, Swift app tutorial, SwiftUI, SwiftUI 2, SwiftUI Navigation View, SwiftUI Pass Data, SwiftUI Navigation, SwiftUI Tutorial, SwiftUI Basics, SwiftUI For Beginners, Beginner SwiftUI, NavigationView SwiftUI, swiftUI navigationbar, swiftui navigationlink, swiftui navigation between views, swiftui navigate to another view, swiftui navigation controller

Id: IopCl8sOyFA

Length: 17min 33sec (1053 seconds)

Published: Wed Dec 30 2020