SwiftUI for Beginners: Basics & Essentials (2020) - iOS App

[Music] what is going on guys welcome back to another Swift video today we're going to be doing a introduction to Swift ey the basics and essentials so if you're not familiar is swifty why is this new framework Apple released last year in 2019 and it lets you create these really nice-looking user interfaces in a simple way with this declarative syntax and back in the day and even now it was pretty daunting to go and get started with iOS because a lot of code storyboards weren't super reliable and there was a whole host of just complexity but you can see with this snippet of code here that it looks pretty simple so a lot of people have been jumping in so I figured why not take some time out and do a swift UI essentials video we will make something and talk about the core concepts so all of that said let me stop blabbering on and let's jump right into the video so we're going to of course open up Xcode if you don't have it go ahead and download it from the Mac App Store or Apple's developer web site you're going to create a new project it'll be a single view app and we are going to call this project my first Swift UI app go ahead and make sure the interface is on Swift UI and of course the language is Swift hit enter twice to create and save the project and let's jump right in so let me expand my execute window here to give ourselves some more room to work and the first thing you'll notice is we have our code here and our canvas here and something really cool bus with DUI is as we edit our code and if you hit the resume button you can actually see the code in action here real-time on a device and we're gonna be using this preview as we code to make sure the code we're adding gives us the correct results so we're gonna start by actually looking at how we can change this device over here because this is an older device and you know we need to be working on the newer devices because we're cool like that so when you can go ahead and do is add a modifier to this content view in the preview provider here and you want to change the preview device and what you want to pass in here is a preview device open up the initializer and with a string you can actually pass in which device you'd like to show so you see there we passed an iPhone 11 and we got the iPhone 11 here so what you actually just saw there with this dot and let me actually highlight and do a ctrl I to align it properly is called this is called a modifier so Swift has a concept of there are these core elements in this case we have content view and you can add modifiers to them so we get started with this hello world text here and over here we have a text object with hello world string and we can add modifiers to this so one modifier for example is for a ground color and we can specify red and you can see the text over here change to red so we're gonna be looking at various modifiers and how to combine these like elements to create more complex nicer looking views the other thing I'll call up before we get nitty-gritty into the code is you can have this plus button up here and this will library of the things that are available to you so a big challenge when you're starting off you know learning and you're in the beginning stages of just picking up iOS you don't really know what tools are at your disposal and what elements and what's really great about this is you can actually search for whatever you want so let's say we want to add a list we can search for list and we see we have a list and a form here and it gives you a little description and if we want to add a list we can simply actually drag it in which is really cool and for the list what we're gonna actually do after I fix this alignment and put this back here we're gonna move this text into our list element and we're gonna save this list is gonna iterate from 0 up until 10 and you can see over here nothing actually changed and it's also complaining here because we need to actually put underscore in because the list pass in the index and you can see the live update occurred here the other thing about this preview which is cool that you can do is you can hit this little play button and this will actually be much more real-time as you are editing code here so if we go ahead and change this to be blue and if we add another modifier for font and if we say the font let's see font weight and let's do bold you can see the things just update much faster here so what are we gonna build we are going to build a list of images with titles so a table view if you're familiar with the traditional way of building things and once you tap on something we're gonna show another screen which is gonna have some more information about that image and the title and description etc so I took the liberty of grabbing some images from Google Images and we want to first bring them into our project so we're gonna go to this XE assets thing over here which holds all the assets we want to bring in right click and we're gonna do new image sets and we want one image set per each of these images so the first one is gonna be beach one and I'm gonna drag in this guy the next one going to be beach - and I'm gonna drag in this guy and I was debating doing this before the video drag enthusiam but I think it's valuable to see searching for those that are starting off on how to bring this stuff in and you know name things and whatnot so we brought in the car there I see a dog picture on spring in the sky and I see a wedding below it so I'll spring that in you know to see it it's a fountain I see so it's spring a fountain in hopefully I spelt that right let's bring in this fountain over here and lastly I think it's the last one for let's call it nature and let's bring in this one so how many do we have you got one three six seven so it looks like we have all of our assets in here so we can once again expand our window and now we can actually jump right into some code so if you ever come back to the content view and the preview is gone as they call it you can just hit the resume button and it will come back and let's start building out our view so we already looked at how to create a list now how do we add an image to this Wow as you guessed there is an image object and we can simply pass in a name of our image so we put in beach one there and we're gonna go ahead and hit resume and we see our beach image came in and I'm gonna go ahead and hit this little play icon so we don't have to keep hitting resume and we see an issue right off the bat the image is pretty big and the alignment just looks kind of funky so we need to actually adjust this and right now we also hard-coded in our image name so that's not really gonna fly right when we have a bunch of different data we want to be able to pass in our data so the first thing we're gonna do is we're gonna create a struct for data it needs to be identifiable we need to add an ID which is going to be a UUID which is a unique identifier identifiable allows us to use this struct for a model in our list and we're gonna add some properties onto our data object here so we're gonna want a title an image name we are going to want a image description and we will also add an image taken dates and in a review what we want is we're gonna want a property in here for items and this is gonna be an array of data and in our list we can actually pass in the items we can say data in and for the text we can now instead of say showing this static text we can say data dot image title is that what I call this looks like we just called the title and for the image the image name can be data dot image name and C let's make sure we called it the correct thing image name image name now down here you see this is complaining now because we need to pass in this items collection to this content view and we're trying to create this content view without items so if you start typing here it tells us that we want to pass in an array of items so let's go ahead and create those data objects so we're going to say data the first one is going to be beach one the image is going to be beach one and I will say this is a beach the next thing is gonna be a date we'll just say January 1st 2020 and I'm gonna copy and paste this to save us some time so we had 7 images I believe so 2 3 4 5 6 7 you can fix up the indentation by highlighting and hitting ctrl I and let's go ahead and change all of the data in here so beach - we had a dog dog we had a car car we had a nature picture let's do the nature what else did we have we had a wedding I think wedding and the last one was a fountain found tin and we should change the descriptions too but we'll come back and do that go ahead and hit resume over here let's see what it looks like now well I'll say nothing right now cuz it looks like we have an error somewhere in here so let's hit this error and let's see what it's complaining about it's complaining about the content view in here and the reason it's complaining there is because we need to pass in that items right there so the easy workaround for now is instead of making this just a definition we're gonna say initially this items is empty collection and now if you go ahead and hit resume over here it shouldn't playing about that issue and we should get our preview refreshed so we can see that we actually see all of our images but they're quite large it pushes our text off screen and we can't click on them and do anything useful so let's fix all that so you can see that we can scroll actually in this simulator even though it's a preview and not a simulator and the reason is because we have the play button here so it's really nice to have this alongside our code as we build so now we're gonna use modifiers like these on our image to properly size it so the first thing we're gonna use is resizable and we're gonna use a frame off of that to provide a width a height and an alignment so I'm gonna say a hundred hundred and centered and you see now we're looking at much nicer now we also kind of want to give this whole screen a title so what I'm gonna do is we want to embed this whole list into a navigation view so we can do it through code or you can actually go ahead and command click it and there should be an option to embed so we have embed and list we have embed envy stack and age stack so what I wanted to illustrate is sometimes we'll have an embedded navigation view here it's like it's not showing up this time for us so we are going to do a command X to copy this create a navigation view and go ahead and paste that in there now you might be asking what did that do because it looks like it did nothing over here oh the first thing I did is I added this navigation bar so now what we can do is say navigation bar title and let's call this photos and you can see we have our title up here now let's control either is to fix that indentation so you notice that everything is either a modifier or a root level object so it's very very redundant and it's a really good pattern once you pick it up once it becomes very natural now let's see what else do we want we want to format this text to look a little nicer it's already bold let's go ahead and make this a secondary color let's do primary actually primary pilot looks good and primary basically adapts to dark mode and we'll take a look at dark mode towards the end of this video because that's something that's really cool too now we want to be able to tap onto these and do something which would be go to another screen and show some more data about our data at that cell so what we want to do is we want to actually take both of these and embed it in a navigation link and we create a navigation link with a destination and it is active if we don't actually even need this we don't even need and actually let me grab this navigation link from our library up here just so you guys can see that we can not only type it in but we can actually simply grab it from here and drag it into our code and it stubs everything out for us so we're gonna put in the things we copied into here and we're gonna change this to a view so we're just gonna provide a basic text view here and this is the view that it will push us to on the screen once we tap it so you notice when we did that we actually got these little arrow indicators so now we can actually tap it into a view and it actually does the animation for us it actually embeds everything nicely in the navigation controller we can swipe back and it's looking pretty nifty so what do we want to do now so we also want to embed this in a container so there are a variety of containers as you've probably already noticed we have a navigation view we have a list and there is a horizontal stack a vertical stack and a z-axis stack so let me look at horizontal stack this will make sure that the elements are aligned horizontally we could also do AV stack and you notice now things are aligned vertically let's go ahead and stick with H stack and let's go ahead and creates another view that is actually gonna be shown when we tap on a cell instead of this basic text which is static so we're gonna basically copy this whole thing and we're gonna create another view and go ahead and delete everything in here and what we want to do is we're gonna pass in a data item so we're gonna say data and this is going to be data and this is complaining right now because we're not returning any views and title bit but let's go ahead and change this to need a data view and we're gonna first create a vertical stack and we're gonna have a text and we're gonna show in the text data dot title and let me actually go ahead and use this before we design this screen more so where you can actually now pass in this data view and if you open up the constructor we can pass in data and we're gonna pass in the current data item so now over here if you tap it you get to a screen and we still only show a label and it looks like we're still only showing some text so let me actually go ahead and hit resume over here and now if we tap on one of these we should get the Associated title showing so that's cool now let's actually show the description and be date as well so the first thing actually but I think I'm gonna want to do is we're gonna say instead of adding text for the title let's show it at the top of the screen so we are going to give this a modifier let's put some text in here we're gonna give this a modifier of navigation bar title and we're gonna pass in the title for data there and what do we want to show in this vertical stack so the first thing I guess we can show is the image and the image is going to be data dot image name and let's see what happens when we click on it what it looks like looks like it takes up the whole screen right now so let's go ahead and make this resizable and how do we want to resize it so let's see we have we resize the bowl there's interpolation there's resizable within sets so we're gonna say resizable with a frame I'm gonna stick with the width height and alignment so let's say the width of this will be 200 height will be a hundred alignment will be centered let's see what this looks like now looking good all right the other thing we want to do is we want to give this a modifier of aspect ratio and we want to maintain the aspect ratio so we're gonna say the aspect ratio is going to be content mode and we want to fit let's see why this isn't cooperating so aspect ratio so let me go ahead and move this down below this cuz it looks like this is complaining let's put this here and let's see sometimes swift UI can be a little annoying so let's put aspect ratio and fit right there all of our error should go away and let's go ahead and make sure this is still running which it is looks like the image is kind of small so let's make this let's make this a little taller let's also give this a whiff let's say 300 let's say 400 see 500 actually I'll see what that looks like okay much better so now let's add some more stuff in here so we want to add a description so it's going to be text with data dot image description whoops data dot image description and then we also want to add a spacer which simply add some space as the name implies we're gonna add another text and this is going to be image to take in a date let's use the padding modifier to give this guy some padding and we can save the length of the padding is let's say five control I to fix that indentation let's add V padding to this guy as well and let's see let's put a enter there let's go ahead and hit one of these and see what this looks like now so cool so we have our description showing up here we have our date showing up at the bottom let's go ahead and make our description longer and see what that looks like so the spacer allows us to basically get the space like I mentioned between those two texts so if we didn't have it you'll see that the text for the date is right below the other text and it kind of looks nicer we utilize the space here and give ourselves some more room so that's looking pretty good something I don't like that we want to adjust over here is these corners and the images are a little sharp and they don't look very very nice to the eye so let's go ahead and on this image in our list let's go ahead and add another modifier for corner radius and we're gonna say ten if you look at that it actually rounds it right there for us so with very little code I would say borrowing this collection of this mock data that we have passed in we have been able to create this really nice looking at table view if you're familiar with the traditional way of building things no protocols no delegates no data source none of that outlet wiring up we can basically just create it like so we can tap on to something and see our image the description and the time down below we get the swipe back functionality for free I can grab the corner here looks like it's gonna be difficult let's try that one more time there it goes it's very hard to grab the corner here let's go ahead and make these descriptions slightly longer to see what that looks like so I'm gonna just copy and paste this for the beach same thing for this guy and we can say this is dog let me copy and paste this as well car yeah that's good enough for now so if we go ahead and let's say hit the car one we can see that we have our text showing up here and it looks like it's actually trailing off the edges of the screen and the reason it's doing that is because we created a fixed-width for our a fixed-width for our image and what we really want to do is we can use our frame modifiers to get the current width but I'm just gonna make this smaller for the sake of this video and if we go ahead and click into it now you'll see that the text doesn't actually trail off the screen and it wraps to multiple lines and it's a little small so let's go ahead and give this a font size and make it bigger so I'm gonna give it a font and let's see it looks like we have font weights and we can do a font and use one of these standard fonts so let's use let's see we can use let's use large title let's see how obnoxious Liebig that is so kind of big but hopefully that illustrates the points we can also make our image slightly bigger it'll be a square now so if we tap into it you'll see that it is slightly bigger but it still maintains its aspect ratio so things are not distorted and the next thing I'll cover and we'll actually wrap up after this is how do we check dark mode so we have this whole preview thing going on over here but what if we want to check out what this looks like in dark mode so we can use a modifier called environment and this is one of the really really powerful things about Swift ey back in the day and by back in the day I mean like still now you would have to run this with different configurations but what you could actually do is set up different environment properties like color scheme and actually you'll see that your preview over here will update in real-time so let me actually move this before the preview device and let's see let's see what this is complaining this should be color scheme if I'm not mistaken and let's get rid of this iPhone 11 let me see what this is complaining you so undeclared operator that's because this should go before this guy and this should be a lower case color scheme and if you look at that it actually changed to dark mode now something that might be annoying is you might not want to create rather changed environment every time we're looking at this if you want to be lazy like me you can copy this whole thing and we can put a group here go ahead and paste that into the group and scroll down and paste it one more time and go ahead down here and let's change the color scheme to be liked and let's change this to be iPad pro and now what you can actually do on the right hand side over here if we stop running this by hitting the pause button you'll actually see that up here we have an iPhone and it looks like we don't have the iPad down here because this raw value doesn't exist so let's do I pad air too let's see if that one exists it looks like we have this iPad here so give it a second to actually load up let's at that play button so it's still loading there sometimes it takes a few seconds but the point is you can actually keep multiple preview devices and right now it's showing only one because we have this hit but let's just actually change this back to the iPhone 11 so I can illustrate the example so we have the dark mode we have light mode we can see that our app is supporting both we can scroll between them and yeah that's kind of a really quick essential look at Swift UI so you can create these views by simply declaring what they should look like you can use the modifiers to style them you can give things colors font sizes you can set up navigation like we're tapping on a we go ahead and hit this play button we're tapping on a cell and going to a new screen so you can set that up by using different views like we created this data view here you can create model objects and pass them around to encapsulate your data and the coolest part of this in my opinion you can use this preview provider to look at your app as you build it interact with it right here instead of having to run it in the simulator every single time so if you want to run in a simulator you're absolutely welcome to do so by selecting a simulator hitting this play button here but something you'll find after your app actually loads is because we're using the preview data over here at the simulator doesn't decide to take too long you won't actually see the data in here because you're actually not providing the data in the real app they're only providing the data in this preview provider thing so I definitely recommend using this guy if you can that said if you haven't smash that like button down below already for the YouTube algorithm make sure to do so helps out quite a bit subscribe if you're new to the channel I post daily for Swift videos comment if you have any questions concerns errors I try to reply to every single combo within a few days thanks for watching I'll see you guys in the next one

Channel: iOS Academy

Views: 10,860

Keywords: swftui intro, swiftui for beginners, swiftui basics, swiftui build first app, swiftui app, swift for beginners, learn swiftui, what is swiftui, swiftui, swiftui 2020, swiftui essentials, swift programming, make app in swift, swift 5 tutorial, swift tutorial, swiftui tutorial, swiftui tableview, swiftui navigation, swift 5 for beginners, swift progrm design, swift app, how to make iphone app, swift make app, swiftui make app, make ios app swift, build app in swift, ios, app

Id: G4RN3tCdpO0

Length: 28min 11sec (1691 seconds)

Published: Sat Jun 27 2020