How to use inits and enums in SwiftUI | Bootcamp #13

[Music] what's up everyone i'm nick in this video we're going to talk about inits and enums and it's probably going to be one of the harder videos in this course not because it's hard but because a lot of what's happening is kind of behind the scenes and it's not super visible but first we're going to talk about units and init stands for initializer and it's basically just a function that runs to set up your view so we can customize these init functions with our own custom variables so for example if we wanted to use the same view a bunch of times in our app and each time we wanted to maybe change the background color well we could add a custom color into our init so every time we call this view we could just change the color and have the same view with a different color so one time we would use red one time we would use blue and the init is going to take care of all that logic for us for changing the color so i think it sounds a lot harder than it actually is so i'm going to try to simplify it down for you guys and in swift ui we don't always need to use custom initializers but sometimes we do especially as we start developing more complex and advanced apps and in knowing how to customize your knit can really help you out in the long run and after that we're going to briefly talk about enums this stands for enumerations and it's basically an easy way in our code to categorize certain things so for example if we had an app where maybe it was a map app and we had to always reference a direction like north south east or west well a beginner coder would just start typing in strings for north south east west but a more advanced developer would use an enum and create four cases on this enum for north south east and west so then every time in your code instead of having to type in it north you actually just reference this enum and this ends up helping your app in the long run because it helps you avoid typos and it also helps make your app a lot more streamlined and more efficient and we are back in the xcode project one more time let's create a new file for this video right click the navigator create a new file it's going to be a swift ui view and we're talking about initializers and enums so i'm going to call this initializer bootcamp let's go ahead and click create once it's created let's click resume on the canvas to make sure we're connected and let's get coding all right so let's start with creating a little view here let's uh add a v stack in the v stack let's add a number on the top by using a text we're going to do number five and below it let's add another text with a title that will say maybe apples being this will be how many apples there are in on this screen let's give this a frame with a width of 150 a height of 150 and we'll keep the alignment center so let's just delete the alignment let's give this a background of color.red because these are apples and let's add a corner radius to make it look a little better of maybe 10. let's update our fonts real quick so this apples let's make dot font dot maybe headline that foreground color white and let's make it the five little bigger we'll do fonts.large title and again foreground color white and let's give it an underline let's also space these out a little bit so let's add some spacing to the v stack maybe of 12. and that looks pretty good and now we're going to get in to the initializers so so far in this course whenever we add a variable whether it's a number like 150 or the color red or the text apples we've typed it directly into our code like we're doing here but we can actually create variables outside of the body that store this data this information so let's do that quickly so let's start with the color background color of red i'm gonna before the body so outside of this body here let's create a variable we'll call let background color of type color and we do this of type color because we need to let the system know what type of variable this is is this a number is this a color is this a something else so this is going to be a color i'm going to set it equal to color.red dot red so now instead of typing in color.red down here in our code we're just going to reference this variable so it's called background color so i'm just going to copy that and we're going to paste it in here so background is going to be background color so when i click resume on the canvas you can see it's still red and if i change this background color let's do blue we can see that the the canvas will update accordingly so this is pretty useful and anytime you're building screens if you're going to use this same variable a bunch of times in the view so if this was background red and we had something else that needed a background red it's better to put the variable up here because it's very easy to change it and adapt it instead of going through your code but for right now i'll just change it back to red and i want to take this a couple steps further so right now we're initializing this view with a background color of red but what if we wanted to reuse this view a bunch of times in our app and we wanted to change the color each time so this time we wanted red but another time we want to use orange or blue well what we could do is not give a default value here and now when we go to initialize this view so the initializers boot camp view which is what is on our screen it every time we go to initialize it it's going to ask us for a background color so down here we're getting this error on the preview because we're trying to initialize this initializer's bootcamp and it's looking for us to tell it what background color we want so if i click fix on this on this error here you can see that our initializer's bootcamp now has a parameter of background color and it's asking us for a color so if i add in here purple and i resume the canvas you'll see that it's now changing and in our code throughout our app every time we initialize this view here this screen and the screen could be a button or a menu or something like that every time we want to change the color all we need to do is change this one little variable and the rest of the code will stay the same so right now we're doing purple but we could change this to any color we want we could do orange and the preview will update and that's awesome and we can create these variables outside of our view for any item that we have in our body so if we wanted to change the number here the the text or the width we can change all of that so let's start doing some of that let's extract these variables from the view so first we're going to do this number and we're going to call let count of type int which is an integer which is basically a whole number and we'll set it equal to 5. and in swift if we want to reference a variable like this and put it into a string all we need to do is use a forward slash open and close parentheses and within the parentheses we will reference the variable so we'll call count here so if i click resume on the canvas it should still connect and if i change this count to 25 and click resume on the canvas our number will change to 25. and again i can not give it an initial value and then every time we go to initialize this bootcamp it's going to ask us for an initial value so here i can put 50 55. click resume on the canvas and you'll see that it updates to 55. so every time we have initializer is asking us for a color and a count let's also do the title here so let's say let title of type string equals apples and now instead of having this whole string here we can just put title if i click resume it should all build and then if i change this apples to oranges click resume you'll see now we have 55 oranges and one more time if we get rid of the default value every time we go to initialize this view it's going to ask us for a title and down here i can put whatever we want i can put peaches click resume on the canvas and now we have 55 peaches and again this is orange with 55 and peaches because in this initializer we're giving it a orange 55 peaches and i want to dive into what this is actually doing so in swift ui it creates an initializer for us and that's what this bit of code here is that's why it knows to ask us for a background color and account but really what's happening is it's creating a function that's called init and if we type in a knit and we hit enter it's going to ask us for parameters and statements and init is basically an initial function that runs as soon as this view is created to update all to update the view and create the view so right now our init really looks like this background color of type color count of type int and title of type string that's just these three things here and it's going to set self dot background color so it's going to set this is this variable equal to the variable that's passed into this function so equal to background color self.count equal to count and self.title equal to title so again this count is the one in our in our view and this count is the one that's passed in to this function and this function is what you're seeing down here so when we call initializer boot camp this really is our init statement and by default the init statement really looks like this but swift ui is very smart and it created this for us so we didn't really need to add this bit of code but this is doing exactly what we had before without the code and the reason i'm showing you this is because we can also customize our init if we want to so what does that mean so right now it's asking us for a background color account and a title and let's pretend in this view here we wanted to reuse this view for apples and oranges and every time we had an apple we wanted to use the color red and every time we had an orange we want to use the color orange well well what we could do we could do this long way like we have right now so if we want to do apples we would make the background color red and we would change the title to apple apples click resume on the canvas and now we have our red apples if we wanted to go back to oranges we could change this to orange and type in oranges but what you notice is that the background color and the title are related right every time we have the title as oranges the background color needs to be orange so typing some data in twice might lead to an issue in our code so to avoid that we can create a custom init and in here instead of passing in a background color i'm going to delete this from our init so now the init only asks us for a count any title and we're going to simply say if the title is equal to apples open the brackets if title is equal to apples we'll put self dot background color equals dot red else so if the title is not apples we will do self dot background color equal to orange and we can delete this background color here and now when we initialize all it's going to do is ask us for a count and a title and if the title is apples we know it's going to go red otherwise it's going to go orange so in our initializer bootcamp here we're now going to get this error because we changed the init and so i'm just going to delete the whole init here type in bootcamp open the parentheses and you'll see that the init now only has a count any title and that's this line of code again is matching this line of code here so let's give it a count of five and let's type in apples when i click resume on the canvas you'll see that it is automatically red but we didn't have to tell the initializer to make it red it just knew that the because the title is apples because the title is apples the background color is red and if i change the title to oranges the background color is immediately orange which is perfect so i'm going to do a video in the future where we go into detail on these if else and conditional statements so if this little bit of code was a little confusing for you do not worry we're going to cover this in detail because these are super super powerful and super important when we start writing logic in our apps but before we end this video i want to introduce you guys to enums so in swift if we ever have a situation where there is where we have something with a couple different options so for example we had fruits and we wanted to switch between apples and oranges well instead of typing in apples directly we could use a custom enum so let's make one quickly here so outside of this init i'm going to add enum and i'm going to call it fruit and open the brackets and now we have to tell it all the fruit possibilities that we have so for our app right now we're just going to do case apple and case orange so if we use this enum of type fruit instead of a string we can now tell it let's use apple let's use orange instead of asking for a title here and typing it in directly let's ask for a fruit and this will be of type fruit and we're going to delete this if statement we're also going to delete this title here and we're going to say if fruit would use this lowercase one that we used here is equal to and we'll put a period and now you'll see that there are two options for our fruit variable we this fruit will either always be an apple or an orange and if it's an apple open the brackets so if it's an apple we'll do self dot title equals apple apples and self dot background color equals dot red and we'll do else so if it's not apple it must be orange so we'll do self dot title equals oranges and self dot background color equals dot orange so now when we go to initialize this view i'm going to delete this one more time open the parentheses and you'll see that the initializer just asks us for a count and a fruit so we'll do 100 and when we press the period on this fruit we only have the option of typing of an apple or an orange and you'll notice here now we don't have to actually type out apple we don't have to type out orange we don't have to use the color red or the color orange we'll just use dot apple and this initializer will take care of the rest so i will press resume on the canvas and you'll see that it's that it's now 100 apples and just to show you guys real quick let's put this view in our preview into an h stack so let's type h stack open the brackets i'm going to cut this initializer's boot camp and put it into the h stack and to the right of this i'm going to add one more initializer bootcamp open the parentheses and this time let's give it a count of 46 and a fruit of orange and now we can see in our screen how we have using the same body code here we have two totally different views we have different numbers different colors different titles and all we gave it was a number and an enum which is a type of fruit so again i'm going to get a lot more into detail in a future video on these if else statements we're also going to learn how to use enums even more efficiently than this but i just wanted to give this first intro video to you guys to explain to you how initializers do work because a lot of in a lot of our views going forward we're going to put our data outside of the body because it's a lot more efficient instead of typing in apple directly into the body we're going to start adding our data in variables outside the body so hope you guys enjoyed this video i know it's a little longer i know it was a little harder and a little more confusing but we are getting into some of the good stuff here so i hope you're following along i hope you're understanding and as always i'm nick this is swiffle thinking and i'll see you in the next video you

Channel: Swiftful Thinking

Views: 3,916

Keywords: swiftui bootcamp, learn swiftui, how to use init in swiftui, what is init swiftui, swiftui what is init, swiftui how to use init, swiftui custom init, custom init in swiftui, swiftui enum, what is an enum in swiftui, how to use enum in swiftui, swiftui how to use enum, how to make a custom init in swiftui, how to use custom init in swiftui, how to use custom initializer in swiftui, swiftui initializer, swiftui enumerations, swiftui what is an enum, enum swiftui, init swiftui

Id: su0KLQq0JM0

Length: 19min 29sec (1169 seconds)

Published: Tue Feb 09 2021