SwiftUI Tutorial: Navigation, List, Modal, Stacks

hey everyone i'm going to do a quick little video on how easy it is to use lists and to navigate and pass data between screens using swift ui so first i'm going to show you this really cool website called unsplash go ahead and go to unsplash.com we are going to utilize some photos in this tutorial basically unsplash is royalty free you know free images and they are all incredible images so if you want to pick a theme if you want to go random do whatever you want here i'm going to go ahead and hit hit nature and just pick some random ones so let's say let's pick five images and just download them to your device save them somewhere where you can easily access them so let's go i'm gonna do animals [Music] okay so once you have your five images saved we are then going to open up a new xcode project so let's do ios and app hit next we're going to call this uh lists and nav demo make sure your interface is swift ui language swift i think it has to be anyway okay so this is our xcode project hit resume on our preview i'm gonna make my device an iphone 12 pro just make sure it's a mobile device okay this is our app right now it does not look great we're gonna come down here and we're gonna make a struct called list item and this is going to be of type identifiable i will explain why later we're going to say var id is equal to uuid parentheses what this does is gives each item a unique identifier and it helps with our list logic after that we're going to say var title is equal or title colon of type string and save our subtitle of type string then we're going to say var image of type string that is it okay now we're going to go to our assets now go find your five images that you just saved and drag those into your assets folder so now what you want to do once your images are in here unless you got incredibly lucky they are probably named something crazy so we are going to need to remember these names and we don't want to have to jump back and forth so i'm going to call this one monkeys i'm going to call this one mouse goat it's a crazy looking goat with cool horns uh dolphin plural and then this is actually a turtle this is my favorite picture i chose it's super deep in the water and the sun right sunlight is shining through i think that is awesome okay we have our images now we're going to come up here and let's erase our padding in our hello world and let's just use our text as an example right now hit resume if you have the chance to we just want to make sure this is still rolling it's making me do it again and i don't know why it's like hey are you filming a video time to screw up okay command click text we are going to embed this in a list just hit enter zero through five all that is doing is automatically creating a list that allows us five items okay so now what we're going to do we're going to come below our list item struct and we're going to say var uh i'm going to say animals you say you know photos you say list items you say whatever you want mine are animals so i'm calling them animals use what makes sense for you so var animals is equal to this array and now we are going to utilize our list item we're not going to choose the id i'm just going to do the one with title subtitle and image so title dolphins subtitle look how cool they are swimming image we're just going to use a string dolphins give myself a little more room here you need to use a comma for everyone but the last one we are going to fast forward this part so it doesn't take too much time but go ahead and fill in the rest of your array with your data now so we have this it's called an array but it's basically a collection of list items so we built our list item struct and now we have a collection of them so instead of zero through five we can just fill in this list and put animals instead of item we're gonna say animal in and then for the text now we can do get inside the uh resume jeez okay we can get inside our quotation marks and go forward slash parentheses this is called string interpolation string interpolation i believe that's how it's pronounced and we're going to say animal.net title now you see how it's looping through our collection cool right so what we are going to do is make this look better we're going to do dot font dot system size let's make this 18 weight bold design and we can delete design okay so bold is our title and then we're going to do another text parenthesis forward slash parentheses open we're going to say animal dot subtitle close parentheses quotes close the text parentheses i like to space these out because things like that bother me we have a problem i forgot to embed this in a v stack so go to your top text embed in a v stack move your subtitle text inside of that cool errors go away we don't want it centered so we're going to come up to our v stack and say alignment dot leading i'm going to say spacing 10 cool and then where do we want our image okay now what i want to do i'm going to embed this v-stack in a h-stack and we are going to put a spacer in between that actually i'm going to show you without the spacer first we're going to go image animal dot image get our preview loading again it is giant we have to fix that we're going to go resizable and then we're going to say dot frame uh width is equal to 50 height 50. okay fear not this is what i wanted to show you without the spacer okay i'm gonna put spacer before image outside of our v stack now it's all to the right cool right let's also round these corners so we're gonna go under our image dot clip shape uh rounded rectangle corner radius is five dot continuous cool that looks better cool let's make these a hundred i like our images let's yeah let's show them off yeah let me see my dolphins okay these are our list items i don't think we realize how often we use uh what used to be you know table views i mean you still use table views in ui kit but with swift uis is called list okay so now what we're going to do we're going to come up to our list command click list embed in some type of stack it doesn't matter which one and we're going to change that name to navigation view what this does is create enough space for the default large title and since mine is animals i'm going to come to the closing bracket on my list and go dot navigation bar title animals so now do you see how we have our large title but if i scroll it changes to what is called inline and i if i wanted i could actually change this to um display mode my style i knew i was close uh if i just wanted to stay like that i could do that but i like the large title um yeah so what we are going to do now create some space here and then we are going to go to our age stack and we're going to do the same approach of just embedding in something and we're going to say navigation link parentheses destination colon we're going to say detail view parentheses okay it's gonna say hey we don't know what detail view is and we're like hey i know go to new file swift ui view i did that by uh right clicking or you can do um command click or command n for new file we're going to call this detail view and all we're going to have on this screen okay we're going to just put uh embed this in a v-stack we're going to do a giant image here yes so what we have to do first we're going to say var animal or whatever yours is of type list item that will be the same so it does have to be of type list item but say you did people make this you know person or whatever makes sense for your project so image we're gonna have animal dot image we need to set a default value for our preview so what i'm going to do is i'm just going to access my animals array and i'm going to go brackets 0 just to call our first one to see what it would look like this is a common thing in swift ui come on let's set a default value up here maybe that's what's holding us back animals zero is uh or the first element in our array there he is close up shot then we're gonna go under image we're gonna say dot resizable then we're gonna go dot frame uh width is equal to 350 height let's call it 250 300 dot clip shape rounded rectangle corner radius 20. style continuous and then we're going to do spacer in between that and the text no we are not it's too far we're gonna set our that doesn't matter actually for this text we go animal dot title should have made that called name and then below it we're gonna say text animal dot subtitle here we're going to make a font dot title which just applies a title type and then for this one we're going to say dot font dot caption i don't like that we're going to say dot sub head sub headline yeah look how cool they are swimming i would like to align this to the left so we're going to go alignment on our vstack.leading okay i understand that this is not the most aesthetically pleasing screen this is just a demo uh i think my last video was really good looking so if you're neat if you're in need for some good looking screens go watch the glass morphism tutorial okay but we're going to come back to our uh our contentview.swift and now since we hooked up the navigation link we have detail view but what we have to do is pass animal to our animal variable so this detail view needs an animal and we are getting animal from our loop so we're setting this equal to something that is not the first one so what we're going to do is test this bad boy out just hit play cool looking go check out his horns we can click him there he is you know and we can we can move all of this up if we want we can go spacer at the bottom so let's try that let's click the monkeys now that looks better my preview is like my worst enemy right now this is nutso cute mouse why does everyone hate mice lol and that's pretty much it and there are ways to customize you know the appearance of this back button i showed you one of the ways to you know set if you were just to want to set it as the inline display mode we can uh we can do a lot here okay so we have the basics down i'm trying to think what else to show you without getting too complex so let's go ahead and show the modal pop-up and we're going to do that on our detail view so go under your image and hit dot on tap gesture you guessed it that is triggered when you tap on the image so we're going to come up here and go at state var pop-up or show pop-up is equal to false and on tap gesture we're going to say show pop-up dot toggle let's uh let's make a new swift ui view pop-up view this can just say hello world for the sake of demonstration we don't need anything on that screen and then under our ontap gesture what we're doing is uh setting this to true then false it's toggling it but under that we're going to say dot sheet is presented we're going to go dollar sign show pop up content pop-up view parentheses so what happens here word of advice also when you use modal pop-ups it's meant to be the last step you don't want to be able to navigate using the modal pop-up it's something that you should see your user should see it and then they swipe it down or hit save or hit close something along those lines where that's not being used to navigate to a different screen we're going to tap and you see it has this behavior of a bottom sheet that is how easy it is to just show that modal presentation cool right we don't see our nav button here do not panic that is because we are on the detail view just demoing this screen so if i were to go back to my content view with my list hit resume i mean this is comical at this point with this okay if you click around enough you'll figure it out we'll go to sea turtle we have our back button here but if i tap sea turtle you know maybe this would be a cool idea to like have more info about whatever animal you have here this is usually you know something to display more data but at the end of the day you want your user swiping down to dismiss that so there it is guys you know list navigation very simple i know i didn't get into this like super a ton of details but uh i just want to demonstrate like this is not a lot of code swift ui makes this so easy and there are probably ways that i can improve this code too so uh if you're using you know ui kit or doing all this in code using ui kit elements or zip files or storyboards then like this takes a lot longer and it's a lot more tedious of a process so one of the many reasons i love swift ui um that's pretty much it if you have any questions go ahead and comment uh once again if you liked the video hit the thumbs up subscribe to my channel i will be uploading uh all kinds of stuff from tutorials too you know i think i got some some cool ideas in the works where i might uh start redesigning some popular apps i i have my own apps that i'm also building so i'll document the process of those later on and yeah you know this is a learning experience for me so let me know what you guys think also i want to add that i will be posting the github repo and i will be sharing this code if you guys want to download the source code compare it to your own if you're running into errors or anything you can comment for that and i'll get back to you as soon as i can but you'll be able to compare your code with mine using the github link in the description thank you you

Channel: Logan Koshenka

Views: 789

Keywords: swiftui, swift ui, swiftui navigation, swiftui navigationview, swiftui navigationlink, swiftui navigation bar, swift ui navigation, xcode, swift ui tutorial, swiftui tutorial, swiftui navigation view, swiftui modal, swift tutorial, swift navigation bar, swift ui navigation view, swiftui list, swift ui list, swift ui navigation link

Id: BqbrVNtZIqw

Length: 20min 45sec (1245 seconds)

Published: Wed May 12 2021