SwiftUI App Tutorial: War Card Game

hey code crew so I'm getting pretty serious with swifty why now in fact I'm waking up at 5:00 a.m. every morning just to get that quiet time to practice in one of these practice sessions I decided to rebuild the war card game in swift UI and I couldn't believe how easy it was and for those of you who are new to my channel this war card game is the starter app that I take all beginners through in order to get their feet wet in my how to make an app video series that you can find right there so in this video I want to demonstrate for you how to build the war card game using Swift UI stay tuned now before we get started I need your feedback in the video series that I mentioned earlier that was designed for beginners with absolutely no coding experience and so I go through every single little thing now here's my dilemma I'm planning to release a new Swift UI video series here on YouTube and I need to decide whether I should design that series for people who have absolutely no coding background which means that I'm gonna explain every single little thing and also that beginners can use this Swift UI video series as their first foray and entry point into the iOS app development world or on the other hand should I design that video series instead for people who have a baseline foundation knowledge assuming that they've gone through my beginner series that they've gone through some of my other material and that will allow me to gloss over some of the basics and some of the details so we can move a little faster now I'm really hung up and stuck on this decision so I would very much like your feedback please let me know down below and on your way down there if you haven't already please hit the subscribe button it really helps the channel and I really really appreciate it now in this specific video though I'm going to assume that you have gone through my beginner series and that you have that knowledge of Swift and Xcode and that's where we're going to begin that's the starting point for this specific war card game Swift UI video if it does happen that you're brand new to iOS and you're watching this I would wreck you go through my beginner series first links in the description or maybe click the card in the upper left and with that said let's dive into Swift you I work hard game so here we're gonna start a brand new Xcode project now I'm using Xcode eleven point two with Mac OS Catalina if you haven't upgraded your Mac OS to Catalina yet don't worry it's just that you're gonna have to launch your app in this simulator to see the user interface that you've built whereas if you're on Mac OS Catalina or later you're going to get a nice little preview pane besides your code that gives you a preview of what your user interface is going to look like now if you want to work with so if you I you need to at least have Xcode eleven so there's that alright if you're all set and ready to go let's start this project so we're gonna choose iOS we're gonna choose single view app I'm gonna gloss over some of these details because we've set up so many projects before together if you don't know what to fill in here definitely check out my beginner series first it'll explain what all of these things mean now I'm just gonna type in war card game have a swift UI war card game right here and for the language make sure it's set to swift for the user interface make sure it's set to Swift UI the rest of it you can leave unchecked so let's click Next and let's save it anywhere you want I'm gonna save on my desktop now one of the first things you'll notice is that we have something called a scene delegate now and this is actually the app delegate responsibilities separated out into both an app delegate and the scene delegate the reason for this is because now with iOS 13 there's multi window support the easiest way to think about this is on the iPad where you can now have half your screen running one app and half the screen running another app and they could actually be the same app so those are multiple windows on you know within the same app instance and so that's why we have a scene delegate now that handles those windows whereas the app delegate really handles the app lifecycle events as a whole now the content view this is your actual screen you know what used to be a view controller with storyboard your view being in the storyboard is now just a Content view and this has your logic where you would have placed in the view controller as well as the code that generates or represents your user interface so the first thing I want you to notice is that I have this preview pane here if you don't see this it's just a matter of clicking this button and toggling it on or off again you have to be running at least Mac OS calluna or else you're gonna get a little error message there that says you need to have that Mac OS so anyways if you hit resume now you're gonna see what this code represents on the right-hand side and I want you to notice something right off the bat and that is that there is a content view which returns a view and there's also a content view previews so this code right here is the actual code that represents your user interface when you run your app this part right here is just to generate what you see here in the preview there is a distinction because this preview code isn't actually shipped in your live app this is really just for development and you can customize this in different ways for example to have to show your app within a different simulator or a different device I mean in a different landscape you could separate out pieces of your user interface so this preview code is really just to help you when you're developing the app and it just generates what you see here you can see here it's creating an instance of content view you know which is this so this line of code is what is putting what you see here on the right-hand side alright so this code right here represents the actual user interface so far we've just got a text element so this is your first introduction this is your first swift UI element it's text right and inside you pass it a string right and that's going to display a label essentially it's a UI label from UI kit now I'm going to show you another one and this one is going to be image and inside here we can specify an image asset name that we have unfortunately right now we have nothing to see because we don't have any image assets so why don't we do that first we're going to go into the asset library and in the description below you're going to see a link to download some images specifically the war card game images that we're going to need so I'm gonna just copy all these images you're gonna have these same ones if you download those and just drag it all into there now that is going to give us the back of the card the background cards 2 to 14 which is essentially two Jack Queen King and ace we're gonna have a deal button and a logo for the war card game now if we go back to content view we can put in a name here such as logo and there is a resume button here if you're not seeing any changes on the preview all you have to do is click resume it's going to go ahead and compile that code that you have and generate a preview essentially it's a simulator it's running it in the background you can do a live preview that's this button right there so if you click and enable that this is going to make it so that as soon as you make a change it's going to update there all right so that's our image that's pretty exciting now how do we add more elements to this screen well you're just gonna add your elements here right so I just showed you that text alright so I'm gonna say hello unfortunately this error is out check this out like we can't actually display the image and the text and the reason for that is because if you take a look at this this body property here it's supposed to return a single view you know it's some view meaning that it could be the type is not really known right now but it has to be a single view object and right here when you got to so the way around this is that you have to use a layout container or a layout element and there are a couple of pretty familiar ones if you're coming from UIKit so one of them is called V stack now this basically combines elements and arranges it in a vertical manner so you open up a pair of curly brackets and any elements you place inside it's just going to arrange them in a vertical fashion like we see here now check this out there's no errors anymore right because you are returning a single V stack view alright so that satisfies this but inside are actually multiple elements so that's how you're going to have a user interface with more than one element you're going to nest these different layout elements aside from the V stack we also have H stack and Zed stack and yes I said Zed stack because I'm Canadian I'm gonna come right out and say that now I'm not gonna hide it any longer it's a Z stack so you guys are just gonna have to deal with that okay so let me show you guys before we add more layout containers and add more elements on here I do want to show you guys one more thing and that's called a modifier so if you take a look these two elements are right up against each other what if I wanted to add some sort of padding let's say I wanted to maybe add 20 points in between these guys and you know I could either say that there is 20 points of padding below the image or I can say there's 20 points of padding above the label or the text element I'm gonna choose I'm going to choose this one for now so the way you add these modifiers which essentially change that element in in different ways is just to call the appropriate modifier method on that element so for instance there is a padding modifier which you can do on most elements and you specify which edges you want in a set so you could pass in an array of let's say you wanted to add that 20-point padding to the right and the left you would pass in a set and you would pass in right and left leading and trailing for me I just want to put the padding on the top right now so I'm not going to specify a set I'm just going to specify a single edge and for the length I'm going to put 20 right and you can see boom right there so that is modifiers and if you wanted to let's say change the text to a different color you just chain it you just call another method and there is a foreground color and let's just say I'm going to change it to red now you don't need to know all of these modifiers by heart because you can just put your cursor on the element here and there is this drop-down add modifier and you can see all of these different modifiers that you can add to that element and also once you start chaining more and more modifiers on an element it gets kind of messy and so a good way to organize these and make it very easy to read it's just the hit enter before each modifier and then it's going to create it in sort of like a list below that element and it makes it really easy to read all right so I guess we got to go back to live preview if we want that alright so now you've learned about the V stack you've learned about you know modifiers why don't we start combining more elements let's show the two cards that are going to be randomized and we want to show it below the logo so I'm going to get rid of this text element and I am going to add the image let's say card two or let's say back and if I wanted to add another card I would do that but the problem is that there one on top of each other right this is a V stack so it's just going to arrange everything vertically if we wanted to arrange these two side-by-side we would use what's called an H stack H stands for horizontal and it works exactly like the V stack which is open up a pair of curly brackets and we put these two image elements right inside like that and it's going to arrange these two elements inside horizontally and the visa is gonna arrange the logo and the H stack vertically on top of each other and you guessed it if we wanted a button here we would go ahead and add that here so before I show you the button element I just want to go through a couple more things so I'm just gonna I'm just gonna put it as a label right now because I don't want to get into it just now so we're gonna change this into an actual button element in a second alright so now you know about H stack you know about V stack there is another one called a Zed stack which I alluded to earlier and this one arranges elements in front and behind of each other like on top of each other I guess you could call it so if I wanted to put that green background behind everything I would basically create a Zed stack and I would put an image here and the image is going to be in the background and if I wanted to put something in front of that background image I would basically put it inside the Zed stack but I would put it below that image now this background isn't showing up I might have called it the wrong thing yeah so this background has a capital B that's why so I could either do that and then we're gonna see the green background right right there with this V stack on top of the image you see how that's happening with a Zed stack that's what that does but I'm actually going to change this to a lowercase B and change this element I'm just gonna press Enter whoops not there my press Enter and change it to a lowercase B so it's consistent with everything else alright so we've got that and we need to add some modifiers to the image the reason is because you see it's not reaching all the way up to the top so which modifiers are we going to add well the first one is I'm going to add one called resizable which is going to basically allow this element to change sizes and then I am going to add a second one called ignore safe area and this area right beside the notch that's considered not safe because if you have things go into that area I might get blocked by the knotch but I do want the background to go all the way up so I'm going to tell it to ignore safe area on all edges and I'm just going to choose all as the parameter there so then you get that now again to make it a little tight here I'm just gonna hit enter in front of these two and so that it's it's very easy to read okay so we've now got the background here now I want to show you something else you can see that everything is kind of scrunched in the middle right and that's with you I'm making assumptions on what we want we didn't have to specify constraints the center anything or do anything like that and a swift UI is just making safe assumptions but I can't want there to be some spacing in between these elements so there is an element called a spacer and the way that a spacer works is that it takes up all the available space that is left let me show you how this works so let's say I wanted to create some space in between the logo and the two cards here is the logo and here is the H stack containing the two cards if I put a spacer element here that's going to basically take up all the available space and push everything else apart the cool thing is that I can put a spacer also below the deal button and what's going to happen is that this spacer and this spacer are going to take up equal spaces they're going to share the the open space now I can put another spacer above the deal button below the two cards like that and essentially the three spacers that I've put are gonna share the space you can see how they're kind of have equal spacing and if I wanted to I could also put a spacer above the logo here and that's going to add a little bit of space there as well so that's really cool now we also have two labels we have a bunch of labels in the left and right corner if you've done the work hard game in my beginner lessons for uikit the uikit version with Auto layout constraints and all that you'll remember that we have some labels counting the score so how do you think that we would add these labels to the bottom of the corners of the screen here well what we could do is add an H stack so why don't we go ahead and do that down here below the deal button so there's our H stack and what we're going to put our two text elements for the player score and the CPU score so this player score I actually want the player label to be above the zero so I am going to wrap this up in a V stack like that okay so these uh you know I'm gonna get rid of that so there's a little more space there so it's easier to read okay so I'm just gonna copy this V stack because that contains my two labels and add another reset but change this to CPU and then we have that but I want them spread apart right they should be in the two corners of the screen there so I'm gonna add a spacer in between these two V stacks and that's gonna push them apart and I don't want them to be all the way down in the corner so in this V step we have a spacer here we have a spacer here we have one here we have one here and I'm also gonna add one below this H stack there so see the spacer spacer below this H stack is right there that's gonna split up the space evenly so we have one there one there one there one there and one up here alright also these labels this one is too close to the left edge let's add a twenty point picks twenty point margin to that so here's the V stack for that I am going to add padding and I'm gonna say leading the length is 20 this was just hit enter on that and also I want the font the text in there to be white so we can actually do that to foreground color and it's use white and notice how I didn't do it to the individual text elements I did it I applied that to the entire V stack and that affected both of the text elements inside so that's really cool alright so now to work on this V stack we're gonna do the same thing so I'm just gonna copy this actually will paste it right there except that this one's not leading we're gonna use trailing because it's the right edge right all right and if we wanted to we could just make this text a little bigger as well and a little bolder so I am going to say that I'm just going to bold that or you could change the font weight and I'm also going to add padding to the bottom edge and let's say that's going to be 20 as well okay so that's just putting some space there and do the same thing to the CPU like that's okay so if we wanted to change the font size we could we could add a modifier and change the font I forget I actually forget which exact one there is but if we looked at if we looked at the modifier list you can probably find it I'm not going to do this right now because exercise no font okay you guys figure it out you let me know in the comments below okay alright now we are going to work on the button now we can finally get to the button because our layout looks pretty good now this is pretty close to what we want and everything I hope everything's made sense so far pretty intuitive right you have your H stacks your V stacks or Zed stacks and you just have elements inside of those nested in there to kind of create this layout here alright so right here is our button element well it's actually a label but we're gonna change it to a button so let's erase this and let's call that a button and we're gonna create a new button element and for buttons it accepts two parameters an action and a label so the action is a block of code that you can pass in to be run when the button is tapped and for the label it's basically what you want to show for the button so let's go ahead and click that open and I'm going to open up a closure for the action now this we're gonna just get to this in a second as for the label when you double click that it actually opens up a trailing closure for you and in here you're gonna return an element which you want to use so check this out you know we can do that and you know it's gonna be looks like a standard iOS button but instead of text we can actually put an image in there and we're gonna use our image offset deal button the only problem is that you can see here it's all blue and that's because it just treating it like text right so the ten colors blue but what we can do is we can change we can add a modifier for the rendering mode and we can pass in original and that's actually going to show the the full-color graphic image like we want so there's our deal button there now what do we want to happen when the deal button is tapped well we want to randomize some parameters and basically show the images there but how are we going to affect essentially what you know how are we going to change this image you inside this h stack we needed to change this to like car to car 3 or whatever when this button is tapped on well there's this concept called state properties inside swift UI and so what we're gonna have happen is we're going to tie this image to a state property I'm going to tie this one to another state property and then when you click the deal button we're just going to randomize and change the values of those state properties and because these two images are kind of observing or looking at those two state properties they are going to update themselves automatically when we change those the values in those state properties it's kind of like magic you're gonna see it's really cool so up here let's declare a new state property and this is how you declare it you say that use the @ symbol and the right state and then we're gonna create a private variable and I'm gonna call this maybe random number 1 and I set that to maybe I'll set that the 2 because 2 is the lowest card that we have let's see what this says here oops sorry I put it in the wrong home place it's actually supposed to be here inside the content view struct my bad let's declare them up there because this is inside the body property here all right so we're gonna declare that and we're gonna declare another state property which we're gonna call random number and while we're at it no actually we'll do the score ones a little later let's just focus here on this first alright so ran one and ran two and we're gonna set them to two respectively so in here you know instead of card to or what we're gonna have is card and then we're gonna plus R and number one that's an integer type though so that's not going to really play nice it's not going to automatically concatenate that we're gonna have to cast this integer to a string so we're just gonna declare a string and pass in the integer like that you can see here let's hit resume you're gonna see the two there see if I change this to a three or let's change it to a four let's change this to a live preview you're gonna see that update to a four see cool alright and then for the right-hand side car we're going to do the same thing we're gonna actually remove the number and make it depend on the r and num2 state property then you see four and two and if i change this to 5 and i hit resume that's going to change to a 5 alright so now all we need to do is when this button is tapped we're going to randomize the integers randomize the state properties what is this typing if you guys have a good mechanical keyboard recommendation let me know in the comments below I'm looking for one okay so R and actually we have to use self because we are referring to properties inside of a closure here and so we're gonna be specific and specify which one we want and we're gonna use int random and we are going to specify to 214 that's what we had and then we're also gonna randomize the second state property we're going to use the random function method again here and for the range we're gonna again put two 214 all right and let's just launch this in the simulator and see what we have because we can have some fun with it right now and so you can see this is essentially Swiss you I like it it's pretty intuitive in terms of building the user interface and in terms of you know some pretty simple logic like this it's pretty easy to hook code so when I'm hitting this deal button it's basically randomizing and changing the values and these two state properties and because the two image elements are depending on those state properties they're updating themselves automatically I don't have to explicitly tell the image to change you know it's just doing it so that's really really cool now we're gonna do the same concept and we're gonna apply it to the score the updating of the score labels down here so we're gonna just create two more state properties let's just call the score one in score two and down here instead of zero for the text we're going to pass in a score self-thought score one actually I don't think we need to do yourself there because we're not working inside of a closure and we are going to also those score to score to make sure it's score two otherwise you're going to get some weird logic errors so this is reading from score one state property and this one's reading from score two or observing it and we are gonna have to update those two numbers alright so in here it's a simple if statement update scores so we're gonna say if self dot R and num 1 is greater than self dot R and num2 then we are going to say score 1 plus equals 1 which is just going to increment it by 1 also self thought Brandon no 2 is greater than self dot Brandon um 1 then we're gonna have score 2 plus equals 1 so that's going to increment the second score to oops stuff there and that's it let's run it this is the work our game guys we are done that's so easy I felt like it was really easy when I use this as a practice it was like wow mi are you serious I think teaching this to beginners is going to be a lot of fun because when we did the uikit version I had to explain auto layout constraints and then a lot of people would would apply them wrong and then they wouldn't get the same layout and was very frustrating I'm sure a lot of people just got frustrated and gave up and didn't even try to you know ask for help and figure it out the other thing is that in the UI conversion you had to connect all of these IV outlet properties to the elements on the storyboard and a lot of people would miss connect them and it would just crash their app and they would go down this rabbit hole try to figure that out and I'm sure a lot of people just gave up too so I think this is going to be a lot easier for beginners to pick up and that's always good right frustration early on is is sometimes the the killer of what could be a future amazing developer a whole new career or you know a very successful app but that early early frustration you know is is dangerous it can kill a lot of the hopes and dreams anyway so I hope you guys enjoyed this Swift UI demo for the war card game so what do you think when I compare the UI kit storyboard version that I built in my original video series versus this Swift UI version I think this Swift UI version actually has more lines of code but it is actually easier and faster to build because unlike the UI kids storyboard version I'm not dragging and dropping elements onto the storyboard configuring auto layout constraints and then connecting iboutlet properties and IB action methods and so we save a lot of time that way furthermore with doing all of that stuff with the UI kit storyboard version there's a lot of opportunities to make mistakes such as connecting the wrong element making a typo when you're connecting those iboutlet properties miss configuring auto layout constraints and stuff like that I feel really good about the future of swift UI and it reaffirms my belief that with Swift UI it's going to be even easier for beginners to get into the world of iOS app development with that said thanks so much for watching and don't forget to hit that thumbs up button thanks again I'll see you in the next lesson

Channel: CodeWithChris

Views: 36,535

Keywords: SwiftUI, Swift UI, SwiftUI app, swiftui tutorial, what is swiftui, state property, vstack, hstack, zstack, app development, iOS development, Xcode 11, ios 13

Id: lIxq4TCdlRU

Length: 34min 2sec (2042 seconds)

Published: Thu Dec 05 2019