Create a custom navigation bar and link in SwiftUI | Advanced Learning #12

[Music] and we are back what is up everyone i'm nick and this channel is swiffle thinking where we cover all things swift and swift ui related and in this video we're going to look at building a totally custom navigation view you might ask why we're doing that and that's because the default navigation view that comes with swift ui is not that customizable and i've gotten so many requests of people asking how can we change this in the nav bar how can we customize our nav bar and with the default one you really can however you could build a custom nav view now one thing i want to point out before we get into it is that the default navigation view that comes with swift ui is highly performant now it's not that customizable but performance wise it's exactly what we want in our apps so what we're going to do in our custom nav bar is actually create wrappers and wrap them around the default navigation view and default navigation link so under the hood we're still going to use apple's api for the navigation view but on the screen it's going to appear like we're using our own custom navigation view and all this is going to be possible by using view builders and preference keys and if you don't know what either of those are i highly recommend going back a couple videos in this series where i covered generics view builders and then preference keys all in order so that we could hit the ground running in this video so go check those out if you haven't watched them and then come on back and once you're ready let's jump in xcode and build a custom navigation view all right welcome back everyone so i'm back in our xcode project and uh right here i have what we built in the last video and it was actually a custom tab bar so you can see the custom tab bar here we built if you have not watched that video it's probably a great video to watch before this one in that video we basically tried to recreate apple's tab view which looks like this as much as possible so the tab view has a selection it has a view builder closure and inside that closure we have all of our screens and our tab items and in our custom tab view we kind of did the same thing we have our container view with a selection we have a view builder closure and then we have our screens and our tab bar items so in a similar format in this video we're going to try to recreate apple's navigation view as much as possible so to begin let's right click the navigator create a new group and let's call it custom nav bar i'm going to move the folder down below our custom tab bar here and i'm gonna try to do it in the same format as the last video so first we created an app tab bar view in the last video and in this one let's right click create a new file it will be a swift ui view and let's call it app nav bar view click create click resume once you're inside and let's start out this video very simply by creating a navigation view open the brackets inside let's put some content for this screen let's put a maybe a z stack here we can do color dot red let's make it ignore safe area on top of that let's put a navigation link open the parentheses let's use the destination and label completion our navigation link is going to send us to another screen and let's have that screen just say destination for now and then that label of the navigation link we can just have it say navigate and let's actually make this maybe color.green just so we can see that blue navigate a little better and we are in a navigation view we can't see the title yet so in order to add the title into a navigation view anywhere inside the child of it we can add a dot navigation title we can put nav title here you guys have seen this a hundred times and when we click this navigate button this navigation link we can segue and it will push a new screen from the right to the left side of our app and on this new screen we are still in a navigation view we have a navigation bar at the top we can add another title here and of course we have our next screen here so on this destination view i can also add a navigation title let's put let's put title two and i can add a navigation bar back button hidden and i can set that to true or false so so again on the canvas here we have our first nav title we have a navigation link that we can click go to another screen and we can set up another navigation title on this screen and we have our second view we set navigation bar back button hidden as true so that back button is now gone but by default we want to show that back button so we can put this as a false and if we segue now we can get that back button in that back button of course will bring us back to the first view so if you're confused at this point and you are unsure how the navigation view works the navigation link works i highly highly recommend going to check out my swift ui boot camp course where i covered how to use the basics of a navigation view because because in this video we are basically recreating all this but with custom views and we're doing that because this navigation bar looks great but it's actually not that customizable and if we wanted to customize and build our own navigation bar we can't use apple's api we have to make our own and i'm super excited to share this with you guys because i've checked out a bunch of other courses where people are showing how to build swift ui navigation views and i've not seen anyone recreate a navigation view the way that we're going to do it and i think what we're going to do is going to be super helpful to you guys because the secret that we're going to have in our navigation view is that we're going to actually leverage apple's api of the navigation view as much as possible so the logic that apple gives us in this navigation view for creating a navigation view and then segwaying to the next one is really really powerful the performance and memory benefits that that come by default with this navigation link are so powerful and we honestly don't need to spend the time to recreate this segue when we can just leverage the existing segway that we have here so what we're going to actually do is use apple's navigation view but we're going to hide it so we can't see the navigation bar from the navigation view and instead we're just going to show our own navigation bar at the top but behind the scenes we're going to still be using apple's navigation view for the segway and all the performance benefits that we get from their api and the first thing we're going to do is build out what our navigation bar on the top is going to look like so let's right click the navigator create a new file it will be a swift ui view and let's call it custom nav bar view go ahead and click create click resume once you're inside so let's keep it simple here we're going to create an h stack open the brackets on the left we're going to have a back button so let's put a button here open the parentheses let's do action and label action will leave blank for a second the label will be an image system name and here let's do uh chevron dot left click resume just to see it in the center of our navigation view we're going to have a title as well as a subtitle so we're going to create a v stack here let's do spacing of maybe four let's put text here that says title and another text that says subtitle that says subtitle goes here let's make the title font of maybe title why not let's give it a font weight of semi-bold and and let's on this entire h stack let's give it a font of headline so the subtitle and the image get that headline thickness and our custom nav bar is going to actually have a background color so the default does not have a background color but just to kind of show you how we can customize this let's add a background color and i'm just going to do color dot blue i think blue is fine all right let's make it look like it's on the actual nav bar here so in our preview i'm going to put it into a v-stack put a spacer underneath it just to push it up to the top and firstly i want to make sure that this nav bar extends all the way to the edges so in here let's put a spacer and let's add a another spacer on the right side here the button we can't see because it's blue so let's actually change the dot accent color of this whole section to white you can see the white button on the edge here and i noticed that the title is not in the center right now because we only have the button on one side and not on the other side so what i'm going to do is just take this button and just paste another button on the right side but let's make the opacity zero so we can't actually see the button on the right side okay and then i noticed that the button is so close to the edge so before we add all these background colors let's add some padding to the entire to the entire stack makes it a little bit bigger and then the background we want our navigation background to go all the way to the edge of the device all the way up here we don't want this extra white space so on the background layer i'm going to add a dot ignores safe area and we're going to use the edges of top alright so now we got our custom nav background up here and let's also make the let's also make the text white here so i'm going to put in addition accent color let's do foreground color of white all right we have our custom nav bar this is what it's going to look like in our app and obviously if you've ever used apple's nav bar you know that we cannot customize the background color we cannot add a title and a subtitle here and we can only customize that back button so much so here we have fully customized navbar and let's do a little bit of housekeeping before we move on here so i'm going to create a custom sub view for these back buttons so down here let's create an extension for custom nav bar view open brackets private var let's call it back button of type some view we'll paste in our button here let's put that back button on the screen so up here let's do a back button let's put this as also as a back button opacity of zero on the second one and then let's put this as the title section so i'm gonna cut this come down here private var let's say title section of type some view paste in that v stack let's put our title section back on screen we have a nice and neat super readable body here and then let's create some variables for the data in this section so on our navbar there's a chance that we want to hide the back button so we're going to create an at state private var we're going to call it uh show back button of type bull equals true so by default we will show the back button uh and we're only going to put this back button on the screen if we want to show back button so we're going to say if show back button put the back button on the screen and we want to do the same thing with that placeholder back button on the right side so we'll say if show back button and we'll put the back button with opacity on the screen here all right we also want to change out the title and the subtitle right we don't want just this text so let's create an at state private var let's call this title of type string and we'll set it equal to a blank string for now and at state private var we'll say subtitle of type string and we'll make the subtitle optional in case we don't want a subtitle on this screen and we'll set it equal to nil by default let's click resume and let's just set up this title so coming down here the title should actually be our new variable called title and then for the subtitle we're going to say if let subtitle equals subtitle open brackets so if there is a subtitle and it's not nil we'll put that subtitle on the screen of course we want to put the word subtitle here all right and because we don't have a preference key set up yet let's just give these actually some values by default just so we can start seeing them on our preview here so i'm going to put i'm going to comment out what it should actually be a blank string and let's just put title up here and then here i'm going to put a subtitle and comment out the nil just so we can actually see it for one second i'm going to fix these later on in the video all right so that's it for our custom navbar view for right now we just have literally this blue square set up the next thing is going to be actually creating a view builder so that when we segue to this screen here that we see we can add a nav bar and we can put our content below it right because right now we just have the top section we want a container that will hold the the top section as well as the actual content so let's right click create a new file it will be a swift ui view and let's call this custom nav bar container view click create and let's click resume here our container view is gonna be very very simple we're just gonna have a v stack we'll put spacing of zero because we don't want any spacing between the nav bar and the actual content so at the top we're gonna put in a nav bar so custom nav bar view open close parenthesis and we want to push it to the top so you we could just put a spacer here for a second but really what we want to put underneath this is actually content whatever screen this is and that screen obviously is going to change depending on what screen we're on in our view so we can't hard code a screen here instead we need to pass in some generic view that we're going to call content so i've done this in the last bunch of videos you guys should be very familiar with generics and view builders for now so i'm going to move fast but in this custom navbar container view let's pass in some generic content that conforms to view all right in our view we're going to have content so we'll say let content of type content and we're going to initialize it with a custom init and of course our custom init is going to have an at view builder with a parameter called content that is of type and it's a function that returned content and in here we're going to set self.content equal to content and we're going to call that function to return us the content finally instead of the spacer here let's just put the content onto the screen and we want to make this content as big as possible so on the content we'll add a dot frame with a max width of of infinity a and a max height of infinity all right so now when we create a custom nav bar container view we can open the parenthesis and we get this content completion here and when i click enter on that content we then get our view builder to open up our closure here and we can put in whatever we want that content to actually be on the screen so i'm just going to create a z stack quickly let's put a color dot green on the screen let's make it ignore safe areas and then on top of that let's just add some text that says hello world and let's give it a foregone color of white click resume on the preview here we should now see that we passed in our content our new view into the container view so this container view so this net custom navbar container view has the bar at the top as well as the content for that screen alright so before we move forward let's actually just put what we have into our app so far so let's jump back to the app nav bar view where we have apple's default navigation view i'm going to cut this i'm going to come down here create an extension for app nav bar view private var let's call this um default nav view of type some view i'm just pasting that default code here so we can so we can put that default on screen if we want to so let's add what we have so far and let's add a custom nav bar container view and let's put the screen let's make this screen be a z stack and in the background we'll have color.orange maybe with ignore safe area and then on top of this orange let's add a navigation link open the parentheses and we're going to use a destination and label and we can just keep it saying destination and navigate for now and i'm putting this navigation link on the screen because i actually want to use the segway from a navigation link behind the scenes because the the navigation link is actually super powerful it's very performant so we want to use the segway that we can get from clicking this navigation link to get to our next screen now if we look at it on the screen here we can see that the word navigate is actually kind of dulled out we can't see it and we can't see it because navigation links are only available once you're inside a navigation view so if i added a navigation view here and open the brackets and i put in this new container view we can see that our navigate button is now showing the problem with this is that when we add this navigation view we're now getting the default navigation bar at the top here right so i can add a nav title hi we get that the default nav bar as well as our nav bar and we don't want that so i'm going to command z to undo this and we're going to actually do is create another container view that holds that starting nav view so when you go and create an actual navigation view the first time you create it we open up like this and then every time we go to another screen it knows that we are already inside a navigation view now we need to create this layer of the navigation view so let's right click the navigator create a new file this will be a swift ui view and let's call this custom nav view click create i'm going to move this above the custom nav bar views just so they're kind of like in order and this will be the first nav view that we want to put into our actual app all right so we're going to start this off by actually adding a navigation view to this screen here so this is a regular navigation view that apple gives us inside the regular navigation view we're gonna put a custom nav bar container view and then we have content that we're going to pass in here and let's click enter on this view builder and in here let's just put color.orange for a second all right so we're back to where we just were one second ago we have that nav bar at the top here that's coming from the regular navigation view and we don't want that so on this custom nav bar container view let's add a nav bar hidden and let's set it to true so now the regular navbar will be hidden by default because we're setting it here while we're here let's also set the navigation style navigation view style to stack navigation view style and i covered this in the boot camp this is just the regular style that we see when we go from screen to screen and finally on this screen we want to be able to actually pass in some custom content so we're not going to just start with this orange screen we're going to initialize it with some generic content that conforms to view again let's initialize it we'll say let content of type content and the init will actually be a at view builder we'll call it content it will be a function that returns content we'll set self.content equal to content open close parenthesis and then we can put that content on the screen here so when we call custom nav view we will open the parenthesis and we can add in our content let's do color dot maybe red and i'll call that ignores safe area on it and let's click resume and see if it builds all right so now we have our actual custom nav view ready to be used in our app so we can so when we use this custom nav view it's going to secretly put a navigation view a regular one on the screen but then we're going to hide it so we can't see the regular nav bar here but we are going to benefit from all of the performance benefits that we get from the navigation view so the secret here to creating this custom nav view is actually using leveraging apple's navigation view by default so let's put this custom nav view on the screen and jump back to our app nav bar view scroll up here and i'm going to cut this z-stack that we just made let's cut it and let's start this body with a custom nav view open the parentheses we get our content let's click enter and then i'm going to paste in the z stack on this screen so now we can see it looks almost the same but what we know behind the scenes here is we are actually in a navigation view a regular navigation view so because we're in a navigation view we can then start to use navigation links and that's why this word navigate now is actually blue it's not sold out anymore because we can use it because we're in a navigation view so if i click this word navigate we can now get that segue to our second screen and this leads us to the next step in this tutorial where we actually want to customize the navigation link as well because when we segue using a regular navigation link it's going to by default start showing the regular nav bar at the top we can see the regular nav bar at the top here and when we use a navigation link within our custom nav view we really want the second screen to also have our custom nav bar at the top so now let's customize a nav link so let's right click the navigator create a new file it'll be a swift ui view and let's call this custom nav link go ahead and click create let's click resume to make sure we are connected here and again we're leveraging apple's api so our custom nav link is really just going to be a regular navigation link i will open the bro and i'll open the parentheses here and i'm going to go down to the destination and label so although we're using this navigation link we want to be able to customize the destination and of course the label so if i right click and jump to the definition of navigational link we go into apple's api we can see that the navigation link gets two generic views here we have a label label conforms to view and destination destination that conforms to view so we're gonna actually do the same thing in our navigation link so i'm going to just copy this bit of code here let's jump back to our custom nav link file i'm going to paste it up here real quickly our custom nav link is going to have a generic parameter called label that conforms to view as well as a destination that conforms that conforms to view and again i want to point out that if we write it like this where we have label where label conforms to view the same thing as writing label that conforms to view destination destination conforms to view destination conforms to view so we're going to have the exact same parameters in our custom navigation link as apple's navigation link and one more time let's also jump into the docs again and we have the init that we're actually using when we create a navigation link in the init as destination and a view builder for the label so i'm going to copy this init here jump back into our custom nav link and let's paste in this init here and open the brackets so here let's say let destination of type destination and let label of type label in here we're going to set self.destination equal to destination and we'll set self.label equal to label open close parenthesis because it is that view builder function here so when we go to create these custom nav links and we open the parentheses we're going to get this destination and label completion here so i'm going to put the destination on so i'm going to put these on separate lines the destination i'm just going to have let's just put text that says destination for now and then the label we can just put we can click enter on the label here and we can put in our navigate and then let's actually just put our content that we're passing into our initializer onto the screen so let's the destination it's not just going to be a text that says destination instead it's going to be our destination that is from up here and our label of course is going to be our label just to make sure that this is working let's change the label here to say click me so we can see that the label is actually changing so we are connected here and then the preview is grayed out because the preview is not in a navigation link so on these previews let's actually create our custom nav view open the parentheses and let's put the custom nav link inside that custom nav view alright so now we have our nav view at the top here and we have our click me button which is blue it's a custom nav link and when we click it we go to the second screen so starting to work but we still have this problem with the nav bar coming in at top and our custom nav bar not being here so what we're going to actually do in this custom nav link here instead of just returning destination what we're going to actually return here is a custom nav bar container view and then the content inside there will be our destination so that custom navbar container view has our custom nav bar at the top so we click it and get our custom nav bar and now we just need to hide the regular nav bar so in here i'll also call dot navigation bar hidden and let's set it equal to true by default so the regular nav bar will be hidden click click me we now have our navbar coming in on top which looks great all right while i'm here i notice that this back button does not work so let's add some logic for the back button to actually function and that's in our nav bar view so go to the custom navbar view and the back button we can use the environment variable that comes by default with our navigation view so we can use an at environment and the key path will be backslash dot presentation mode and we'll create a variable called presentation mode and then when we click on that back button let's jump down to our back button let's go presentation mode dot wrapped dismiss all right so that's the default uh back logic that we get for the regular navigation view and sheets that we get anyway let's jump into our app nav bar view one more time let's click resume all right and then in here instead of using the regular navigation link that apple gives us let's use our brand new handy dandy custom nav link open the parentheses we get our destination and label it looks just like the regular nav link with destination and label so let's make the destination say text of destination and let's click enter on the label and we can put in our text that says navigate here and then i'm going to let's delete the regular navigation link just because we don't actually need it let's click play here and then when we click our new navigate button it should go to our second screen so that segue that we're getting from screen 1 to screen 2 is that same push segue that we get by default from the regular nav view and the regular nav link and that's why we are leveraging apple's api to create our own custom navbar here and when i click the back button you can see that it is working the logic we just added to go backwards the final thing we need to set up on our screens is obviously whether or not we need to show or hide this back button and how do we actually set up the title and the subtitle in our custom nav bar because right now it all says title and subtitle so we're going to do that the same way i think that apple does by using preference keys so let's right click on the navigator one more time create a new file this one will be a swift file because we don't need the swift ui preview and let's call this custom nav bar preference keys click create and in here we're going to create some preference keys for all of our data so looking back at the custom nav bar view we have whether or not to show the back button we have a title and we have a subtitle we're going to create three preference keys for all of these so i'm going to copy this let's jump back to our preference keys file all right i'm going to paste in those three variables that we need let's comment them out quickly let's import swift ui all right let's create our preference keys now let's create a struct we'll call this custom nav bar title preference key of type preference key we'll make it conform to preference key open brackets every preference key needs a default value and the value of the title is going to be a string that i'm getting from up here so this will be a string and we'll set it equal to a blank string by default we'll then add our reduce function and in here we're going to very simply set the value equal to the next value open close parenthesis moving faster here because i've been using these preference keys in the last maybe three videos you guys should be pretty familiar with this by now i'm going to copy this create another one we're going to call this custom navbar let's call it subtitle key and this one is going to be an optional string because there's a chance that our view does not have a subtitle so let's make it an optional string and set it equal to nil by default and then let's just delete and re-add a reduce function here and this way the completion now has our optional strings here so we'll set value equal to the next value very just the same way we did it here and then finally we need one for the back button so i'm going to paste one more time let's say custom nav bar instead of title preference key let's do custom nav bar back button hidden preference key and this will be a bool and by default we don't want our back button hidden so by default we're going to make this false so only be hidden if we make it true let's then again delete our reduce and then re-add our reduce function so it comes with dual completions we'll set the value equal to the next value open close parenthesis and then i just want to create some quick extensions so we can use these very easily so let's create an extension for view and i'll open the brackets and let's quickly jump into the app navbar view let's scroll down to the default implementation and we can see that the regular nav bar works like this we have the dot navigation title and we can add a string and we have the dot navigation bar back button hidden except equal to true or false i'm going to copy these and i'm going to go back into our custom navbar preference keys let's paste them and just comment them out for a second let's create a func and let's call this custom navigation title and we're going to pass in a string so i'll use an underscore here because we don't need the parameter name and let's just say title of type string we'll open the brackets and here we are going to return self with a dot preference and the key for the title of course will be our custom navbar title preference key dot self and we'll set the value of that key to the title and as you guys are well aware of now because we are in this extension we can just we don't need this word self or the period we can just have a preference here and this function needs to return some view and now our custom navigation title will work just like the navigation title our custom navbar also has a subtitle so let's create another one so let's copy this paste down here let's do custom navigation subtitle let's call this subtitle and this will be the custom navbar subtitle preference key and the value will be subtitle and let's do the back button so let's create a funk we'll say custom navigation bar back button hidden and this will have an underscore here and this will be a hidden of type bool we will return some view and open the brackets preference the key this time will be our custom nav bar back button hidden preference key dot self and we'll set it equal to hidden all right i'm going to delete these two and then i'm going to create one more function just for us for fun let's just call it custom nav bar items uh open close parenthesis return some view and we'll open the brackets in here i'm going to basically combine all three of these so first we want to pass in a title let's pass that in here secondly we want to pass in a subtitle and i just noticed right now that when we set up our subtitle preference key it was optional so down here we should actually make this optional let's pass in our subtitle to our to our final function down here and let's also say back button hidden of type bool in this function we're then going to return self so the error should go away quickly and on self we're going to call dot custom navigation title we'll pass in our title we're going to also call dot custom nav subtitle we'll pass in our subtitle and we'll add custom nav bar back button hidden and we'll say back button hidden so now we could add one of these to our view if we need to or we can add all three at once and when we call this custom navbar items i just want to show you quickly if i call dot custom navbar items right now it's going to make me have a title a subtitle and back bar hidden but we don't always want to include all three of those so let's give some default values here so if we don't include a title let's just set it equal to a blank string if we don't include a subtitle let's set it equal to nil and if we don't include the back button hidden let's set it equal to false by default all right and now our initializer is a little more flexible if we only want to add a title or subtitle or something like that just showing you guys some of the different things that we can do here so we have our extensions set up let's jump into our app nav bar view let's click resume all right and in here let's just update the title so anywhere any child of the custom to have you i should be able to call dot custom navigation title and put in custom title i just realized as we did this that we are not watching the preference keys in that navbar yet so let's actually finish this up by just customizing that let's jump into the custom nav bar view and right now we're initializing the custom nav bar view with this fake data but i actually want to initialize these in the container view not just in this navbar view so i'm going to copy these and let's jump to our custom navbar container view and in here remember this is just the the top nav bar as well as the main content we're going to paste in all of these items for our nav bar here and then we're going to pass in these values to the custom nav bar view so let's jump to the custom navbar view click resume here we can make these i think constant so we'll say let show back button of type bool we'll say let title of type string and we'll say let's subtitle of type optional string let's click resume we should have this error down here let's initialize the preview with show back button of true title of title here and then subtitle subtitle goes here let's click resume we should have one more crash here let's go to the custom nav bar container view here we're just going to pass in our new variables show back button we'll do title and we'll do subtitle click resume all right almost done and then let's initialize these with the actual values that we want to initialize them with so we're going to use a blank string here and we're going to use nil here and then we want all three of these variables to actually watch those preference keys that we just set up so on this v stack i'm going to add a dot on preference change and the key will be our custom nav bar title preference key dot self we'll set self.title equal to that value and just to make sure it's working let's go down to our container view here and anywhere inside this container view we should be able to call dot custom nav title and get new title there are new titles on the screen just like that it's magic so i'm gonna add two more on preference change we're do custom nav bar subtitle preference key we'll set self dot subtitle equal to that value and then on preference change custom nap our back button hidden preference key dot self and we're going to set self dot show back button equal to exclamation mark and then value so this is not value i'm doing not value because a preference key is whether or not the back button is hidden so if it is hidden this will be true but our value on the view is actually whether or not it's being shown show back button so we want the opposite of hidden so we're doing the opposite of value i probably should have just lined that up but we're going to do show back one as not value just to make sure that both of those are working let's add a dot custom navigation subtitle to subtitle pops up onto the screen and if we do custom nav bar back button hidden let's do true the back button should then go away so that's all working let's jump into our app nav bar view let's click resume this is our actual nav bar now and we got our title coming in perfectly so on this first navbar view we probably don't want the back button here because we don't need it so we can call dot custom nav bar back button hidden true and now this will work and then we can navigate to our second screen and our second screen is just this destination right now well i can then customize that second screen as well on that second screen it says destination we can then add a custom navigation title you can say second screen and maybe our second screen also has a custom subtitle and say subtitle should be showing and if we jump into our app here we have our custom title on screen one we can navigate we have our custom title on screen one and we can navigate to screen two our custom nav bar with a second screen and the subtitles should be showing it is right there we have our back button and we now have a custom navigation view working perfectly in our app i also want to point out here that instead of calling these individually we can call our superconvenient.custom nav bar items and then in here we can then add all of our stuff so we can say a new title we can set the subtitle i'll set it equal to nil and back bar hidden back button hidden let's set it equal to false for a second just to make sure it's working this looks awesome let's add in a subtitle perfect back button hidden true that's it's gone now and that is pretty much it for our custom navbar the only thing that stands out to me that i do want to point out is when we use the default nav bar we get this swipe back gesture that users can just by default swipe back left on the screen and it'll go to the last screen and by default if you hide the regular nav bar and that nav bar back button that swipe gesture goes away and it's really unfortunate because it's an awesome feature to have in your nav bar but because we are still using that default nav bar under the hood we can actually add that back manually so what we're going to do and let's put it in the custom nav view file i'm just going to come down here and create a extension and let's extend ui and navigation controller open the brackets and the ui navigation controller is actually uh the screen that's underneath all of this it's the actual ui kit navigation bar we don't really deal with this in swift ui but it is there under the hood what we're going to do is override the view did load for this navigation controller so every time this navigation controller loads it calls a function view did load and we're just going to override that function with a little bit of custom logic here so we're going to first call super dot view did load so we'll call all the regular stuff that viewed and load should happen and then we're going to add interactive pop gesture recognizer dot delegate i'm going to set the delegate equal to mill basically so that our navigation view is no longer the delegate for the pop gesture recognizer and by default it will still be available if i jump back to our app nav bar view and click resume let's click play on the simulator if i navigate to the next screen i now can also drag back our custom nav bar to the last screen so we get that gesture recognizer back in our app and everything is looking awesome all right guys that's it for this video you now know how to create custom navigation views in swift ui and the key for this tutorial is that we actually leveraged and used apple's default navigation view under the hood so because of that we have this awesome segue we have this awesome back swipe gesture recognizer we have our back button working so our nav view looks custom like we made it ourselves but under the hood we took all those performance and memory efficiencies that apple gives us and we're keeping those in our actual nav view stack so hopefully this will help you guys build really cool custom screens i can't wait to see them and hear about them if you did enjoy this video do not forget to hit the subscribe button leave a like and comment on this video this was a long one i know it was hard hopefully it was worth it if you stuck with me and you understood everything we did here you are well on your way up to becoming a professional ios developer all right that is it for me guys uh thanks again for watching as always i'm nick this is swiffle thinking and i'll see you in the next video [Music]

Channel: Swiftful Thinking

Views: 2,631

Keywords: swiftui nav view, swiftui custom nav view, swiftui customize navigation view, swiftui customize nav view, NavigationView SwiftUI, Custom NavigationView SwiftUI, Custom NavigationView, SwiftUI NavigationView, SwiftUI Custom navigation view, swiftui navigation view, how to customize navigation view swiftui, SwiftUI how to customize Navigation View, SwiftUI custom nav view

Id: aIDT4uuMLHc

Length: 47min 26sec (2846 seconds)

Published: Tue Oct 05 2021