SwiftUI Basics for Beginners (2020)

today we're announcing that new framework it's called swift UI pay code crew it's Chris here let's just dive into it shall we yesterday Apple announced Swift UI a new way to build user interfaces using code and this is huge because the developer community has always been divided between using storyboards or using programmatic UI now Swift UI looks easy enough for a beginner to grasp and yet offers the maintainability of a coded UI so the best of both worlds right well this question plagued me and I couldn't fall asleep last night so I ended up staying up until 3 a.m. to figure out if Swift UI really is the Holy Grail so in this Swift UI tutorial I'm going to show you what I've learned and I'm going to give you my verdict stay tuned I need to give Apple props because they've created a really nice set of Swift UI tutorials that walks you through the basics and all of the aspects of the framework I highly recommend that you check it out or you know you could just watch me demo it for you right now I gotta be honest I'm pretty tired right now from staying up but I'm gonna push through it because if it weren't for you yes you watching my videos and supporting my channel we wouldn't be here to a hundred case strong so if you're brand new to the channel and this is the first time you're watching I want to welcome you to the code crew and thank you oh yeah and hit that like button and subscribe button because that stuff really helps the channel and it lets me know that you want to see more tutorials like these alright with that said let's look at some code so by the end of this tutorial you'll have something that looks like this right here on the screen now don't be deceived this might look kind of simple but it actually touches upon a lot of the different aspects of Swift UI kind of core principles that you're going to need to be able to work with it I found it to be a really good tutorial and it was actually one of those tutorials I mentioned that Apple has that's this one right here all the links will be below in the description so this particular one starts at the very very basics where you're going to create some text views you're going to explore the new canvas aspect of Xcode 11 you're going to be able to combine some views and modify them to create that composite view there that this view right here is actually made up of a couple of different programmatic views so that's really really cool and you're going to see how we're going to do that let me first show you kind of like the high-level steps we're going to go through in this tutorial so we're gonna create a new Xcode project I'm gonna show you a little bit about the interface and how it's changed we're gonna create some text views and we're gonna modify it from the canvas and then through code and we're going to start using some stacks which allows you to combine elements together and arrange them horizontally or vertically we're going to create some custom image views and then we're going to also look at how we can use some UI kit elements and bring them into use with Swift UI then we're going to combine these views together to form this detail view here and a cool thing that apple also has with their tutorials is this little quiz at the end so I highly recommend that you come here and check your understanding after you watch this so I'm going to be walking through all of these steps and it's gonna take a lot less time than the 40 minutes that they've got estimated here so don't worry about that all right so let's jump right in I'm gonna close this Xcode project and we're gonna start fresh so first we're going to create a brand new Xcode 11 project and we're gonna want to choose a single view app under iOS I'm gonna call this a swift UI demo - I've done a couple of these at this point but the important thing you want to do is make sure that you've got use swift UI checked then you're going to go next and I'm going to create it in my sample apps folder all right so now we've got a brand new project so I know there's a lot to take in and it looks a little different from what we're used to seeing in Xcode 10 namely there is this kind of preview pane here and this is called the canvas with Swift UI what you're gonna write in code you're actually going to get a preview of it here so as you're changing your code to modify your UI it's updating in the canvas but let's not jump to far let's take a step back and let's take a look at what's changed here in terms of the files that you get for your new project so I'm gonna go up to editor and we're going to choose editor only and just hide that little preview pane for now and let's take a look here so we've got the app delegate and if you've worked with iOS before and Swift projects you're used to this this file here it contains a lot of the lifecycle events for your application but what you'll notice that is that we also have the scene delegate now now what's important to note here is this part down here where it sets the route view and this part is where you specify the initial view for your app when it launches now what is this content view it seems to be creating a new instance of content view well that's what you have right here so this content view describes a single view in your app you'll notice that we don't have a storyboard file here we still have our asset library and we have a launch screen storyboard and then the AP list which we've always had so let's wait until my xcode responds the end all right so you can see storyboards are just as slow as ever okay which is a very common complaint from people so Swift UI might be a lot better you'll see so let's go into content view here and before I talk about what's in the file here let's just try to run this and preview it in the canvas and see what we get so let's open up the canvas again and you're not gonna see anything at first until you hit resume and you're gonna have to wait a while while it starts up to simulate and then in the background now for me when I first installed Xcode 11 and I tried to preview it it actually took a while and then it crashed and I couldn't get it to run I just kept getting some error here up here and then even when I tried to run in the project and I tried to run in a simulator it was still failing to launch and it wasn't until I closed Xcode and just did the good-old restart the computer trick that everything start working again so that's just a tiny tip for you if you encounter not being able to run the simulator or seeing the preview just restart that's gonna fix things at least it did for me all right so let's let me just get rid of some of the clutter here so we can focus on the Swift UI part all right that looks good so you notice you have some zooming controls in here and you also have some controls in here which I'll get to in a second but first let's take a look at this so we have pretty much an empty view and we have hello world let's take a look at how we generate that through the code right here in our content view thoughts Swift file we have two different structures the first one conforms to the view protocol and it describes all of the content and the layout for our view the second structure conforms to the preview provider protocol and this is merely code to generate the preview that we see on the right-hand side now the reason why this is separate is to give us flexibility on what we want to see on the right-hand side for example if we have some sort of really complex view some really complex view hierarchies and then we don't want to see the whole thing because it'd be hard to just work on maybe a small aspect of it we can modify the code in here to preview on the right-hand side exactly just the part that we want to see that we're working on that is why we have this structure here now you'll notice that we have these tags here and these are called directives and this particular one is just saying that only run this code in between here if you're in debug mode and when you're building your app by default you're running it you're debugging you're like building it you're fixing bugs you are in debug mode at the time when you're ready to publish your app and you package it up for deployment to upload to the App Store it's gonna go from debug to production so this code right here that generates the previews this code won't ever be in your final build it's not going to be run this these previews are mainly for when you're building your app to make it easier for you to control what you want to see on the right-hand side because as you're about to see these previews are pretty cool so for example this is the text element that is describing that hello world label there it's called a text view and we can let's say change it and as you can see it's updating live now the cool thing about this preview here is that you can modify what you see here directly from the preview so if you hold down command and you click on this text view you're gonna be able to do things like embed it in a different stack view or group or put it in a button or you can inspect it and then you can change some of its properties so I can change this back to let's say hello Swift UI when I do that take a look at what happens to your code right there right let's let's do that again let's inspect this time we're going to change the font we're going to choose a system font type of title to describe this size and then you can see that it adds this piece of code right here to your text view now they've put it on a separate line to make it easier to read but essentially what's happening is that it's just calling a method on your text view object right here so in Swift UI you're going to see kind of different rows of modifiers they're basically calling these methods modifiers and they kind of chain them together so for example if I wanted to take this textview green I can use another method and just chain it on here and there is a color method right there and I'm gonna choose green so you can see that it updates it there and I'm just gonna press enter like that and put it on a new line so it looks kind of funny but essentially you're just creating an element and calling a method on it and then that returns the revised element and then you're calling a method on that and you're just chaining methods like that alright so let's put them on their individual lines again now one last time let's go into the preview here and hold down command and click our text view there go inspect and let's change that text to turtle rock and let's whoops where did that go let's go inspect and let's change the green the color back to inherited so that's going to turn it black now you can see that you know it changes the code there and you might say that things might get confusing if you can change things like that from the code side and from the previous side if there's ever any discrepancy between the two the code is always the source of truth at least that's what the documentation says so if you're not liking what you're seeing in the preview it's always the code that is always right because this preview is just being generated from the code if you think about it now I want to add a couple more text views under Turtle Rock now the way to do this is using a element called the vertical stack and if you've worked with uikit before this is called the stack view and it's just the alignment vertical well here in the swift UI they call it AV stack and there's a couple of ways that you can declare this so you can just type the code or you can then this is kind of cool you can hold down command on your keyboard click text and then you can embed in V stack or because we're gonna put multiple text views into this vertical stack so there's stacked one on top each other or you can click on the preview like this and you can embed in V stock or you can actually open up the object library here it's opening up on my external monitor and you can choose vertical stock and you can literally drag this into your code like that to create some code so there are so many different ways to do this I personally feel like it might might be a little confusing for people but you know I guess having different ways allows people to choose which way they like okay so we have a V stack here it has a pair of curly brackets like that and you can put your text views into there like so and you're gonna have two labels one on top of each other so this one what did they call it Joshua Tree National Park I believe and let's make this one aunt a sub-headline and we're gonna go ahead and put that down there now we're also going to align these two labels by I'm still calling them labels but they're text views you know line these text views on to the left so when you create the vertical stack you can actually specify some parameters and one of them C you can specify selling them here you can specify the alignment that's what we want so for the alignment let's go leading and then the others are actually optional so we can leave that out for now so we've got them aligned on the leading edge now now we also want to put a label beside Joshua Tree National Park to say which state it's in so what we can do is now I'm going to do a different way hold down command and click that guy and embed it in a horizontal stack so we're going to put another text viewing here and call this California and there it is so this one will be also a font sub-headline there we go alright so that's how we've structured something so far this is too close together so what we can do is place a spacer in between Joshua Tree National Park in California and to do that we're just going to add an element in between our two text views in our H stack and this is just a space service Packer spacer object when you do that it basically expands and pushes everything out it this spacer takes up all the available space that it can so it basically pushed everything out to the edges now we can add some padding to the vertical stack or V stack I'm still using UI kit terminology it's hard to shake alright so this is our V stack I'm home to thought notation and this is padding so by default it looks like there is a default sort of padding so just by calling the padding method it's gonna add some padding there alright now we're going to see how we can add an image to our view so first of all we're going to have to add that image to our asset library and this image actually came from the project files from the Apple tutorial so I'm going to go ahead and grab this image and drag it into my asset library now if you need this image the links are in the description that will link you to the tutorial page and one of the links at the very top you can grab the project assets alright so we've got this asset called Turtle Rock and instead of just adding it to our content view here we're going to create a different view and then what we're going to end up doing is just combining these different views into a bigger one so it's gonna give you an idea of what's possible so I'm gonna create a new file here I create a new file my project and we're under i OS we're gonna choose swift UI view down here notice you can still add storyboards so those aren't completely gone alright so this one is going to be called circle image make sure that this should be checked on right if it this is not on make sure it's checked alright so we're going to create it in our project here and you'll notice let's just move this up here and let's close that file navigator so you'll notice that again we have this structure that conforms to the view protocol for this new view that we've created called circle image and we also have this preview right we're just going to show us what we see here now I'm going to go ahead and hit resume just so we can see something but we're not gonna want to show a text view all right so I'm gonna get rid of that and I'm going to use an image view instead now the image view actually has an initializer where I can just pass in the asset name so I think this this is turtle rock so let's see there we go so that's really cool the image view also has a method called clip shape so then I can pass in a shape I'm going to pass in a circle and it's just as easy as that so this new circle object you can use it you can actually use it as a shape that you can display on the view and now I want to add a border to this circular image view so the way we do that is we call this overlay method and we can pass in a view but instead of creating it directly in there I'm gonna create it out here so what we're going to want to do is create a new circle and the circle we are basically going to give it a stroke and we are going to choose the one with content and line width so for this guy we can choose say [Music] krei and then for the linewidth we're gonna choose two and then I'm going to take the circle that has this stroke here and I'm going to use it as my overlay so you can see that I don't know if you can see right there but we do have a slight border around our circle now and then lastly well we can actually before we do that let's add these guys on new lines so it's a little easier to see we're gonna add a shadow of 10 points and lastly we're gonna change this gray color to a white and we get this sort of resulting image which is very Apple like wouldn't you agree okay so we're actually done with the circle image now and we're gonna work on a third view before we combine everything together so let's go back into our file navigator and let's go add a new file and once again we're going to choose swift u IV and we're gonna call this one map view again make sure that target is checked under your project right there so we've got this new map view all right let's put it right there so in this one we actually want to use a map view from the mat kipp framework so in order to use that we have to import mat okay and here's the part of the Apple tutorial that I still don't fully understand just yet but if you want to use UIKit views with swift UI instead of conforming to the view protocol you're going to conform to the UI view representable protocol and what you do is you actually get rid of this part and you have two different other functions instead one is make UI view and this is where you generate an instance of that UI kid view so in our case it would simply be in k-map view that's we've created a new instance of it and then the other one is a update UI view and this is where we would put the code to update the UI view the UI kit to view all right so let's see what says here UI view type yeah so this one it should be returning a MK map view and this parameter yeah this is actually fine so actually let's see if we can see anything let's hit resume all right so we do you see that kind of a brown beige that little legal thing so this is kind of like the beginnings of a map I wonder if it's loading so in order to view the maps we actually have to hit this button and go into live preview did that work there we go so this is running it's running it's going it's trying to generate the view so I think we're just going to get a basic map and then in here we're going to want to set the exact region that we want to see around a set of coordinates according to the tutorial oh I guess that would be Turtle Rock so for this part of the demo I'm just going to grab the map kit code to Center the map around that set of coordinates because what we're focused on here is showing Swift UI and learning about Swift UI and so I mean I can describe what the lines of code do though all right so let's see if since this is a live preview it should be just generating there's an error here so let's just describe what the code is doing first so we're creating a set of coordinates with a latitude and a longitude right here and then we're creating sort of like a region well this is the region so this is basically saying from that set of coordinates how how much do you want to span out and then this MK coordinate region is going to Center it around this coordinate with this sort of span and then basically what you do is you call the set region method you pass in the region and that's it so our map view is actually called UI view so I need to change this and we're going to call the set region on it and generating it's going it's going it's going boom I think I'm not sure I'm really bad at geography I'm gonna assume that it's good I know there is I'm so dumb there's Joshua Tree National Park now that's a really fun part so we've gotten our three views we're gonna combine them into an overall detailed view for our app so we're gonna save this we're going to go back to the content view and what we've got here is basically it's just the text so what we're gonna do is we're gonna embed this entire stack view yeah V stock V stock V stack we're gonna embed this V Star in another V stack so that we can add our map view element and our circle image element and then combine it all together alright so and a hold down command click the sky embed and V stack we've got that this is the closing oh that's the closing bracket for that guy it's not completely lined up so here we're just gonna put a matte view so let's see that get put on the preview right here I might just have to go into live preview as well yeah let's go into live preview so we can see the map cool there's Joshua Tree National Park what we can also do is modify the frame of the map view just so it doesn't take up all of that space so if we call frame you can actually set the width and the height you can set a couple of different things I'm you just see that's not it come on autocomplete there we go set the width height alignment but if we just set the height to 300 let's say it's going to set the height to 300 but it's going to still take up the entire width like that so that's really cool and then we're going to add our Circle image in between that so we got the map view at the top and then the circle image and then we've got our V stack of labels text views on labels text views pitch no alright so we're going to add some offsets to bring that circle image into the map a little bit using the offset method and yet most of these methods are kind of new to me actually so you know I think over time when we're working with you I get a lot more they're gonna become second nature oh I think it did something wrong so offset let's try that again first all right let's take a look oh it's just a spacing if it is spacing all right well it looks like Xcode 11 is still a little buggy all right so what I'm going to do is just try to quit and every start alright let's try and generate this preview again looks like we've got an error here so that I wonder if that's gonna cause an issue here so let's change that this inside the map view inside the update UI view function the type of the UI view should probably be MK in that view all right so let's go back there succeeded all right all right so our offset did work let's go a live preview again I mean Xcode 11 is still in beta right so keep that in mind okay so in order to bring up the label we're going to call a different method called padding and we can specify the edges so for the bottom edge we want to do length of minus 130 so that's gonna pull the label up and then we're almost there guys and then in order to move this whole thing up to the top we're gonna add a spacer as the last element of this root V stack and remember the spacer kind of tries to take up all the space that it can so it's gonna push all of the elements above it to the top so that's the ending bracket for this guy right so this is my fourth element spacer all right and then in order to get the map view under the knotch so that it ignores the safe area there we are going to add another method called ignore the safe area and we're going to specify the top now I want to turn it over to you leave a quick comment below and tell me if you're optimistic about swift UI or you still have your doubts about it I really want to hear what you think and if you don't want to miss the next so fui tutorial make sure you're subscribed to the channel for now there's more WWDC and swift UI content right over there alright thanks for watching and I'll see you in the next lesson

Channel: CodeWithChris

Views: 294,212

Keywords: swiftui, swift ui, swiftui tutorial, swift ui tutorial, swiftUI tutorials, swift ui design, ui framework, swift, codewithchris, code with chris, swiftui basics, ios, xcode, xcode11, wwdc, ios 13, xcode 11, swiftui preview, macos catalina, wwdc 2019, tutorial, xcode tutorial, ios development, swiftui tutorials, what is swiftui, swiftui list, swiftui tableview, swiftui navigation, swift ui list, declarative syntax, programmaticui, programmatic ui, swiftui vs storyboard, uikit

Id: IIDiqgdn2yo

Length: 30min 52sec (1852 seconds)

Published: Wed Jun 05 2019