How to create custom ViewModifiers in SwiftUI | Advanced Learning #1

[Music] welcome back everyone i'm nick this is swiffle thinking and we're going to start off this advanced series with one of the easier topics in this playlist which is view modifiers and in swift ui we actually use view modifiers all the time every time you call dot font dot foreground color dot background color those are actually view modifiers and what they do is they take the current view they add a modifier and then return a modified view so all view modifier is is basically taking the current content adding something to it and then returning it back to the view so so far in my courses we have just stacked view modifiers on each other and if for example we wanted to create the same style or the same formatting on like a button in multiple views so far we would have just copied all those modifiers onto all of our views but what's actually more efficient and you should use in your apps is a custom view modifier so by creating a custom view modifier we can actually stack a bunch of regular modifiers together to create a really unique and custom formatting and there is a lot of benefits to doing this in our code but the most important is probably reusability because by using custom view modifiers we can really control how we want all the views in our app to look and we can get all of those views to refer back to a single source of truth for how that button or that view should look so it's easier to update it's easier to maintain and it's easier to code because once we have it implemented it takes one line of code to add a custom view modifier so many of you probably already know about this but i have not covered them yet so i wanted to get this out of the way before we move into harder stuff all right so let's jump into xcode and get coding all right welcome back everyone so it's been a while since i've made a coding video uh let's start this course off just like we started the other ones let's open up xcode let's create a new xcode project and it's going to be an ios project we're just going to use a regular app and let's click next the product name here i'm going to call this swift full thinking advanced learning you can call it whatever you want we've been through this before but the team it's okay if you have none but you can put your team there the organization identifier is com dot and then your name your team name your organization name and then the bundle identifier will automatically populate with your organization identifier dot and then the name of your project the important thing on this screen is to make sure that the interface is swift ui the life cycle is swift ui app and the language of course is swift now we are going to use cloud kit and we are going to use tests in this course but we do not need to check these boxes right now we're going to add that code ourselves so you can leave this unchecked go ahead and click next and find where on your computer you want to save this project once you find a folder go ahead and click create and let's jump into the project here let's make it full screen the first thing i like to do is click resume on the canvas just to make sure that it is all connected i'm going to go up top here and change the preview device to an iphone 12 just because it i think it looks a little better all right and let's create a file for this video so i'm going to right click the navigator as we always do let's create a new file and you probably guessed it it's going to be a swift ui view let's call this view modifier boot camp and let's click create while we're in here let's again click resume on the canvas make sure this is all connected and i'm going to right click on the content view file and i'm going to delete it because we don't need the content view in this project i'm going to also jump in to the swiffle thinking advanced learning app.swift file and change the first view from the content view which we no longer have to the view modifier boot camp view let's go back into the view modifier boot camp again click resume and let's do some coding so many of you probably already familiar with view modifiers i debated covering them earlier in my courses but i think this is a good easy first step into this advanced course so we're going to start pretty simply by creating a v stack here and in the v stack let's put a very simple text that says hello world on this text let's add some modifiers so let's do a font of maybe dot headline let's do a foreground color of white and maybe a background color of color.blue before the background let's add a dot frame with a height of 55 let's add a frame with a max width of infinity after the background let's add a corner radius of 10 and maybe a shadow with another radius of 10. let's finish it off with some padding just to push it from the edges and we have this very simple button in our view now which we have made many many times before you're probably wondering what we are actually doing here but we're going to do is create a custom view modifier that basically incorporates all of these view modifiers in one line of code and before we get into it i'm going to explain why we're doing this so let's pretend like we had this button here this hello world and let's pretend like we wanted to use it on many different screens in our app well with the current setup every time we want something to look like this we would basically copy this text all the view modifiers and then paste it somewhere else in our code so down here we could just do hello everyone just to separate it and then again i could paste it down here and we could maybe make this one just say hello so this is pretty simple to just copy and paste all the modifiers and it's really not that big of a deal so if we're only using this once or twice in our app that's fine and we can just update it like this we can copy we can paste it but the big problem becomes when we want to do this a lot of times in our app and if for some reason maybe we wanted to change one of these modifiers if we wanted to change the title font let's say from headline to maybe a sub headline if i wanted to do that in all the places where we have this button i would basically need to go and find all the places where we have these modifiers in the code and i would copy and i would paste and i would update manually and this is obviously doable when we have these three but you could imagine if this was a large project and you had a lot of files this could be a lot of housekeeping just trying to make sure that you cover all of your edge cases and that all of the designs in your app are always staying in sync so what's better than copying and pasting all these modifiers a bunch of times is actually creating a single view modifier and then just updating that modifier so let's scroll back up here and outside the view i'm going to create a new struct and i'm going to call this default button view modifier this will conform to view modifier and then i'll open the brackets and just like we've created a bunch of views that conform to view we're creating a view modifier that conforms to view modifier and as you guys know every time we create a view we need to add a body every time we create a view modifier we also need to add a body and if i start typing body and i go down to this completion here you can see that the body is just slightly different than the view body and the difference is that this body comes with content and this body does not have any existing content so in the view modifier let's start by just returning the content so basically we're going to add this view modifier here and all we're going to do is return the content as it is so it's not going to actually look any different than it currently does so on this hello world text here i'm going to start by commenting all of this out i'm going to highlight it i'm going to hold the command button and click the backslash and comment this all out let's resume the canvas and you'll see that we just have our plain hello world here and instead of adding these modifiers i'm just going to add this one modifier and to do that we're going to call dot modifier and then we can put in a modifier here which is going to be the default button view modifier and i'm going to open and close the parentheses just so that we can initialize it so this modifier is what we just built here and all it is is returning the content as is and that's why this looks exactly the same right now but if i took this font modifier and added it onto the content this modifier will actually return the content plus font of sub headline and let's actually do headline so we can see that the title updates here and i want you to see that adding this font headline to the content is the exact same as if we just added dot font of headline onto this text if so i add this text and i add this font of headline this font of headline is actually its own view modifier and it's taking the content the content is all the previously added things to it so everything above this line which is just the text and that's the content that's going into this font and then they're adding the font of headline after it so i want you to realize that because this view modifier is nothing more than these view modifiers it's just that we can stack a bunch together so what we're going to actually do here is i'm going to highlight all of these comment them out i'm going to cut them let's delete the font here and i'm going to just paste them onto the view modifier up here let's uncomment this and now we can see how we have the exact same view except one line of code in our app so if we wanted to copy this across all of our buttons we could just copy and paste like this and now if we ever need to update you know what this button looks like let's say maybe we want to change this from blue to red instead of having to go to each location where we implemented this we can just go up to the view modifier and change it in one location so this is so much more efficient and we only have to write this code out one time now you might be wondering why we need to add this dot modifier because when we add dot font or dot foreground color we never have to call dot modifier before so why do we have to do it now and the answer is simply because we have not made it a view extension for this modifier and we can actually do that very very simply so up here in between these structs i'm going to create an extension for view and remember down here we're in a view so we're going to extend view here and let's create a funk let's call this with default button formatting open close parenthesis open the brackets and this is going to return us some view so just like the body returns some view this function is going to return some view and it's going to return the current view so self and then we're going to add dot modifier and here we're going to add our default button modifier so it's returning the current view with this modifier on it and because it's the current view we actually don't even need to include the word self here i just did it just to explain it to you guys so i'm just gonna delete this and we can just add modifier of default button modifier so now just like we can call very easily dot font or dot font weight we can now call dot with default button formatting and then i don't need this modifier at all and when i click resume it's still going to build so you can see how awesome this is when we set up custom formatting we can add we can create custom view modifiers and then create custom view extensions and then so easily so quickly we can add that to our text here right so if i'm building my app all i need to do is add this text here and go dot with default formatting and in one second i have the exact button that i need and that is magic and i just want to point out that when we create these view modifiers we do really need to think about what modifiers we want to put in here because some might be better than others because for example this padding is great to make the buttons look good but the actual but the actual amount of padding that we want on each screen might differ so it could be an idea to not include the padding in the view modifier and instead maybe we just put padding or maybe some spacing in our v stack down here and padding around the outside just just because that might make our view modifier a little bit more dynamic similarly i also find that including the font inside the view modifier sometimes isn't perfect because not every view can actually support a font so i like to just leave the font out of a lot of these and then we can add the font ourselves so we can add that font of headline maybe down here dot font of sub headline and then maybe that font of title so now we can use the same view modifier but we can also still customize the font the last thing i want to show you guys before we wrap up this video is that we can customize these view modifiers so when we create a view like we've done many many times in my courses there's a lot of times where we initialize it with certain parameters like maybe let background color of type color and every time we create that view we need to initialize with a color so i'm not going to do it here but you've seen this before where we create a view and then we add a background color and in that same exact way we can do that for view modifiers so i'm going to go up here to my view modifier and initialize it with a background color then i'm going to take that background color and i'm going to make that the background in the view modifier so i'll make that the background here and now every time we initialize this default button view modifier it's going to ask us for a background color so i'm going to fix it here and i'm going to fix it down here as well so what i call with default button formatting right now there's no parameters in this function so if i change this to dot blue it's always going to be blue and we cannot actually customize it through this modifier here what we can do is actually pass in the color as a parameter to this function so here i'll say background color of type color and i will pass that into the view modifier and now we can fix this here let's do dot blue let's do orange and maybe dot pink if i click resume we can now customize our view modifier so we have pretty much the same so we have pretty much the same button but with slight differences and this might not seem that crazy right now but when you start building larger apps this this is going to come in handy so i'm going to copy and just paste this down here so we get rid of the actual modifier and we could even do something like where we give this a default color so background color of type color and we'll set it equal to dot blue so if we don't pass in a background color we'll just set it to blue and now we can actually just call these without changing the color so we can see here if i click resume it'll still be blue let's change these to orange they override so when i add nothing here it's going to default to blue alright and that's pretty much it for view modifiers i know this was a fairly simple video but you can go and basically stack as many modifiers as you want onto content and then we can use these view modifiers very efficiently throughout our code alright guys now you know how to use view modifiers you know how to create extensions for those modifiers and you can go and add this into your app which should hopefully save you a lot of time and effort and i do want to finally point out that if you watch this video and you got very confused and this was a challenge for you it might be an idea to go watch some of my previous playlists on youtube which are much easier much more beginner focused this is an advanced playlist and this is going to be one of the easiest videos in this playlist alright thank you guys for watching as always i'm nick this is swiffle thinking and i'll see you in the next video [Music]

Channel: Swiftful Thinking

Views: 2,159

Keywords: swiftui views, swiftui view modifiers, swiftui viewmodifier, swiftui viewmodifiers, swiftui modifiers, how to create modifiers swiftui, swiftui how to create view modfiers, swiftui custom view modifiers, custom swiftui, swiftui custom, swiftui custom views

Id: MQl4DlDf_5k

Length: 18min 58sec (1138 seconds)

Published: Wed Sep 01 2021