Backgrounds and Overlays in SwiftUI | Bootcamp #9

[Music] all right welcome back everyone i'm nick in this video we're going to talk about backgrounds and overlays and they're pretty self-explanatory the background goes behind an object the overlay goes in front but these are super powerful in swift ui and often overlooked especially by beginners because we can add backgrounds on backgrounds and overlays and we can mix and match a bunch of backgrounds and overlays to get some really really cool effects so i'm going to show you guys how we can implement them how we can customize them by changing their size and their alignment and overall just get you comfortable using backgrounds and overlays because again they are often overlooked but they are so so powerful and if you can become a master at understanding how these layers work you can become an expert at swift ui in no time all right so i'm back once again in our xcode project and like we always do let's create a new file for the code in this video let's right click the navigator create a new file and this again will be a swift ui view and let's call this background and overlay boot camp create once you're in the file click resume on the canvas to make sure we're all connected and in this video we're talking about backgrounds and overlays and let's start off by calling dot background hit enter and when we get to this point so far in this course we've always put a color in here but you will notice here that it says view and not color and that's because we can put any view we want into this background now a view could be another screen it could be another text it could be a shape or it could be a color so so far in this course we've done colors we've done color dot red and we just have a plain color on the background so i'm going to hit enter to make this background multiple lines here and let's comment out this color red so other things we can do in the background we can do gradients which is all we've also learned we can do linear gradient open the parentheses get that completion going and you can see now that we have a nice gradient in our background but again we can add pretty much anything we can add a shape so we can do a circle and now we have a circle in the background now it looks a little weird because circle and the text is black but let's make that circle uh a different color let's call dot fill and we'll make it blue and we can make this look a little better by adjusting the frames so we could either change the frame on the circle or change the frame on the text so let's do the frame on the text we'll call dot frame and let's make it 100 by 100 by center and now the circle which is the background on this frame is 100 by 100 and it looks a little better and we can also stack backgrounds on top of each other so we can call dot background again and let's press enter to make this two lines and we can add another circle here this time let's fill this one with color dot red and we can't see it because it's the same size as this circle but we could add a frame between these two so we can call that frame and let's make this 120 by 120 and center now we can see the circle the red circle behind the blue circle so this is a nice easy way to stack views on top of each other and instead of changing the frame on the text we could have changed the frame on the circle directly so i'll i'm going to cut this frame here and i'm just going to put it onto the circle then i'm going to cut this frame again and i will put this on the circle so we have the same output but this time instead of changing the frame on the text directly we change the actual circle that's on the background layer so you can start to see all of the possible hundreds of combinations we can do with swift ui we can stack backgrounds and we can put a ton of different objects and layers into each background so i'm going to put a gradient into this circle let's do linear gradient and let's just leave it as the default for now that looks pretty cool and let's put a linear gradient on the second circle as well let's do linear gradient and let's just use the default colors again but this time let's change it from red instead of red and then blue let's do blue and then red so now we have this cool looking circle uh with just a very few lines of code now next i want to show you guys overlays and overlays work the same way as backgrounds except they go on top of each other instead of behind each other so if i put an overlay on the text it would go in front of the text so i'm going to delete everything we have here and let's start from scratch again but this time let's start with a circle we'll do a circle let's set the fill to color dot pink let's set the frame on this circle to maybe a hundred by a hundred and then let's add an overlay and in the overlay we can add anything we want again we could do another color we could do a shape we could do text so i'm going to put some text in this overlay let's do text and let's just do maybe a number like one and then we can go ahead and change the text we can do dot font dot large title we can do foreground color white and again so now we're stacking the circle in the overlay and this is very clean efficient code and we can do combinations of overlays and backgrounds as well so we can call dot background and then i'm going to put a background let's do an another circle let's make this one fill with uh color dot purple and let's set the frame on this one we'll do frame width and height and since we did 100 here let's do 110 and we don't need the alignment on these frames so i'm going to delete them and now you can see that the purple circle is behind our original circle and the overlay is in front now there's one more thing on overlays and backgrounds that i want to get into and that is the alignment and this is super important and often overlooked when beginners are developing swift ui apps so let's restart one more time let's add a rectangle let's set the frame of the rectangle to 100 by 100 and we don't need the alignment on the frame so let's add first an overlay on top of this rectangle we'll call dot overlay and this time when we use the completion let's use the one with the alignment option here so hit enter on that and again let's make the overlay multiple lines so it's easier to read bring that to another line and in this in this overlay let's add another rectangle this is what we've done before let's keep this center let's fill this rectangle with color.blue and let's set a frame on this overlay rectangle to a width of 50 a height of 50 and we'll get rid of the alignment on the frame i'm going to hit enter on before the parentheses at the end of this alignment here just because i like to have these parentheses so we know exactly where each modifier ends and let's add one more modifier let's add dot background and this time again let's choose the alignment option hit enter on that let's make the background section multiple lines and let's add one more rectangle let's fill let's leave the alignment as center let's fill this one with color.red and let's add a frame on this one of 150 by 150 and let's get rid of the alignment on the frame and finally let's put this closing parenthesis on another line so our code is nice and easy to read and we can see in the preview that we have our original rectangle which is black we have our overlay rectangle which is on top and it's blue and then we have our background rectangle on the on the bottom which is red and what i want to show you guys is that overlays and backgrounds have alignments and this is so helpful because instead of just putting something in the background like this and it's center we can change the way we want all these items to stack up so for example we have the overlay which is the blue square here what if we wanted to put this in the top left corner of the main object well we can change the alignment instead of center we can do top leading and now we'll be in the top leading of this black and we can do the opposite with this red rectangle instead of pushing it to the top left we can push it to the bottom right so we can do dot bottom trailing and now these views look very basic but this is how you're going to get very very efficient in making swift ui apps because as you know there are alignments on frames and we've discussed this in a previous video but there are also alignments on overlays and backgrounds and so we can really get fancy with some of the things that we're doing and if you're watching this i definitely recommend just creating some template uh shapes and texts and adding your own overlays and backgrounds and just playing around with the alignment because once you get comfortable with how you can align things you're gonna be able to make really cool views really quickly now before i end this video i want to give you guys one uh real world example when these overlays and backgrounds might come in handy so let's delete what we have one more time i'm going to use a whole bunch of things that we've learned throughout this course so far so let's do an image with a system name and let's do heart.fill so maybe we're going to make a heart button here and let's make this a little bit bigger we'll call dot font dot system with a size of 40. and let's give this a background of a circle so we'll call dot background and the alignment is going to be center which is the default so i don't need to use this alignment i'll just leave it as a default so i'm just going to use this option with just the background view and i'm going to press enter and let's add a circle to the background and i want to make it a little bit bigger than this image so we'll call dot frame and let's set a width and a height of 100 i think that looks good and again we don't need the alignment on this circle so i'm going to delete it in swift you can always leave these alignments into their code but if you're not using it and you're using defaults it's probably better just to delete it because it will clean up and shorten the actual code and let's fill this circle with a color so it's not black on black let's do dot fill and instead of a plain color i want to use a gradient so let's put this fill on multiple lines and start typing linear gradient open the parentheses and let's put each of these parameters on their own line so before gradient press enter before start point press enter and before end point press enter let's go from the top left to the bottom right so start point top leading end point bottom trailing and let's change out these colors so let's delete this color red and i'm going to do a color open the parentheses and start typing color literal double click on the color literal and i'm going to do maybe a light purple and then let's do one more color let's open the parentheses color literal double click on that and let's do a darker purple i think that looks cool and let's change the heart so that it's white because that would look better so on the image all we need to do is call dot foreground color dot white and let's add a quick shadow behind the whole button to give it a little bit of a 3d effect so i can add the shadow either to the image i can add it behind the whole background or behind just the circle and i'm just going to do behind the circle because i think it'll be a little cleaner so after this frame of a hundred and hundred let's call dot shadow and let's use the color radius option we'll keep it black with a radius and an x of zero and i want to move it down a little bit so it's not around the entire thing so we'll give it a y value of 10 so that moves it down and this circle is looking really harsh so let's change it from black to a lighter color so i want to use a derivative of this of the purple color so i'm going to copy this purple color paste it into the shadow and let's double click on it go to other and now i'm just going to change the opacity of the background layer of the background color and let's put it maybe 30 percent that's almost too light so let's give it maybe 50 percent and i think that looks good let's press x out of that now we have a nice shadow behind our button and one more thing i want to do is add a little notification icon as if this was a button in your app that you had notifications on so on this background here on this circle frame i'm going to call dot overlay and we're going to align it to the bottom right so we need this alignment option and let's add a circle as the content so let's do a circle let's align into the bottom trailing and let's give this little notification section a frame we'll give it a frame with a width of maybe 35 a height of 35 and we don't need the alignment on the frame of the circle so let's just delete that so you can see our our overlay is in the bottom right corner of our button let's make it blue like notifications usually are so fill color blue and let's put a little number on top of this and we can do that by calling overlay on our circle so down here we'll call that overlay and it's gonna be right in the middle so i don't need an alignment on this overlay let's put this as multiple lines and let's add a text with a number of five maybe there's five uh five notifications right now let's call dot font maybe headline and foreground color of white and i think we can make this a little bit better by giving this circle button a shadow as well and i want to use the same shadow color that we use on this purple so i'm going to copy this shadow modifier and paste it on so that it's on this circle not on this text overlay but on this circle so we'll paste it here and this time instead of moving it down instead of just moving it down 10 i want to move it i'm going to move it down five and to the right five so it's in the bottom right of this let's click off it so we can look and now i just want to review what we did here because this is really starting how we can get really cool and complex views buttons shapes in our apps we added an image we changed obviously the color and the size of the image and you can see that heart here then we added a background to the image which is this big circle the big purple circle that circle we filled with a gradient which we did a linear gradient and then on top of that circle we added a custom shadow with a derivative color of our circle's color and then on as an overlay to that background layer so an overlay to the circle in our background we added another circle here and we added a blue circle we gave it a frame of 35 and we aligned this new overlay to bottom trailing and that's why it's on the bottom right and we can move that circle around just to show you we can do a top leading now it moves to the top right but let's put it back bottom trailing and then on top of that blue circle we added another overlay here with the text and then we have the the notification number of five so now as you can start to imagine there are infinite possibilities that you can do in swift ui in terms of layering and stacking items and this is just one version but i want to show you that you can add backgrounds and overlays to objects and then you can add backgrounds and overlays to backgrounds and overlays so you can really stack and get creative with this so this video was a little longer i hope you guys are starting to understand why i am going into detail with all of these alignments and all the cool creative things you guys can do once you really master these alignments and these basics so that's it for this video once again i'm nick this is swiffle thinking and i'll see you guys in the next video [Music]

Channel: Swiftful Thinking

Views: 3,597

Keywords: swift, swiftui, iOS development, swiftui bootcamp, learn swiftui, how to use background in swiftui, how to use overlay in swiftui, swiftui how to use background, swiftui how to use overlay, swiftui what is background, swiftui what is overlay, swiftui overlay, swiftui background, swiftui .background, swiftui .overlay, how to add background in swiftui, how to add overlay in swiftui, swiftui add background, swiftui add overlay, swiftui edit background, swiftui edit overlay

Id: FQdGt24LMRs

Length: 18min 20sec (1100 seconds)

Published: Sun Feb 07 2021