SwiftUI Basics Tutorial

this video is a compilation of the first eight videos from my swift ui fundamentals course where we build this weather app ui and it's meant to be an introduction to the world of swift ui and i have time stamped each video so you can skip around as you please for example the first video is like the introduction to the course the overview of what you're going to learn so if you want to skip that and get right into building the weather app that's cool but again this is the free preview of my course swift ui fundamentals so if you like what you learn you want to learn more check out the course at sean island.teachable.com all right let's get started welcome to swift ui fundamentals in this video i'm going to talk about you know what we're going to learn in this course and how we're going to learn it and kind of the overall flow first up this was designed for people who at least have the basics of swift down you don't have to be a swift pro but but at least know the basics and if you don't know the basics check out ios dev launch pad we go over all that so this course is meant to build your foundation in swift ui and focus on what i believe is the core skill and that is moving data around you know swift ui is declarative which is quite different from the imperative programming paradigm we all may be used to with ui kit right it kind of flips it on its head you have to completely think about things differently right so it's a mindset shift and that mindset shift and properly passing data between views like that's what i want to focus on in this course like yes swift ui can do a lot of awesome animations crazy cool ui stuff but again i want to focus on the foundation of building apps and to me that is passing the data and getting your app to act how you want it to right i say that all the time when i first learned swift ui getting my app to look like i wanted to right with just building the ui to me that was like the easy part where i ran into frustrations and headaches was passing data and getting my app to act how i wanted so that's what i want to be the focus of this app fun cool ui and animations that can and will come later all right so how is this course going to work let's talk about the flow uh overall we're going to build four apps it's going to start off pretty easy but we're going to progressively get more difficult and build over time to where the final app is a bit complex you know for a foundational uh course and i'm going to introduce concepts slowly at first and we'll get a lot of practice you know building with them using them because as you know i'm a big believer in like practice repetition you don't just read one article or watch one video on a topic and then you know it you gotta practice practice practice but we do start off pretty easy so if you do have a little bit of swift ui experience and after the first two apps you're like oh man this is super basic just just wait just wait but uh okay let's talk about those apps so the first one just the ui of a weather app this is the introduction to the course so we start off super basic i want to get you familiar with the foundational tools and just building ui in swift ui after that introductory app i go into more of an explainer session some talking head you know graphical videos where i explain you know imperative versus declarative and the differences i i talk about how swifty ui updates its views in the view tree hierarchy talk about view modifiers view builders right we kind of dive into the core concepts of explaining but then we get back to code in the next app uh it's about apple frameworks where as you can see there's a grid you can tap on a framework learn more about the framework so not only will you learn how to build this kind of app but hopefully you'll get inspired by reading about these frameworks and maybe get your next big app idea but in that app as you can see we're adding a couple screens we're starting to dip our toes into passing data from screen to screen like i said we ease into it and get progressively more difficult now the third app all about the barcode scanner this really focuses on ui kit integration with swift ui right because you know swift ui is pretty new a lot of stuff still isn't built in such as the camera like we see in this app and this app focuses on passing data from ui kit to swift ui when you have to integrate a ui kit that's using ui view controller representable in coordinators that pass all the data so the whole point of this app is to get you used to using that because if you're building apps in swift ui it's very likely that you're going to have to go to ui kit for some things and finally we finish off with the more complex app well we'll complex for a foundational course where you can order appetizers you know see a detail view of it add it to your card or your order and then place your order uh to be clear i don't want to have any misconceptions we're not implementing like stripe and actual payment processing that's a that's a bit outside the scope of this course but i don't want there to be any like wrong expectations now this app you know besides what you see we're going to deal with network calls in this app so we're going to do proper error handling alerts you know some advanced animations so again this is where it gets a little more complex you know above what we did in the previous apps and during each of these apps we're going to be refactoring along the way we're going to be talking about project organization and i'll be providing various levels of challenges after each app uh if you do want to push yourself further and further to build upon the base you know of what these apps give you after we build the four apps we're gonna have a review section and i think this is gonna be a very valuable section because it's part of the learning process right you're gonna hear me talk about it we're gonna get a chance to build and play with it a couple times right but once you've seen it in action you've actually touched it and then now if you go back and review it i feel like that's going to really solidify your knowledge and just really drive it into your head and then the last section is our optimization section and i did this in one of my previous courses github followers and a lot of people really loved this section and what this is is we go back we fix some mistakes because everyone makes mistakes and we also go back and like optimize and make our code better maybe rebuild things a different way it's a lot of the stuff that would have been too deep down a specific rabbit hole to teach you know when we built it right because i wanted to keep the the lesson focused but here we get a chance to go back and maybe spend one whole video on one little thread that i want to pull on uh to teach a little bit more and now i want to talk about future updates because of course swift ui is going to change so depending on how much it changes right if it's a small change i'll probably leave a note in the description of the video to let people know what's going on and i'll probably do a video at the beginning of the course you know when ios 15 comes out maybe like uh what's new in ios 15 that affects our our projects so you know up front like hey this is going to be different or if something crazy drastically changes and breaks one of my videos like i'll re-record the video or the section right so it kind of depends on the severity of the change on how i'm going to handle it but i do want to keep this course up to date that is going to be a priority of mine and before i give my final disclaimer i want to mention the slack channel access you get with this course you get this with all my courses this is a place for anybody taking my courses to kind of come together have conversations in real time you can meet developers from all over the world other aspiring ios developers start building your network you know get help answering your questions help others it's just a place you know for developers to come together and chat and help each other so you do get access to that and then lastly my final disclaimer the only thing i can promise you is that swift ui is going to change right so don't treat this course as like the final end-all be-all of your swift foundation right i want to give you those foundational skills so that you can easily grow and evolve and adapt as this world of swifty y changes and evolves itself so just keep that in mind things are probably going to change but hopefully you leave this course with a solid foundation so you can change with it over the next few videos i'm going to introduce you to swift ui by building this weather app well at least the ui for the weather app now as i said in the course overview if you remember the purpose of this app is to not give you the full deep explanations all right away the purpose of building this app is the show you swift ui in action give you a light introduction to it so as i'm going through this app if you're not quite following everything or i'm moving too quickly that is by design because again i want you to see it because when i give deeper explanations in future videos i think that will make it easier for you to understand what i'm talking about right if i just dove right into those deep explanations right away and you hadn't seen it in action it's going to be like confusing but if you've seen it in action then i give the deep explanation i think you'll be able to connect those two and actually understand what's going on not to mention this is going to be the first of a couple apps we build in the course and we're going to be doing all this a lot you're going to get plenty of practice and repetition so again like i said in the intro the flow of this course over those apps is the first that may be confusing the second app you're gonna start to get it by the third and fourth app hopefully you're typing the stuff out before i even say it that's the goal that's what i want out of this course so that's my disclaimer and again try to refrain from asking like specific questions on these videos in the comments because i'm very likely going to answer those in the videos after we build this weather up again the whole point of this is just for you to see it in action all right let's start building so open up xcode create a new xcode project and i'll make this full screen here no siri not you okay so right away you see you have a couple options when building a swift ui app like just an app well you can also click multi-platform but here's the thing in the early xcode 12 betas when you clicked on multi-platform which would give you mac os ios ipad os that stuff you used to be able to create an app here well in the release of xcode 12 it's gone and allegedly it's back in the xcode 12.2 beta so if you're doing this later you might see it in xcode 12.2 and beyond but but you should be able to create a multi-platform app that's one of the features of swift ui so for now because i am on xcode 12.1 just click app for ios and hit next and i'm going to name this swift ui dash weather so you can name it whatever you want that's what i'm going to name it and make sure you have swift ui as the interface checked in the lifecycle swift ui app don't worry about core data or test we're not there yet go ahead and hit next and save it wherever you like i'm gonna put it on my desktop for now and here we are this is what a swift ui xcode interface looks like now your preview may not be up and running like mine isn't so hit resume and this is kind of what is uh nice about swift ui is you get you know this hot reloading now in theory that's what you're supposed to get oftentimes the preview acts kind of finicky sometimes it's slow as you're seeing this is on an imac pro still going a little slow so to be quite honest when i'm actually building my apps in swift ui i'm like rarely using the preview and only for very specific like screens but again swift ui is so new i expect previews to improve a lot over the coming years uh first of all we don't want an ipad touch seventh generation let's go to the iphone 12 pro the new hotness okay here we are and i'm gonna you can adjust the size here now what i'm gonna show you here is how you can visually edit code but i'm only showing this to you out of what i feel is kind of an obligation to at least let you know it exists because i never use it i recommend you don't use it because once you learn how to just like write the code it's 10 times faster it can be so much more productive but i want to show you this exists and maybe it'll help you when you're first learning but i i don't recommend getting used to doing this and making this like the way you do things but before i dive into that let's actually break down what's going on over here in our content view so swift ui is all about views i'll dive more into that later but every view you create is going to return a body and it's going to return a view so right now our content view has a property called body and it's returning text hello world and that's what you see here so that's what's going on right now and of course we're going to build a lot more code in there to to expand on that but let me get back to this preview real quick just to show you this so i can get it out of the way so if you do command shift l you can kind of pull up your modifiers now more on modifiers later but it's kind of how you customize a view again we're going to do a deep dive into modifiers with its own dedicated video so right now just know this is how you kind of customize a view or drag a view on there so let's say we want a button below our hello world text over here well if you're using the preview you can just literally drag that button and you can see where you put it you can put it below it above it to the left of it to the right of it now this is where stacks come in and stacks are very fundamental to swift ui we're going to be using them so much they're going to be second nature by the time we may even be done with this first video but definitely by the time we're done with the course stacks are going to be second nature to you so if you're a little confused now don't worry but you can see the little message at the bottom adding a button to the new horizontal stack along with existing text and if i move it to the bottom it says adding a button to a vertical stack along with existing text so let's add it to the bottom and create a vertical stack or a v stack so now what you see happen is the button is in this vertical stack which is that red outline that's the frame of it uh so you got the hello world text and a button now the cool thing kind of cool right you dropped it on your preview and look what happened in the code the code automatically popped in it popped up a v stack with here's our text that we had and then i put a button below in the v stack so that is pretty cool i'm not gonna lie when you see just drag and dropping and it makes the code for you you're gonna think wow that's an awesome way to do it that's great it's great for like little small stuff it's cool yeah trust me you're going to be just wanting to write code more often than not all right let's do this one more time command shift l to pull up your library and let's drop another text into this except now we're not going to uh drop a blue so i could drop it here to just add it into the v stack that we have the vertical stack but let's try something different let's put it to the left to create a new uh horizontal stack an h stack right so i drop it there boom see placeholder for the text and then so here's the horizontal stack right you've got the placeholder on the left and then our v stack so you can like nest your stacks as you're seeing so the v stack of hello world and button is now on the right of the hdac and you can see this here right the whole thing is wrapped in this hdac and then to the left of the h stack is the text and then we have our v stack here to the right so again you can see you can nest h stacks and v stacks now that's all i'm going to show you for the drag and drop again because i don't want to i don't recommend using that but i felt like i needed to show that off now let's take a look at the design and i'm going to break down the hdacs the v-stacks and the z-stacks i haven't talked about that yet of this design to hopefully you know make you start understanding how these stacks work because again this is like fundamental to swift ui you're going to be writing a million stacks throughout your career so looking at the design the elements on the screen that are on top of the background color is one big v stack right so as you can see in this outline the the city name cuppertino uh the icons everything is within a v stack but like i mentioned you can nest other stacks in that for example the weather icon that we have the cloud and the sun and the 76 degrees like that in and of itself is its own v-stack nested within the overall v-stack and down here you can see we have individual stacks right of the the day of the week like tuesday the weather icon and the temperature that in and of itself is a v stack but it's nested within the overall h stack that is the days of the week going across and again that itself is nested within the overall v stack and then of course we have the button at the bottom of the v stack there so hopefully that gives you an example of you know how these stacks works the h stacks and the v stacks and again we're going to build this so you're going to get more in-depth knowledge but that's it on the surface and then the stack that i haven't talked about is that is kind of like vertical layers right so for example the v stack that holds all the elements is on top of our background view which is the color gradient right so that is the z stack and that's kind of like vertical view hierarchy if you will so that covers the three main types of stacks again we're gonna build this so you're gonna get more knowledge and we're gonna build a bunch more apps with them so let's get to it all right so back what we were messing with before one thing you can do when you're not using the the drag and drop preview is get rid of this pane on the right that'll give you more room i like to make my my canvas a little smaller if you want the minimap cool i tend to not not i think the mini map super cool i just never use it so i clicked it off because again i like screen real estate but let me show you something real quick and this is why i prefer the code way like i can go from an h stack to a v stack like in a second just by going deleting h to v and now you can see uh it changed so again i find code so much so much quicker and again this v stack let's change it to an hdac literally by changing one letter in your code it changes the layout of your screen so that is the power of like doing it via code so one little one little tip there that's why i like that so on that note uh we're gonna have a remember i said the whole thing is a z stack so i'm gonna make that a z stack and you can see it put everything on top of each other not what we want so let's delete all of this here because the first thing we're going to build in our z stack is our background and if you look at the design again look at the background it's a nice gradient color for the background so the first thing we want to do is actually make a color now a color is a view like everything in swift ui is a view again i'll be saying that all throughout the course so let's do color.blue right bam okay so you see in the color it fills the entire space available which is everything but the safe area but you notice on our designs like we we don't we don't want to respect the safe area for a background we want to fill the whole view how we can fix that is by adding a modifier onto our color to say dot edges ignoring safe area all as you can see in our preview that fills up the whole phone and we put that on our color view because that's the view we want to ignore uh the safe area when we actually put our content in there we want to respect the safe area for that but our background ignore the safe area now that demonstrates color how it fills everything up however our designs call for a gradient not not just a solid color for that we can create a linear gradient so as you type linear gradient there you go let's get our initializer here you can see it takes in a gradient a start point and an endpoint so for well there it gives us default values there so you can start to see how quickly that comes in so for our gradient here we want an array of colors so let's do um we want dot blue and then dot white right because this is kind of like like the blue sky uh thing that we're looking for not blue blue blue white all right so you see blue white now starting point is leading and trailing so you can see the gradient starts in the leading which is on the left here and it goes to the right however we want uh dot and you can just hit dot to see all your options here we want top leading because we kind of want it to come down from the right right and then dot bottom trailing is what we want we want kind of want that angle there right so there you go so it starts starts in the top left goes down to the bottom right and we get kind of that like blue sky uh look now gradients are nice and flexible right if you wanted to get kind of crazy with it uh right we have an array of colors here you can add as many colors to this array uh that you want and again i don't want to get too wrapped up in like every detail about the ui but i thought this was pretty cool to share so i can do blue dot red that white i guess that's pretty patriotic didn't even mean to do that but you know let's add a set of green in there right just to really drive the point home here green comma not semi-colon comma damn mics in the way so you can see you can get kind of crazy with the gradients just by adding colors to the array setting a start point setting an endpoint and swift ui does the rest so that's just one little taste of like kind of the powerful stuff swift ui can do and there's so much of that and i did dabble in it here but remember the point of this course is to really focus on like the passing of the data and understanding how swift ui works you could do like seven courses on all the cool ui stuff you can do but that's not the focus of this one so that's as far as we're gonna go on like playing around with with cool stuff at least at least right away so we just want the blue and the white for our gradient and we're actually gonna create a custom color for light blue because the white is like too much but that's going to come later and quick note you'll notice in swift ui a lot of times has very long like initializers so a style that i've adopted and many people already did this but a style that i've adopted on the long ones is to start uh basically you know lining up my my parameters vertically like that um for for my views and you'll see me do that throughout the course and it really depends on how long you know the initializer is so as you can see our background gradient is set up in our z stack so the next thing we need to do is start building that overall v stack on top of our background linear gradient and we're going to do that in the next video we left off last video getting our background gradient all set up well now we're going to start the process of building the rest of the ui elements to eventually get to the final product that you see there and we're just going to go top to bottom so first let's start with the city name that we want to put in there okay so back to our code as a recap we have our z stack with a linear gradient now remember z stack is kind of like vertical uh you know view hierarchy layers uh if you will remember we said all the ui elements are held within one v stack back when i went over that last video so here this is where now we're going to start typing the code not dragging and dropping go and start typing v uh stack get auto complete here uh open and close braces there we go there's our v stack you don't see it yet because nothing's in there now we want the city name right so that is a text text is a view that takes in a string so we want to do cupertino california so apple's headquarters now you'll notice it is dead center of the screen no styling that's not where we want it that's not what we want it to look like so first up let's get it looking how we want right and that comes with modifiers again more on modifiers later but one thing to note about modifiers as you're adding multiples now you may be used to ui kit where you would say you know uiview.backgroundcolor equals red you're telling that view to make its background color red swift ui is a little different in that every modifier wraps the previous view in another view i know that sounds confusing again we're gonna we're gonna dive into that later so just remember that modifiers are a whole another view wrapping the existing view so when i do font and i do dot system here we go we're going to get size we'll do 32 font weight medium and design is default so that just wrapped the text view in another view you know with the font and the system stuff same thing when i do foreground color right we're going to make it white dot foreground color dot white right there you go now you're seeing it update so again it's getting wrapped in another view and the reason that is important and you'll understand that the more you get practice as we go through the course is the order of the modifier matters now if i do dot background color and do color dot red you can see the background is red now watch okay so that is a view now i'm going to wrap that view in a frame all right so let's do dot frame because you can like define the frame and we'll just do like a a 200 by 200 frame so now you see on my preview here you can see the red outline that represents my frame that's just because i have this line highlighted by the way like that red outline is not going to be there let me highlight the the text view or let me highlight the linear gradient right so you can see that's what that red outline means on the preview whatever you have selected it's going to show you kind of the the details of it so by clicking on the text you can see i have a 200 by 200 frame however my background color didn't fill the frame because i put the frame on after i did the background color right we wrapped it in a frame but it already had its background color so that was a very simple example but the main thing to take away here and again we're going to get plenty of practice with this is that the order of your modifiers matter because your modifiers are basically wrapping the existing view in another view and the reason swift ui can do that is because views are so cheap in swift ui they get destroyed and recreated all the time more on that in more more detail right i don't want to get too into the weeds right now but i wanted to point out the order of modifiers matter and what modifiers are really doing okay so let's delete that example here and now we have our our text looking like we want it to right that cuppertino you know california it's not the location we want and let's talk about why because a v stack right is only going to take up as much space as it needs if i click on the v stack to highlight it in red on my preview look how big my v stack is only as large as the text is right so if you want that v stack to stretch there's a view called a spacer right so if i put a spacer below the text it's going to push it all the way to the top so what that means is basically the v-stack now is the whole length of the screen essentially however the text is only taking up that top part and the rest of the space below the text is the spacer so strategically using spacers to move your ui around is often how you lay out your ui and you can get real custom with it you can set a custom height or width on the spacer more on that later just know that spacers will kind of like fill the entire space so that's kind of what we want however cuppertino california is hugging the notch a little bit too much so another modifier we can put on text is padding so i can do dot padding uh one this is kind of like a default thing all the way around and now you can see my red outline on the text has some padding in it right it's not it's not hugging the cupertino california text so tightly because it has padding around it so now with that padding our our city name is spaced how we want it right it's not hugging the notch too much and again you can do padding uh 100. okay now look at the padding i added that's not what we want of course but i want to point out that the padding is is flexible you can do padding dot only on the bottom space you know 200 right and you'll see now there's only padding on the bottom so padding is pretty flexible now one thing i want to show you before we end this video um is one thing you'll notice when working with swift ui is that the list of parameters is often very flexible like you just saw that i was able to do top you know dot bottom dot top with a comma like it almost looked like i was making up my own parameters well let me show you why that is if you command click on padding go to jump to definition sure i'm trying to get to the documentation here okay so here we are here's the padding implementation right well what swift ui does a lot not not all the time but you'll see this a lot is it sets default values for its parameters so you can see the edges set is equal to all and the length is equal to nil so when they give default values what that means is if you don't include that parameter it's going to default to the default value of course so you'll see that a lot in swift ui where the you know parameters are often very very flexible and i know that confused me at first i was like wait a minute like i can pretty much write whatever i want in the parameter how do i know what i can and what i can't and then when you dig into the documentation here uh basically it reveals why because they said default values for a lot of things so it's very flexible which i like all right back to our code here so like i said the spacer is filling up uh sometimes you have to hit resume as you see this previews can be finicky sometimes so if you see that resume button make sure you hit it so your previews are up to date um so now like i said the spacer is filling up the whole space obviously we're going to add more uh elements in here with a v stack if you go back to the design now we're going to add our cloud sun icon or whatever weather you want to pick put that icon there and the temperature and that's going to be its own v stack but in order for me to get that nice looking icon like that is an sf symbol so i want to introduce you to sf symbol show you how to download that and get you started using that because we're going to use that in a lot of the apps the rest of the course all right sf symbols well this is sf symbols 2 at the moment maybe it's 3 by the time you're taking this who knows anyway sf symbols were introduced in 2019 kind of when swift ui came out and as you can see here it's just a bunch of built-in uh iconography that apple provides and they are awesome if you haven't used them yet i think you're going to learn to love them we're going to use them throughout the course uh but with the flexibility here so this is like the official developer site this is the human interface guideline site i'll link to both of these in the description but to be honest if you just google sf symbols these are the top two results or click the link whatever you want to do so here's the human interface guidelines on sf symbols so you can see they're nice multi-colored there's 2400 of them uh they're great they're built into xcode free to use if you've ever struggled to find icons for your app you know the struggle that's why these are awesome another cool thing is like they have like font weights attached to them they adapt to dynamic type they're just great and by font weights you can see here right an ultra light version of the icon all the way to like a heavy bold version and everything in between so they're very flexible support dynamic type they're they're awesome i'm so happy apple you know started doing this and again it's only year two in existence and they're already at 2400. i just imagine that they're going to get better and better and better over time for example new in 2020 they announced colored icons before it was just monochrome just one color you could change like the tint color didn't have to be black or white you could make it any color but it was all monochrome well now there's like multi-color icons so that's great um so let me show you how to download it again back to this one the apple developer website not the human interface guidelines if you scroll down a little bit make sure you don't download sf symbols 2 not sf symbols 1.1 because sf symbols 2 has you know 750 new symbols and it got the multi-colored symbols which we're going to use for our cloud right remember the cloud was white the sun was yellow that's an example of a multi-colored sf symbol that we're going to use so once you got that downloaded and you open it up and i made it full screen again here's all 24 hundred icons right and you see the categories on the left but we'll tap on gaming just an example so you've got all these controller icons d-pads buttons transportation all kind of cars planes cool so any topic you want over here click on multi-color you can click there or you can click this little color wheel to get the multi-color now you're gonna see most of mine are red this is because that is my mac accessory color if you haven't i get asked this all the time about my xcode how i made it red if you go into general quick little tip here uh general settings highlight color red accent color red you can pick any color you want watch when i change this to green look now all my icons are green so that means whatever system uh color that the user has that's what's going to show on these multi-colored icons at least the ones that have that so anyway now you can start to see our weather ones that we're going to use here's the cloud and the sun but again play around in sf symbols scroll you can see there's a ton of cool ones literally 2 400 of them so how to use sf symbols we'll get into in the next video i'm going to show you actually how basically you just copy and paste this name right here like doc fill badge dot plus and there's a way to copy paste we'll talk about that um but i wanted to use this video to introduce you to sf symbols show you how to download it and definitely download it don't just watch this video because we're going to be using this uh all throughout the course um so get this downloaded and let's move on to the next video now that we got sf symbols downloaded we're back in our project uh pulling up the design again what we're going to create right now is our v stack with our main uh weather icon and the temperature we're going to focus on that for this video so looking back at our code right we have our overall z stack and then we have our overall v stack which again holds all our elements right now all we have is our text that you see at the top there and our spacer which fills that up so we are going to keep the spacer at the bottom and add another v-stack because the v-stack is going to hold again our sf symbol and our temperature text so an symbol is an image so if we type image and then here's the thing like image has a couple different initializers if you do image name this would be like just an image in your bundle like you would have in your ui kit right where you do ui image named string right that's the same thing here however if we type system name this gives us our uh sf symbols right so now i need a string well what string do i need that's where we need to open up sf symbols to find out so i'm going to tab over to sf symbols and here we are in my multi-colored section again now we're down to the weather again this cloud.sun.fill is what we want so you can either type in that string or if you tap on it and do uh command shift c so just like command c to copy but add a shift in there command shift c to copy that will copy the string and if we command tab back to xcode and do a command v to paste that in there you go cloud sun fill there it is on the right exactly how we want it no it's not so all right so we didn't get multi-color uh we just got this very small you know black icon that's not what we want okay so first let's handle getting the multi-colored so what you need to do there you need to do rendering mode and then pass in dot original that'll give us the multi-color there you go it's still super small as you can barely see probably but at least we got the color combo we're looking for now images when you when you bring them into swift ui you'll notice like if you bring in like an actual image like from your phone or something like that it'll blow up to like its actual size so pretty much all the time you're going to want to make your images resizable put that modifier so now when you do that bam now it's huge because it's filling up all that space uh we don't want that either so we want to put a frame around our image to give it like a fixed size so again down here let's add another modifier to our image dot frame width and height so let's do 180 by 180 and i get asked this all the time when i kind of do tutorials like where'd you come up with those numbers and i'm not doing it on the video but the honest answer is like i i guess the number okay that's too big and i just slowly tweak it over time to dial it in so you're gonna see that a lot throughout the course where i just throw out these numbers just know that it took a lot of trial and error to like dial it into that number um which is nice and swift ui because look i can say hey 180 or 180 or you know 80 by 80 and real quick instantly i can like get a feel for it so again just trial by error so if you don't know these numbers off the top of your head neither did i i just figured it out okay so there's our frame it doesn't quite look right our cloud and sun is more of a landscape type image right it's not a perfectly square aspect ratio and it kind of looks like it's stretching a little bit to fix our square but we don't want to like adjust our frame we want our 180 by 180 because if we go back to sf symbols a lot of these other symbols are a square so we want to keep our frame a square we just want to keep the aspect ratio of the image so there's a modifier we'll put it below resizable dot aspect ratio content mode and we can do dot fit there you go so that keeps the aspect ratio but fits it within our 180 by 180 frame and now you can see that doesn't look like a stretched out image anymore that's that's the image we want so now that we have that we need to add our text again let's stay in the v stack right in our little nested v stack here so now we want a text of again a string to say 76 and if you do option shift eight that'll give you the degree symbol i had to look that up i didn't know that either so as you can see in the text same thing that happened with our image uh it's the black color uh it's small you know it's not exactly how we want it so again let's start adding our modifiers so add our font here now one thing about the way i'm adding font and we're not going to get into this at the moment so i do dot system so when i do system size and weight that is giving me the san francisco font which is like the default apple font and the other thing is this won't support dynamic type we're basically hard coding the font size and one dynamic type is way too much to get into for this initial uh app but two our our city label and our degrees here we want to be really big like they're already big so they don't really need to support dynamic type because they're already huge so we want to make this size 70 right pojo is huge and then dot medium font weight and you can play around with this if you want it super bold if you want it ultra thin you know make make your own play around we can delete that uh because again that's one of those default value parameters that i talked about with padding so again we have our 76 degrees looking how we want it we just don't have the color so again dot foreground color dot white there we go okay so we're starting to see this come together a little bit now one final touch i want to put on this uh v stack that has our our icon and our our temperature in it is you notice there's a lot of space in between there so there's a couple ways we can do this right we could add a spacer here with a very small frame in between uh you know maybe we could add some padding with a negative number that's a little hacky uh however v stacks also have parameters so do h stacks and all that stuff um so if i do the initializer here you can see i have alignment spacing and content so you can align everything to the left align everything to the right or you know as an example and then we can set a spacing so we're gonna use a spacing uh parameter here and again because we can we can pick and choose parameters because they're all default values on the other ones so spacing let's make an eight again i just kind of dialed this in and you saw the 76 get pushed up a little bit closer uh to the cloud and that looks about right and the reason it's not even a little closer is because remember the cloud in the sun is kind of like a landscape right we had to make it aspect fit so our frame of our image if you look is actually more right so when we put a square image in there it's actually going to fill it up so something to keep in mind is some images may not all have the right aspect ratio so for example and i just have this memorized to be honest with you i can do sun dot uh max dot phil that'll give me the big sun and it's always good to like test your ui with multiple images if they're dynamic like these so now we can see when it's like full bright sun maybe it's a little cramped maybe i want to add spacing to 10 on my v stack there to bump it out a little bit you can dial this in let's go back to cloud.sun.fill and there you go so again something to think about with sf symbols is they may not all have the same aspect ratio when you use them okay now before i move on to the next video i want to point something out right here's our overall z stack uh you can see that we're adding all these elements right the text the the image here it's starting to grow a little bit and you can imagine as we add our h stack with all the other v v-stack views right that you see on the design here we add our button this could get a bit unruly now in later videos of this weather app i'm going to go back and refactor and show you another cool thing about swift ui is how you can really structure your code and make your view very readable right because you can imagine if this was much longer it'd be kind of hard to read there's a lot going on we're going to fix that in a future video but i'm going to lay out all the ui first so you can see what it's like when it's all laid out and then we're going to refactor it all right on to the next one in this video we're going to build this h stack of day views whatever you want to call it that has each individual day with the different weather icons but we're going to start this video with your very first challenge i know it's a little early we're just getting started but it's very similar to what we just did so the challenge here and just pause the video real quick uh is to create this v stack that has the the day of the week at the top uh you know the icon in the middle and then the temperature at the bottom and like i said just pause the video real quick because i'm going to get right into actually building it together you can check your answer then or if you don't want to do the challenge just we'll go ahead but i'm going to be issuing challenges like this all throughout the course and at the end of each app i'm going to give you a kind of a list of things that you could do to potentially you know take this app further if you want to continue your learning and continue challenging yourself this is your last chance to pause i'm moving on three two one all right let's go so like i said we're building this uh h stack of all these individual days so again back to our structure of our screen right we have the z stack with the background of the color on top of that color background we have our overall v stack that holds you know all of our items within that we have our city text and then we have our v stack that is our icon and temperature so now we want to add an h stack down here for these days so again h stack okay cool but now remember within uh that h stack we're gonna have five individual v stacks so let's create our first one and you'll see we'll just end up copying and pasting a lot before we refactor we're gonna refactor this but we'll just do uh our v stack here and uh again remember it's it's a text at the top because it's our days of the week so let's just kind of build out the rudimentary version here uh first so we'll say tuesday and then below that is our image right because this is our ss symbol same thing that we have up here except you know let's just copy and paste this you'll see this happen a lot in swift ui actually so we'll copy and paste that and now our frame isn't going to be 180 by 180 right that's huge in fact our frame is going to be 40 by 40 here now you may already be seeing how we could potentially reuse these views right because it was the same thing as this uh image up here however the frame is just different so you can imagine we could refactor this into its own view and just pass in our frame size and then we could reuse it and resize it however we like you know we may do that later but that's something you may see as this code gets repetitive uh same thing here with our text of the temperature again we're going to copy and paste that down here the difference here is our font font is not going to be 70. here it's going to be 28. so there you go so you can see it kind of starting to come together however you know we copied and pasted the image in the text because we'd already built that we hadn't built our day of the week yet so we're going to format this ourselves so let's do that here we have our font again we'll do dot system size 16 and like i said i'm kind of hard coding.medium our fonts right now if you want to support dynamic type uh you know you're not going to be hard coding this and we'll give it the dot foreground color of dot white and again back to kind of this idea of refactoring you can see a lot of the text we use it has the same font weight the same foreground color the same font the only difference is a size of 16. so you can see how you can make a custom text view that takes in a parameter of just the size and now you have this white medium you know font size text that you can use all throughout your app where you just pass in a font size all right so we have our v stack here built which is the start of our hdac that's just one now what i could do is literally do that copy and paste this five times but because our file's already getting long and to be quite honest my font's got to be big so it's really hard to navigate around we're actually going to refactor this part right now we'll refactor the rest of the file in a later video but in order to not copy and paste this chunk five times let's let's do that now so one cool thing you can do here is if you command click on the v stack you can do you see you get a bunch of different options right embed and all this stuff here let's focus on the extract sub view so it kind of helps you refactor so we're going to hit extract sub view and now you see i get a struct down here below the content view so this is own standalone thing if we wanted to we could put this in its own file separate we're not going to do that right now but we could if we wanted to and it gives it the name extracted view because it doesn't know what we want to name it so let's call this weather day view now let's look here remember pretty much everything in swift is a view so whether dayview has a variable called body and it returns a view like kind of drill that into your brain we're going to be talking about that a lot now to make this reusable we have to pass in a couple variables so let's just look at this weather day view by itself and see what we need okay well the day of the week needs to be passed in right that's it's not always going to be tuesday so let's create that variable here var day of week and that's going to be a string so now that we have that we can replace tuesday with day of week and then we're going to need the system name because not every day is going to be cloudy sunny right maybe it's rainy maybe it's windy so we're going to pass in the image name so var image name call that a string or it is a string not call it a string and instead of that we'll pass in image name and you're gonna see how we use this how we're gonna have to pass in uh this information and then we're also gonna need the temperature and that is also a string but actually you know what we're gonna even though we're not gonna use it like this in um in this app fully let's actually make this uh an int and then that way because like if we were getting this back from an api i don't know maybe it comes back as a string but most you know it's probably going to be an int if you have like temperature using or somewhere in your database so here we can do the instead of 76 degrees we can do string interpolation based on temperature that we pass in right we're going to pass in an integer but we're going to convert it to a string here so now we have our reusable weather day view so now when i create a weather day view i have to pass in day of the week i have to pass an image name and i have to pass in temperature so let's go ahead and make five weather day views up here on extracted view so we'll do weather day view it's going to take in as you can see and get that autocomplete back day of week image name and temperature so again day of week we'll start off with tues tuesday for this one image string for now let's just do the same that we have up here the cloud sun fill we'll go back and like make this some variety with temperatures but we're just kind of testing this and getting our you know the structure of our view in place and like i said sometimes the parameters can get long uh i'd like to put return there now if your parameters are getting like four five six seven things you can refactor that parameter it takes or all the properties it takes in into its own you know object that you can create elsewhere and just pass into one object so there's a little bit of a balancing act here usually three or four parameters i start to feel weird about anything over four i definitely want to refactor that so i'm not passing in like 10 different things that's just personal code style preference you don't necessarily have to do that so again let's say the temperature is 74 that we pass in so let's hit resume up here again sometimes your preview will stop and you can see on our v stack here we have tuesday and 74 degrees with the same cloud sun fill that we did so now let's copy and paste this five times and again if we had like a data model that had our days in an array we could actually do this h stack you know by passing in an array that would parse out all that data we don't have that currently so we're going to kind of do it the the long way here uh so again here's our hdac with our five weather day views now like i said we just got the initial structure but it's not quite right it feels cramped up against uh the 76 degrees so in between our v stack here which is our main kind of image that you see here we can put a spacer to push that down and remember spacer is going to push it all the way to the bottom so we're going to do something here right so well pushed it down it didn't push it all the way down to the bottom because i forgot we have another spacer down here right so you can see the spacer is filling up the bottom and the spacer here is above that horizontal h stack right so you can see it kind of puts it in the middle so that's the power of spacers kind of like evening things out um the other thing here is you kind of notice they're kind of cramped together maybe so just like v stack had the spacer or spacing um parameter here so does an h stack i don't know let's just play around again this is how i come up with these numbers let's try 10. there you go spread it out to 10. man that's a little strike 20. oh not 200 let's see 200 is a bit much okay 20 looks about right all right so we're getting there it's not quite perfect but you can start to see it take shape before we mess with it too much let's let's kind of get our individual data in there so let's keep tuesday the same because right monday and tuesday are probably going to be similar let's start changing our days of the week so wednesday we'll do this kind of like one property at a time here thursday friday and then saturday right so there's our days of the week going across the top now let's change our icons right we don't want it always to have the same weather like let's look at some different weather and for that let's go back to sf symbols so here we are in sf symbols and you can start to see in feel free to pick any weather you want you don't have to pick exactly what i pick i'm going to go with sun dot max fill command shift c to copy that and we'll go back to xcode here and i'm going to paste that here and you'll see it update like right away so command v bam there you go you see wednesday now sunny i'm gonna make thursday uh windy i don't know what that means so let's go back to symbols uh here's wind and snow yeah let's go wind and snow it's quite drastic changes here uh in this climate so command shift c to copy that back to xcode paste it here there you go a little snow and wind let's see what else we got here in sf symbols um i'm gonna go with this sunset here here command shift c for sunset fill again pick whatever you want you don't have to do what i do but you can kind of see this coming together right there's sunset fill and then it's going to snow on saturday that's that's what we want just flat out snow right it's getting to be that time of year actually you know what let's go that rain's not gonna this is the tricky thing about picking your background color is that rain blue probably won't show show up so uh you know maybe an issue we have to deal with later anyway pick the snow uh come back here to the snowflake come in v there you go now it's snowing on saturday now let's change our temperatures just to kind of reflect that it's going to be really hot on wednesday let's say 88 degrees fahrenheit for those in the us here thursday is windy it's going to cool down to 55. friday it's going to sunset we'll say it's 60 right and if it's snowing on saturday man it's down to like 25 degrees quite a drastic change but you can see our weather app is now starting to take shape one thing you may notice is that we picked all the way back in the beginning right we picked white for our uh array well now you can see that white is starting to clash with the white of our text it makes it kind of hard to read we can create a custom color because i think a lighter blue would look better right so in at the top we go from just the normal blue and then at the bottom we go to just a lighter blue so that makes the gradient more subtle so let's talk about how you can create your own custom colors so over here in your xc assets just like you were dropping in an image down at the bottom you can hit the plus button hit color set and then hear your color you any appearance dark appearance this is for you know light mode dark mode let's do any appearance because we're not going to mess with dark mode in this current app and bring out your toolbar on the right if it's gone and here you can pick uh you know your color gamut you can pick whatever color you want here so we're going to try to get a light light blue and i'm not going to have like an exact you know value here you can just see it changing colors up there and pick what you want so we're going to go like very subtle light blue and maybe a little more we can test this out and see it so but the key here is when you click on color you want to name it right so we'll say light blue right you can name it whatever you want and usually in an app you're going to have a lot of custom colors typically so what i like to do is down here hit plus folder create a folder called colors change that colors and drag light blue into colors that's all we're going to make for this one but it's a good habit to get into so back in our content view now we have a color called light blue let's get rid of this side panel we need the we need the screen real estate so instead of color here passing in dot white we can do color and then initialize that you see we can initialize that with a name and here we're going to name it uh light blue whatever you named your color right and let's do a command b to get this to run because right now i look like i put a gray down there oh i gotta hit resume on my preview that's going to get you a lot there you go now it's like a more subtle light blue you can see it going from dark blue to light blue almost has like a teal feel to it but our white colors stand out a little more maybe not much but a little more now if you look at our design our h stack is not way down there right we gotta have room for a button because we're gonna be changing to day to night mode later so instead of a spacer in between our h stack in our uh big weather temperature let's delete that spacer and see what happens so we're going to delete that okay i pushed it up so it's a little cramped obviously right it's cramped right up on there but what we can do is we can put a padding bottom on our v stack here that has our huge icon and huge temperature right that would be this v stack right here so we can do dot padding and pass in specifically on the bottom top bottom and comma we can give it a value again this is where you just kind of dial it in say 40. yeah that looks about right i mean i literally just pulled that out of my butt but uh yeah that looks about right and then you got the bottom down there now of course uh you know if we were going really deep into this and we had to you know account for all the screen sizes super small you got to be a little more thorough but again this is the intro video with baby steps right but now you can see it's starting to be spaced out nicely and we have room for our button which we're going to add in the next video all right so our ui is coming together uh we're going to add the final piece which is the button just the ui of it then we're going to refactor and then in the next video i'm going to introduce state and how we can switch from night mode to dark mode and change things based on state and pass that state in a binding down to another view we're going to start dipping our toes in passing data keeping it very very simple but again it's just the beginning so let's get to it all right so down at the bottom here again remember this whole thing is a v stack right on our design so the last piece of the z stat our v stack i'm sorry vertical stack v is our button so after the spacer that goes uh after our hdac which is right here let me make some some room here we're going to create our button and to do that it's just button and button takes in two pieces right you have this first kind of uh closure here but then there's a second one you do label right so the label there's there's a couple different ways to initialize a button this is what i found is the most common because this first section here is the action it's what the button does right so we'll do right now just print tapped this is where we're going to change from day to night in our ui but for now button tapped label is what the button looks like right and it's kind of different from ui kit where in ui kit you're actually customizing the button itself well here you just kind of get the functionality of a button and you can make it look however you like so for example our button label is actually going to be a text that says change day time you name it whatever you want and you can see we got our button down at the bottom now what do you think we're going to put below that button to get it off the bottom of the screen we don't want it down there right we're going to put a spacer down there so one more uh spacer now something you need to keep in mind when building spacers on a and i'm curious if i'll run into it no uh on a on all these views is a spacer counts as a view and one restriction on purpose of swift ui is that in this whole z stack right in the the overall view you can only have 10 views as soon as you put in your 11th view xcode is going to yell at you and say you know you you can't do this right so if we count ours we have our gradient background view cool we have our v stack right now nested stuff doesn't count right so linear gradient view is one our v stack with our big icon is two uh our h stack with our days is three the spacer's four the button is five and this last baser is six okay so we're well below the ten no big deal but something when i was learning swift ui that i kept running into is you know i'll admit my mistakes right i was over using spacer right you could argue i'm even over using it here too and i was hitting that like 10 view limit a lot so something to keep in mind spacers are great but you can easily kind of overuse them and kind of run into trouble there and real quick the solution to that 10 view limit is to refactor your views right refactor it out into another h stack here refactor it out into its own separate v stack you know so there's easy ways around it through composition so i don't want you to think that like it's super limiting it's to prevent you from creating like swift ui's version of massive view controller and you know you don't create massive view right it forces you to kind of refactor that so anyway now that we put our spacer down here at the bottom you can see our button is up higher but we just have the default button layout right we don't want that we gotta make this look pretty good right so first thing i'm going to do is give it a frame and the width is 280 and this is just 280 by 50 is kind of like my go-to button frame um and you can see the the red outline down there of what it is and to be honest with you that's kind of like the the typical default apple button nowadays right it stretches out the screen it's pretty thick easy to tap um so now you can see our frame let's give our frame a a background color dot background and that's going to be color dot white all right there we go so there's our button and uh let's actually i like a big bold font on my buttons personal preference you don't have to do this one if you don't want to so we'll do font and again do dot system hard coded and we'll say 20 of dot bold and design.default there you go so that nice big chunky bold font and then the the final piece of the puzzle here is rounded corners which you can't see because of this red outline but if i click somewhere else right you see it's a very blocky button again i go for the default apple look gets a little bit of a corner radius so the modifier for corner radius is corner radius corner radius and real quick it may seem like there's there's tons of modifiers and it's going to be impossible to to memorize those however there's a group of them that are very very very common that you're going to like frame font background color corner radius you'll get very familiar with those but you know i could go through modifier by modifier making a video for each one i feel like that's kind of a waste of time you'll you'll learn and you'll pick those up over time as you use them so let's make this corner radius 10 and if i get rid of that red square now you can see our nice apple default looking button so our ui without the whole night mode stuff uh is done great what'd you think how'd that go right not so bad again i went very quick but we're gonna dive into a bunch of different apps we're gonna do this over and over again i'm very confident you have the hang of the ui part uh at the end because if i'm being honest like the ui part the hdac the v stacks like that's kind of the easy and fun part of swift ui it's the passing the data that really trips people up so that's what i want to focus on but anyway ui is done uh let's start refactoring this thing so let's start from the top and my big disclaimer here is swift ui is so early how you structure how you refactor how you compartmentalize your code like a lot of us ios developers are still trying to figure out best practices so i'm kind of figuring out the way i like to organize i will you know give the disclaimer that if you ask me in two years i'll probably be a little different you know best practices will be established however i do think this initial way is a good way to start and then hopefully you and your learnings can evolve as the swift ui best practices evolve you're just super early that that hasn't really been established yet so starting with the linear gradient we're just going to create a view called background view right so command click and you can see the extract sub view down here so now we just have extracted view let's go down to our struct here at the bottom you see we got our extracted view that we just kind of did that we'll i'll do the next one manually so you can see how both work because to be honest with you sometimes that extract sub view is a little wonky and it doesn't work all the time so i usually end up doing it manually anyway but i wanted to show you that so we'll probably do the rest of them manually but let's call this background view here and okay let's talk about what we want to pass in here because if you look at the design here night mode has a different gradient so we want to be able to pass in the different colors right so uh we want to pass in you know blue and light blue or whatever the colors we need so we probably need variables here right so var uh call it top color and that is a color that we pass in and let's call var bottom color and that's a color that we pass in and then let's replace this with bottom color comma or i'm sorry top color top color goes first top color comma bottom color there you go so now that view is refactored and we will now replace you know all that up here with instead of extracted view let's call it background view and i'm going to tell you why here as soon as i'm done with this uh why this is helpful and makes things more readable here okay looks like i lost my my autocomplete here let's see what's going on with background view um okay i'm silly mistake here this is the problem when you're kind of like talking while coding so i put variables inside the variable called body you cannot do that so what needs to happen as you saw that we did up here with weather day view those variables and properties need to be on the struct itself not in the view so i just i put them in the wrong spot because i was talking and explaining kind of half paying attention so now if we do command b that should be all good down here we still got build failed because our code is messed up at the top but background view here is now good to go now that the properties are on the outside it's not a little missed up there so background view uh this explains why i wasn't getting my initializers here so let's try to type that again i always my habit like if i don't get the autocomplete i don't feel good about it right so i like to make sure i get that auto complete so background view down here and there you go top color bottom color so let's pass in blue and pass in color with the initializer of a name called light blue and even though this may seem like it didn't save a lot of lines of code and it's very similar to what we just did well one you're gonna see the flexibility we introduce when we go to like night mode but two it just makes your your screen read a lot nicer right background view top color blue bottom color light blue cool pretty simple uh you get that and then as you rename your other views that you refactor your screen is going to read quite nicely all right let's keep it moving here this text we have our city name so we'll copy and then now we're going to start doing this manually here and for now i'm gonna put all these in the same file i'll get i'll talk about project organization after we get it refactored and how we move stuff around that'll come in a little bit so let's do struct we'll call this city text view and it conforms to view and then if you just start type var body you'll get the auto complete so body sum view there you go that's the same structure and now if you look here if we want to make our city text a little bit reusable we just need to pass in the text right the city name so here the variable on city text view can just be var city name that is a string and because i've already copied that text view i can come down here and do paste right so instead of cappurtino we can just do city name and now this is uh reusable so back up and then now you're gonna start to see the readability here so instead of just this glob of text city text view and pass in the city name and now we can do copper tino california hope i spelled that right we'll see hit resume on our preview just to make sure i always like to do it a lot do a command b to make sure everything is all good and looks like we're good nothing changed but now you can see how our screen is reading a bit better so now let's refactor out this v stack that is our main kind of uh weather so again i'm going to copy this and down here at the bottom we'll create another struct again this is kind of probably starting to get repetitive but you'll see that all this repetition is really going to help you learn how all this stuff works and this is the first step of this right because right now we're just refactoring out the views but eventually when we're passing data around we got to make sure these views have all the correct data so i want to make sure you understand how to refactor these views before we add the more complex step to it right so we'll call this main weather status view naming is hard if you if you don't like that name name it whatever you like that's fine so if here's what i like to do here um first we'll do var body before i do my variables i like to paste what i copied in there right i copied and pasted this and by looking at this i can see what variables i need right like i'm going to need an image name right because that's not always going to be cloud sun fill so var image name and that's a string cool now i can plug in uh image name here and it looks like i'm you know my my temperature is going to be dynamic so same thing we did up here with the weather day view temperature isn't int so i'm going to copy that i mean you could type it out if you like but i'm going to paste that looks like i forgot to copy the v all good so far temperatures in int and again just like we did before very similar string interpolation temperature cool so again now up here in our view clean this up a bit we can get rid of this v stack and just call this main weather status view completion here string we want the image name to be cloud and i'm just looking i'm just looking down here to remember what it was cloud dot sun dot fill and the temperature 76 right and again if it gets too long feel free to bring your variables down like that i like to do that um okay cool so now let's make sure do command b i always again command b after i refactor make sure everything's good make sure my preview is right cool again now you're gonna you're starting to see the readability i have a z stack with a background view now i have a v stack with the city text view the main weather status view a new developer coming into this screen is going to really know what's going on based on how you structured your refactor here now this is where a debate could come in and i do think you can take what i've been doing i do think you can take that too far so there's like a balancing act for example i kind of think leaving this hdac even though it takes up a lot of code right remember the goal is the goal is not to be like let me get my content viewed three lines of code right because oftentimes getting it that short makes it a little hard to like understand i kind of think that leaving this h stack you know if we didn't have an array with our data and passing an array that's a totally different thing if you're familiar with swift ui you know what i'm talking about but in this circumstance i think this makes it very clear what this is on the ui right because you have five weather day views it's pretty pretty straightforward what's going on here yes it is an extra 10 15 lines of code that you you could refactor out but again getting down to three lines of code is not the goal making it easy to read and understand is the goal so i'm gonna leave that there i'm gonna leave the spacer here and one thing i like to do with my buttons here i'll first get rid of the space i don't like that so i'm going to refactor this text out into a button and i do this with my buttons because again this is like a default looking button right you're probably going to use this type of button all throughout your app so again let's create another struct down here at the bottom and like i mentioned we're going to do some project organization next these can be in separate files but you know i'm putting them all here for now so not var struct let's call this uh weather button and i just like to kind of put like what type of app it is usually it's just like like essay button you may have seen in my previous videos for sean allen button or gf button for github followers button in my previous course um so i like to put something about the app in in the beginning of it uh that is a view and again var body some view you're going to type that a thousand times you'll be very used to that and again i paste in here to see what variables i need okay so let's look so i'm going to need a title that's for sure so var title is my button title that's a string so let's change this uh here to title and zoom up here now i'm probably going to want to change the background color and most likely the foreground color as well but you see i don't have foreground color here so let's do type foreground color let's put in dot blue for now that's what it is um as the default but let's actually make these variables here so var let's say text color just to make it very clear uh that is gonna be a color and then background color also a color right so instead of background being color.white it's going to be background color nope kind of the perils of naming your stuff close to the default stuff here and then text color alright so on our weather button we're going to pass in a title text color background color that makes it so i can reuse this button in a lot of different uh contexts here so again up here instead of this button we're going to do weather button and then we're going to pass in the three parameters right title is change day time text color is dot uh blue and background colors dot white and again you can leave it one line if you want my text is so big here that i i'll put that on three so again now you can see our button what it does it's just gonna print something for now we're gonna fix that it's a weather button with the text title color background color so that's reusable so that is like our very first pass at refactoring so you can see how to extract the views into their own struct which again i have the whole list of them down here right the weather day view the background view city text view weather status view now when it comes to organization i want to talk about this i'm not actually going to create new files and move them around but again like this is a standalone struct as an example weather button like actually you know what i am going to do that i lied to you little ad lib on the fly so i'm do command n in the swift weather uh do a new uh swift file hit next call this weather button and the reason i'm doing this for weather button is because like i said weather button is the type of of thing that you are going to use all throughout your app right that's very reusable your button should all look the same or similar so that is something i want out of this file and and outside of it right now if i do a command b well it's going to say uh oh i didn't import swift ui import swifty i copied and pasted over over some important stuff and you see invalid redeclaration that's fine that's expected that is because i still have it here but once i delete that there done so again on the topic of project organization as that example if a view that i've refactored out is going to be used all throughout the app and elsewhere definitely i put that in its own file however if a view is very unique and specific to the current screen that i'm on but i just refactored it out to make my my screen more more readable and easy to understand like you see here then i keep that in the same file right so you get that distinction if it's unique to this screen i recommend keeping it in the same file because it's easy to find less confusing if it's going to be used all over your app or in other screens of your app put that off into another file all right so that's the refactor in the next video we're going to dip our toes into actually passing data it'll be pretty simple but you'll get to start seeing how swift ui handles view updates based on a source of truth with data getting ahead of myself let's go to the next video we left off last video with a bit of refactoring and dipping our toes into project organization which we'll get more in depth later in this video we're going to introduce the passing of the data and changing from day to night like you see in this video uh based on a boolean and start talking about state in swift ui all right back to our code our weather day view that we refactored let's go back up to the top let's add a what's called a state variable and i'll give you the quick explanation but like i said the the bulk of this course is going to focus on you know at state at binding at state object at observable object passing the data so this is like just the very first steps of it so uh don't come right this took me a long time to wrap my head around all the data flow in swift ui so in this app if you leave this being like i have no idea what's going on don't worry we're going to hammer this home over the next couple apps and throughout the rest of the course so state private var is night and that's going to equal false by default right so do command b to get rid of any errors here okay so big picture again we'll drill down later uh the way swift ui works is you don't directly update ui you tell some source of truth some piece of data in this example that source of truth data is this boolean is night so you set up your ui to handle if is night is true and if is night is false and you can imagine we're going to have change our background color based on is night true or false so your ui is waiting for that change and when that change happens your ui is like watching that source of truth and when that change happens your ui will change like it's reacting to it right it's declarative programming versus imperative programming i have a whole video in the next section all about that but that's big picture keeping it simple so what we need to do is set up our ui to handle both cases like what happens if is knight is true and is nine is false okay so what we're going to do is just change the top color and bottom color on our gradient view if you're familiar with ternary operators we can do is night and then if it's true we'll do dot black and if it's false we'll do dot blue right that's just for our top color and then for the bottom color because it's going to get too long again let's put our parameters on a separate line here so same thing is night and it's going to be dot gray if it's true and if knight is false it's going to be light blue so if his knight is false it's going to look just like we have it here however if his knight is true we're going to change it to black and gray so let's try this out here down in our button remember we just did button tapped now we're actually going to flip that boolean so we can do is night dot toggle so every no not custom mirror what are you doing next code toggle all right so now when i tap the button it's going to just toggle from true to false and based on that our ui is going to be watching it and it's going to adjust our background gradient accordingly right so you can either run this on your device if you want run it on the simulator or the nice thing about previews if you hit this play button and you'll see the background will change to this like grayish blue kind of thing that means your app is like actually running and you can interact with it so watch what happens when i uh tap the change daytime button bam now it's into night just like that so what's happening is right now is night equals true when i tap this is night equals false and now my ui knows that that source of truth of data changed and then it updates accordingly now let's make some small tweaks here so if i go back to night well it's still sunny and cloudy at night well that's that's a little weird so let's go to our main weather status view and the same thing we can do here right we can do is night uh if is night is true we don't want cloud sun fill we want moon stars phil right you see it here or you can do just moon or whatever you want who cares right sparkles whatever you want to put in there i'm going to do moonstar's fill back to xcode do command v to paste that in there so now if is night is true we're going to show the moon if it's false we're going to click show the cloud sun hit change day time and you'll notice i didn't have to stop my preview and restart it right it just it's hot reloading the code so this is the nice thing about previews when they work but you see now when we're going from day to night we're also changing the icon back and forth right so that's pretty cool so that is the very very basics of how swift's data flow works again you have a source of truth your data model and when that changes your ui updates now the trick is is making sure you set up your ui properly and making sure the ui is you know listening to the right stuff to update you got to make sure your model objects is publishing its information you got to make sure like things are listening so that's kind of the tricky part of it again we'll get to that one last thing right so we covered state now let me give you i'm going to dive into this later but real quick the reason you put state variable in front of it is if you're familiar with your structs versus classes like swift 101 structs are value types so they don't hold state right they get destroyed and recreated so how can you make a struct hold state well that's what this state property wrapper is for right so if you can imagine this view called content view it's just a struct and it gets created and destroyed all the time created and destroyed that's what swift ui is all about very cheap views they get created and destroyed redrawn all the time however this little piece of this view called is night this little piece of data this boolean has state in front of it so that means that gets put off somewhere else to keep that state while the rest of the view is constantly created and destroyed this keeps state so super basic explanation but hopefully your mind is starting to see how like swift ui works a little bit okay so now on to that final piece i'm gonna talk about we're gonna refactor background view even more so we don't have to like this is kind of like messy and it's gonna introduce binding okay so let's go down to our background view okay so we don't wanna use this we don't want to pass in a top color and a bottom color we want to pass in var is night and that is a bull now this is night needs to keep state like we just talked about right it needs to always know in my day and my night what am i showing because again this view could get recreated and destroyed now this is night variable always needs to match this is night variable right because it's the same thing right this view is a child of that view right we're passing this is night variable down the view hierarchy to the children so they need to be the same at all times right so that's what binding is for so if i put binding in front of at here so binding var is night and then we're going to have to do that logic here where is knight we this is what we just did before dot black if his night is true if his night is false we do dot blue and then let's delete top color because we're done there and same thing with bottom color again is night if that's true we're going to use for the bottom color dot gray if it's false color initializer name remember this is exactly what we did uh up top you could even copy and paste it uh if you like so that way every time we use our background view like right here every time we use background view if we're using this you know all throughout the app we would have to pass in these kind of colors well now background view just takes in a binding right is night but you can see it's not just a bull right it's a binding bull so i can't just put is night right because it's not binding because down here in the background view i specifically said this needs to be binding and again what binding does is makes it so my is night variable on my background view is always the same as this is night variable right so to do that you put a dollar sign in front of it so that makes it binding so now i'm passing into my background view a binding to is night right and then now here so that means on my background view this is night is always going to be the same as this as night that's what binding does so back down in the in the background view we should be good to go here and then again it's just a little cleaner up here just background view is night you pass in is night so let's uh stop stop this just to be sure rerun the preview and now if we do this it should work the same yep it works the same and that's a very basic example i just wanted to introduce the concept of binding and how when when passing it down that's the key passing it down the view hierarchy to the children right because the background view here in this circumstance is a child of the content view right it's part of the content view so we can pass the binding down the view hierarchy now in more complex apps you could imagine like you could be passing a binding down six views down the view hierarchy to use it there's other ways you know things like the environment you know we'll get into that later but again this is the basic introduction of state and binding those are the two most basic ways to pass data we're going to be doing that a lot throughout the rest of the apps but this is your introduction so that finishes off this weather app i want to leave you with some some challenges that you can take this app in and go even further with it another challenge you know and this is more towards those who have experience building building swift apps uh create a data model that you don't have to individually pass in this stuff right you can have an array of like a day right and a day would have you know a day of the week a temperature an image name or maybe a weather enum that you pass in that has the specific image attached to it you can make this neat and represent a data model that's a bit more not it's not advanced it's kind of basic ios knowledge but if you are like a super beginner just learning swift ui that may be above it but if you have app experience you should be able to do that so that would be a good challenge and then if you really want to take this far uh create a network call from a basic weather api that will take whatever city you want and it'll actually give you the next five days of weather that's taking it pretty far but my goal here is to give you the basis of an app that you can tweak yourself build upon all that good stuff or maybe you put a tab view that shows five different cities based on that api have a ball with it uh here's the basis those are some challenges you can do to push yourself and if you have questions about those challenges uh feel free to ask in the slack channel i'm sure plenty of people will help you out so that wraps up the weather app and again if i went super fast you felt like i was throwing a lot at you this was just so you could see it in action in the next section i'm gonna do a lot of talking head explainer videos that do a deep dive into a lot of the the theory and the concepts but again because you've seen it in action now when i explain that stuff hopefully that connection can be made whereas if i just started off explaining things and you've never seen it in action it's kind of confusing so again that was the purpose of this just to give you a taste of it in the future apps you know we're going to go a little bit slower we're going to dive into a lot of the details uh and you're going to get a lot of practice and repetition because to be honest with you a lot of it's the same when it comes to like the ui and stuff so all right we'll see in the next section

Channel: Sean Allen

Views: 118,128

Rating: 4.9697309 out of 5

Keywords: Swift, Swift Tutorial, iOS Developer, iOS Development, Swift Code Tutorial, Swift app tutorial, SwiftUI, SwiftUI Basics, Swift for beginners, SwiftUI For Beginners, SwiftUI Tutorial, SwiftUI 2.0, SwiftUI 2 Tutorial, SwiftUI Basics for Beginners, SwiftUI app, SwiftUI tutorial 2020, SwiftUI Tutorial 2021, swiftUI for dummies

Id: HXoVSbwWUIk

Length: 79min 30sec (4770 seconds)

Published: Wed Dec 02 2020