SwiftUI Views Live: 3 - Color Schemes in SwiftUI

okay we are live welcome everyone so I see we have a lot of people here with us we have Ron from Washington we have one from Lima Peru Wow hey Juan one when I was in Lima and the first time I ever had a cow heart cooked a special way was in Lima and it was oh so good my wife still makes it for me we also have AI Gary from Arizona welcome Gary Gary's one of my patrons he's actually testing and giving a lot of good feedback on my course right now we have Stefania welcome again Stefania a regular visitor we have Tim Tim was here last last week he's from Richmond Virginia oh no I'm sorry I mix those up yeah we have Tim from the Netherlands and Ronnie from Richmond Virginia then we have Stuart he's from Vancouver Canada all right awesome John holy crap John 4 a.m. Sydney Australia well thank you for taking the time to join us all right and we have a Leonids from Mexico that's awesome that's great guys Instanbul moscow welcome guys all right let's get started if this is your first time let me just cover some of what we do here on this Swift UI views live series so I'm gonna have you guys pick some numbers and these numbers are gonna be used to randomly either select a UI or some other things don't enter a number right now we'll cover that later then we're going to cover some of what's being taught today it's gonna be colors and color schemes and then we're going to use those numbers that you gave me and search for some random elements we're gonna be I'm gonna be asking you for two different numbers today that's even some more random 'ti to this and then I'm going to try to spend 20 minutes working on the UI I usually go over there's a lot to teach I can really get detailed and I love to explain things as I'm more so there's that aspect to it too so I try to keep it short but I say 30 minutes but it always goes to like 45 55 minutes okay and then I really want to so I'll just hang out laughs and have some fun I know a lot of us are excited for WWDC coming Monday I can't wait all right so let's just jump into this and not waste any more time let me just pull this up here we have some more people Dave st. Louis st. Louis Missouri it's awesome all right okay so we're talking about colors and I'm going to give you guys sort of like first an overview and how I structure colors and color schemes I've created so many UI over the last many years and I've come up with all kinds of like tips and tricks for creating the perfect color scheme and I don't think it can be done but I think heating it you can get pretty close I've come up with a pretty good system of trial and error deleting and adding and removing and changing and this is what I come up with for a color scheme specifically for Swift you I'm talking about of course you can use this for any platform and any technology but I say swift UI because if you look at the names of these colors that I create here these these five colors we have accent color which is what the modifier is called when you're giving an accent color to interactive things you can interact with like buttons so that's accent color then we have a background color which is what I use you know in the back by default we have white and black for light mode and dark mode those are your default colors but we can change them so I use background color for that and then foreground color that's the color of like text or if you're using SF symbols you can use foreground color to change those icons and and you use the foreground color modifier so I call this foreground color for that and then we have secondary and tertiary colors secondary meaning it's like it's in addition to the second color in addition to the rest of your color scheme and tertiary meaning is the third color in addition to your color scheme and those are optional actually all of these colors are optional except for I'd argue with except for the accent color to me accent color is a must hello Jean from Paris and we also have Dave from st. oh yeah I already said that st. Louis Missouri yeah they've got a double shout out all right so let's see now there's another thing that I do too when it comes to adding colors to views I also you know these are these what's called named colors we're in the asset catalog we can add a color you can right click and say add color set and it creates what's called a named color you can give it any name you want and then you notice I have two colors on mine and that's for light mode and dark mode so you can come here and you say I want it for any and dark pretty much any is light mode and darks for dark mode so that's why I have two colors there whoops let's escape that delete that color now to reference these colors you normally reference the string you say color and then you reference the string that can lead to errors and you have to remember colors I don't like to remember things so what I did is I create an extension I don't need a canvas for that I create an extension off of color so when I use color I could just say color dot and I start typing in theme and it shows all five of my colors so that is why I have this extension set up just to organize my colors so I don't have to remember oh I need to type in this word for this color or this word for this color I don't want to do that I want auto complete to tell me what I can use so I just start typing in color dot theme that's why I prefix all my colors with the same word okay so that's how I set up colors in Swift UI now we're gonna talk about coming up with colors in just a minute so what I want you guys to do to find a color I want you to pick a number between one and ten and we're going to use that number to find a color not a UI but just to find our first color and we're going to use that number to specifically find the accent color remember to me this is a lot of this is subjective okay to me the accent color is essential you want to pick a color that matches your brand or your clients brand or your clients logo or to communicate a feeling you know if this app has a lot of energy or if it's one if you want it to be commie can choose different colors to communicate that feeling so to me accent color is the essential one okay so we're gonna look at some numbers here we have Tim Tim says nine he's the first one okay great guys we're gonna use that number to find a color now here's what I'm going to do I am actually going to go to Adobe color let's go right here if you do search you'll find the first one it's just a Dobby color and Adobe has a bunch of themes that you can use so what you want to do is go to explore it's that second one right here and these are kind of like they're suggested themes of the day or something like that but you go down here to view and then you want to go to color themes and go to most popular okay so there we have all of our most popular colors so we're going to do is we're gonna go nine over and try to find a good color from that an accent color so let's see one two three four five six seven eight nine okay so this one's gonna be challenging right because these are very light colors but this will be this will be a good experience for you guys and as I show you how I find colors and then how I tweak the colors just a little bit okay so we have a couple of choices here I think for an accent color I would go with the brightest ones so we could either go with this this pinkish color here or this greenish color right here so let's try this let's go with the pinkish one first I'm just gonna click on copy copy to my clipboard so that is a start that's a start for our colors scheme here and then I'm going to use this other site called color mind color mine dot IO and what this tool is it generates color schemes stun existing images and color schemes and and a lot of other things it has an algorithm to figure out colors that go together it's pretty involved so here's what you can do first of all you might be asking yourself well why don't you just use Adobe color to find your color scheme there there's a problem with existing color tools out there and they don't they don't consider a light and dark mode and I think they don't work well for mobile UI as well like Adobe color you know that it's used for for everything it's used for design photography text on photographs you know things like that but when it comes to UI I think they could use some improvement not just Adobe I'm talking about I'm talking about pretty much a lot of the color tools out there and so they don't consider light mode and dark mode they don't give you two colors to say this is going to be your light background it's gonna be your dark background and this tin color or this accent color it looks good on light this light background and it also looks good on this dark background and then here are your secondary and tertiary colors so they're lacking a little bit right and the closest tool I found that considers this or takes us into account is this tool color mind so what I so what you can do just to give you a little tour here you can lock a color that's what I'm gonna do I want to lock that middle color that's gonna be my accent color then I want to paste in that pinkish color that I copied oops oh I copied the pound sign so let's paste that in with the pound sign there there we go now with that color in there and that's locked it's going to use that color and it's gonna try to find matching colors around that so first of all this is what I do I don't use this tool directly you can see other matching colors here and the middle color the one thats locked always stays the same right so these are just ideas instead what I do is I go into website colors up here on the tab and I use this tool why do I use this tool this one the website colors is more geared toward a UI using a UI okay hello Raju from India team spirits here he's late but he made it he said he would you said you'd come and he did okay good now this is what I like about the website colors you come down here it shows you your colors and I kind of have a system of how I use this website to find my color scheme you notice over on the right hand side here or the left hand side it shows the light shades that's gonna be my light background dark shades that's gonna be my dark background and then the middle color will be my accent which we don't have set right now so let's set that okay and then let's generate alright now you see the problem with the dark shade there you're probably not going to use that for your dark background right bright red and part of the problem is because our accent color is too light so usually what I do is I take an accent color and I want that accent color that should be the thing that sticks out on your UI that's the thing that makes it super obvious that when you look at you the UI you're like these are things I can tap on these are things I can interact with if you look at Apple's apps they usually don't have a they don't set a like background color in a dark background color they usually just go with the default but their accent color their accent color really stands out really you makes it obviously you can interact with it so that's what I want to do here I want to make this so it's pre obvious that you can interact with it so I'm gonna brighten it up a little bit you go toward that upper right hand corner that's usually what brings out the the color I'm not gonna go all the way over I'm just going to bring it over just a little bit a little bit more okay now that we have that set let's generate again and now you start to see the light and background colors make more sense right hello my whole from India glad you could join us okay now if you keep scrolling down okay so that's just the layout and how I use those colors the light accent in the dark accent those are my secondary and tertiary colors but remember those are optional we don't have to use those okay and if you come down here this kind of like gives you somewhat of a preview of your color scheme and how it might look in a UI it's the closest I can get so this being our accent color that shows up great against our dark background and you can just see how the other colors show up and then if you keep scrolling down then you see sort of like light mode so this is the light background color that's pulling from the first color that we have here and again you can see you know the text changes here - this is our accent color that looks good on light mode and you can also test how the secondary and tertiary colors look on there - now it's not perfect well I would love if any of you are web developers and you feel like you need a project to take on color mind has an API has an API that you can use to provide colors and you know lock colors down and get the other four colors or you know all that functionality it has an API for that if you guys want to create a website that has you know two [Music] templates actually here let me show you something let's see let's go to keynote see if I have here yeah color scheme tester so this this is what I use to test color schemes here it's a this is this is a keynote file and you see I had the five colors going down the middle right and then I had these templates right here these are just kind of like templates where you pick one and then you can add colors to it and see how it looks before you actually jump into the project if you can make a webpage that has these on here or you can pick which which template you want to use and then it shows a light mode in the dark mode and when you cycle through these colors you know when I click generate and it cycles through colors it could just apply those colors to the UI that would be awesome like it would take this last color that would be the back for the dark mode take the light color that would be the back for the light mode I used to be a web developer a long time ago and I just I just don't have time I don't know if I can really figure it out since I've been in a mobile development arena for so long so if you guys want to take that on I'd be awesome definitely loop me in on that I did message the website developer here that owns this website and asked if he could consider doing that and I never heard back from him okay so let's start using these colors in side of our Xcode project let's see what I'm going to do is I'm going to move this down here close that okay and I'm going to move this up here so I can see both and we're going to start applying our colors so accent color you know the I have two colors but you don't have to use two colors you can just use one I had two colors there because then if I want to adjust it a little bit I can do that okay at this point while I'm adding these colors to the asset catalog here I want you guys to pick another number between 5 and 15 along with the industry so you can say 10 health so and then we're going to use that to find a UI to apply these color schemes to remember industries are like health fitness finance you know to do lists you know anything you want to do or just say productivity business something like that okay so I'm gonna apply the accent color first and what you can do it you can actually set select both at the same time click down here to show color panel and your color panel has this eyedropper tool so you can select colors so we'll select that and boom we have our two colors they're background color for remember this is the light appearance the one on the left so what I'm going to do is just use my eyedropper tool and select that one doesn't change a little bit but it did change like we go to the floating-point numbers you see like these are normally 1 these are all one but when I selected the color it changes on 0.9 something something dark mode use the eyedropper to look like that click that dark color now here's something that I do it's kind of like a lazy way test this or to set the foreground color I usually swap around the background color with the foreground color that's what Apple does they they swap around the block in the white right so your text is black and light mode and then when you switch the dark mode the text turns white so what I'm going to I'm going to grab that dark mode color hold down option so you can duplicate it and drag it over onto the foreground color for light mode and I'm going to do the same thing with the background color hold down option and just set it like that now my secondary and tertiary colors we might not use these but I'll set them anyway and if we decide to use them then they're there for use there is one small change I'm gonna make now we'll wait it in their mind we may or may not change these I usually like let me tell you what I usually do here for my colors I usually go into the the background color the darker color here now usually darken that up a little bit I try to get it into this this corner over here the lower left-hand corner um I think it looks okay right now and that might be dark enough but we might tweak it for the secondary and tertiary colors I usually lighten those up a little bit because I don't want those to compete with my accent color so I might like take them and just kind of like lighten them up just a little bit still maintaining the color a little bit at this one I don't I'm not too crazy about it I might go like maybe it looks just like a lighter pinkish color something like that so there but we'll use well adjust those this one could even be lined up just a little bit more yeah so the main the main thing is I don't want it to compete with backside color that's the main thing so secondary color let's click on both of those use my eyedropper and I'll set this tan color geez then oh you know I'm saying it looks darker it's because I licked in the shadow area there let's go down here and that there we go line it up a little bit and for the tertiary color let's set that there so we had that color there there's our color scheme and that's my quick and dirty way to set up a color scheme now we have to test it because even though these colors might look good all next to each other as soon as you get them onto UI you're gonna be like whoa I can't believe those colors don't actually match and you're gonna have to tweak them a little bit so that's our next step okay that's who we have here so Manish okay good he says nine sports entertainment okay so we'll go with sports and let's see let's get our web page up and what we're going to do is we're going to just do a Google search for I I'm gonna start with mobile UI and then I'm going to say sports go to images and we have a bunch of images here then we're going to go nine down so one two three four five six seven eight nine all right we're gonna come to this one right here and let's take a look here there's a lot going on in this screen okay all right here's what I'm going to do now remember I'm not creating a functional app here okay I'm gonna lay it out the best I can I'm gonna create a mock-up and so with that let's we might not include all of these details because we just don't have time right it's already been 20 minutes I'm gonna spend another 20 minutes trying to build as much as I can of this out using the colors that we have hold on one second ask my wife for some water I freely bring water with me but I forgot today alright so this is where we're going to use let's zoom this in a little bit and I'm going to scoot this over keep it right about there just so we can see it whoops okay all right so I have a I have a view already set up here and the first thing I want to do we're going to use a background color right we want to use a background color now in order to do that you need a Z stack to put it on the back so we're gonna click here yeah command click hint for some reason it's not giving me the options it usually gives me an option to embed so we're just gonna have to do it manually here okay z stack the manual labor of typing so hard okay now these these colors remember I created a color extension to access them so I can just say color theme and then I have my five colors there and I want background now when I use background here now we need our canvas up let me zoom that boy I have iPhone se that's fine you're probably not going to notice much of a difference that background color is pretty close to white but if we go to dark mode then you're going to see it come out so let's go dark yeah now you can see the color more you notice there's that gap up atop that's the safe area we want to ignore the safe area here so we're going to say edges knowing safe area we're gonna say all there we go so now we have our background color now looking at this UI see this is a problem that I notice a lot of designers make and it's not really their fault because they're thinking of Android and iOS iOS has a human interface guidelines and it has that it talks about the tint color or our accent color which is used only for things you can interact with but you notice here their background for their header is very similar to the buttons at the top right so we're gonna have to use a different color for that header part maybe like a secondary or tertiary color so we'll try that now in order to do that we'll create a V stack there we go now the embed options come on oh I'll bet it in a V stack and let's work on that header what I'm going to do is I'm just going to create like a rectangle to stick it up there so we'll start with the rectangle object and rectangles are pushed out views it's gonna fill up the whole view we need to give it a height so you can also see is it working yeah it is you can hold down a control option click on the rectangle and it brings up your padding and frame options if you have other modifiers on there it'll bring up those modifiers as well oh yeah good point Stuart he told me that like two weeks ago so the reason why these options don't come up like when I was holding down command I click on a view the options don't come up because the canvas wasn't up and start Stuart pointed that out to me a couple weeks ago and I already forgot so let's see you command option let's give this thing a height and we'll say it's 120 start with that all right we didn't give it a width so let's delete that okay so there's our top part there now we need to push that up to the top so let's add a spacer goes up to the top doesn't quite go all the way up so we're going to have to have that frame ignore the safe area or does it say top I have to ignore the top then it goes all the way up now we want to give this shape a color so let's use our fill and we're going to use color dot theme and we can try we'll try secondary first and then we'll try the tertiary so there's our secondary color we'll stick with that for now and if we want we can give it an overlay so it says home on there so I'm going to add a overlay to it and inside of here we'll say text and we'll say home it looks like that home it's a maybe bold we can make it a little bit bigger this isn't what I'm mocking up doesn't have to look exactly like the UI I want to kind of get the essence of it to show you guys the color so we'll go to text we'll make that a little bit larger will say title and we'll make it bold okay there we go now we have this we have this menu across the top and we can achieve something like that by you know using some capsule shapes so let's add that next and you know here's what I'm going to do we want that you know if we change the height of that rectangle we want those capsules to move with it because you know that menu to move with it so what I'm going to do I'm actually going to add that menu as an overlay to my rectangle and then I'm going to offset it down a little bit and then it will stick with my rectangle so let's add another overlay here and in my overlay I'm going to add a capsule all right and we need to adjust the height of that capsule so I'm going to add modifiers I sometimes I like to put these things on a different line so the indenting looks better okay so for height let's say 50 there we go and we probably wanna put some padding on the sides to kind of like a so it doesn't extend all the way out so let's go back in there and let's add some padding on the sides here and let's give it an amount like 20 maybe 40 there we go and then we want to offset this too right so I'm going to come down here we're stalling the capsule and I'm gonna add offset it's only gonna move on the y coordinate there we don't need to move right or left so for y let's see this is 50 let's try 50 moving it down 50 that's too much try 40 that looks right okay now you notice the home is really close to it right so we'll have to add some padding to home or we can also add some we could also add offset to it too I think a padding will work actually if I just click on text again pull it padding let's try adding some padding to the bottom yeah that moves up a little bit let's try 20 that'll work okay all right so we had the first part now the background to that shape that's white right now the capsule and it's white because shapes use the primary color and we're in dark mode and the primary color and dark mode is white so we want to maybe use one of our colors for it maybe we can use the tertiary color so let's try that actually we need to add it as the first modifier here or else it won't work the fill only applies to shapes and once you run the padding modifier it returns a view so you can't use fill on a view you can all these misshape and let's try our tertiary color theme tertiary yeah you know I I kind of don't like that let's uh let's leave that alone for now actually let's let's leave it as white let's leave it as the primary color it might work but for now let's add another overlay to that capsule which is going to be our button for our menu so on the capsule I'm gonna add overlay on that that's just going to be another capsule and okay this is what you have to do so notice I'm adding the overlay after the offset I want to add it before the offset so it moves both of them down and let's see I'm gonna hold down command option and use my bracket keys to move it up there now that shape is covering up our existing capsule so let's do this let's indent this again we're going to add some padding yeah no yeah I don't want to give it a width instead I'm not gonna use padding I'm gonna give it a fixed width well just say it's not high we want the width to be 100 no oops wrong one oh my gosh either way this one I just want capsule okay now it's right in the middle and let's give us some colors so we can actually see what it says here and we want to use our feet or accent color actually our background okay there we go and then we want to push that over so it fits over on the left hand side of the capsule now how do you do this there's there's a couple of different ways and what I'm going to do is I'm going to use a flexible frame to make that capsule the one that's orange or reddish there I'm going to extend the frame out so it fills up our whole shape and then I'm going to give it alignment so it goes over to the left or the leading so here's what I'm going to do let's go down here when I say flexible frame I'm talking about the frame that has these parameters with min width max width min height and you know things like that this is the flexible framer here that's what Apple calls it and then I'm going to give it a max width and I'm going to say infinity and now you see that it's like it's pushed all the way over right that the I don't know how good the resolution is here the it has a blue border around there that pushed it out and then the frame here also has an alignment so what I'm going to do I'm gonna set an alignment but I'm going to make it leading and it's going to push it all the way over to the leading side now it goes outside of my other capsule so I think what I'm gonna have to do is I'm going to have to give it the same padding as its parent so let me do that Yeah right there oh okay now this is the wrong one I just take a look here that's a rectangle we have the capsule L it's right here I need to use that padding there we go now it stays right within the parent and then we can give us some we can give it an overlay for some text to go with it why not use a picker you know that's a good question Manish I could have used a picker to match the because that's normally iOS to match the human interface guidelines it's like a segmented control that the picker I could have used that yet but I kind of want to just match like this UI as close as I can to demonstrate the colors yeah so this that this isn't going to be an operational UI it's just going to be demonstrated to show the colors really it's what we're looking at here okay all right so we have that top part done and then down below let's start filling out the rest of it we have these cards right and what I'm going to use I'm going to use some rectangles here to fill out those and let's see we can put it between the header part and down here so I'm going to create a rounded rectangle and we'll say a corner radius 20 and you notice that it's a push-out view it's gonna fill up everything here and what I'm going to do is well let's do this let's add a couple of them and because we have these we're not going to need the spacer I'm gonna need that text yeah what said let's add one more there we go so we have some some cards there that's a similar to our UI right and then we want to give those some color to the first thing I'm going to do though is I'm going to add some spacing between all these elements I'm gonna do that off the V stack that they're all contained in that's the parent and let's see let's give it like 20 we'll see how that works yeah that looks good and I think I want some padding on the side here now what I'm going to do if I add padding to the V stack it's going to affect the the header up top right where it says home and it has that that menu so what I'm going to do instead is I'm going to group all these rectangles and add padding just to the group so let's do that let's hold down command we'll say group to embed those I'm gonna highlight these and move those up inside the group then I'm going to add padding to that group and specifically we want horizontal padding and I think the default will be fine I don't think we need to give it an amount there we go so now it comes to time to like apply our colors and we want to either use the primary or secondary color I mean not the primary secondary we want to use the secondary or tertiary color for these or you have another option to another great color choice is the color dot secondary it's not part of our color scheme but it works great in a lot of cases and let me just show you how that works here too now normally you use fill to give shapes a color right but if they're all in a group and you only want to apply it one time apply that modifier one time use a foreground modifier a foreground color modifier then we're going to use color dot secondary on these guys there so the reason why I like color secondary is it'll change it's a little bit see-through so if you have things in the background you can see through them and it will change for light mode and dark mode so you see when I go into light mode they're gray and when I go into light mode or dark mode they turn dark or gray or a lighter gray so it's kind of like they get darker or lighter depending on what mode you're in and yeah I think what I'm gonna have to do if I use the color secondary then I'd give us some opacity to lessen the opacity and make it more transparent just so you can see things behind it so let's do this let's we can let's try our theme colors first I feel like we need to at least give them a shot if we use the secondary here so it matches that the top and that looks fine I think I'd probably give it like a little bit of transparency though just to lighten it up a little bit so what I'm going to do is apply opacity and say 0.5 yeah and I'd probably do something like that maybe a little bit more and then when we look at light mode and see how that looks you see how it kind of like blends in more doesn't really take your attention away from the other controls or the like that accent color or the things that are that you can interact with so if we give these some content we have about 4 more minutes left let's try to add a little bit of content here let's add some text and maybe we add a button to these to these views as well so let's do this let's add an overlay and for my overlay I'm going to add a B stack and then inside of here I'm going to add a button to the bottom let's see here sort of like you see how it says upcoming in my contest and has an arrow let's add something like that so I'm gonna add a spacer and then I'm gonna add an H stack and then here I'm gonna add a button there'll be no action right now let's just hit enter oops yeah okay and then it's going to say we'll say upcoming just like we have here texts upcoming okay there's our button hard to see it is down there though let's give it I'm going to add some padding to the bottom of the V stack there yeah it comes up a little bit and let's make that text bold it looks like it's bold there I'm just gonna come here go to the weight go to bold and then it's hard to see you guys I know it's hard to see right now so what I'm gonna do is I want to add accent color to that what I can do is I can just go to the parent and set the accent color there then anything that's a bun or anything you can interact with will automatically change to our accent color so here I'm going to say there's an actual modifier called accent color I think you can see why I named these colors the way I do so here we want dot themed accent and did not change our button I'm not I'm not quite sure why oh I know why because I'm overriding it with a foreground color so see this is why I don't like to use foreground color for shapes I'd like to use fill because they can override colors like this so for example if I comment out that foreground color you'll notice it goes it uses the accent color here right so what can we do here we can either move the foreground color to the shape itself or we can just apply the accent color to the button itself I think what I'll do for now is I'll leave back the foreground colors the secondary color is set and I'm just going to move the accent color up to the button so the button overrides the secondary color that foreground color is pretty strong it doesn't even I've noticed this before the foreground colors seem to override accent colors I don't think it's right I should probably submit a bug for it I think the accent color should override the foreground color weren't necessary but I think someone in in my slack group in Utah they investigated it and they actually saw they went into the button and how the accent color gets set and they set the accent color with the foreground color modifier so so if we want to use this we'll just have to say foreground color all right there we go I think I want to make this a little bit bigger too just so you guys can see it I know it's kind of small right now so let's change it to title okay now we want to add that arrow to it so let's finish this off by adding our arrow I'm going to use a spacer and then we want to use an SF symbol right we've probably find an arrow for that so I want to use an image specifically I want to use the image that has the system name parameter like that and let's see we probably guess this might be like arrow right yeah there we go okay so here's what I'm going to do I want the same font and font weight apply to my arrow but you guys can't see it right now so I'm actually I'm going to grab these modifiers the font font weight and the foreground color I'm gonna apply it to the H stack so I'm gonna move those down and it will get applied no you know what I can't apply fought weight to a view but there's a way around it I'm gonna show you guys so we want bold right so what I'm going to do is here's what we're going to do so where it says font I'm going to say font dot system and we want the textile right here and here we can set the large title and then off of that you can say wait and from here you can say bold so you can apply the weight directly to a font and then put that inside with the font modifier and then it will work okay on this we probably want padding on the side too so you notice we have padding just on the bottom you can you can group these up you can create an array of the edges of where you want this padding I'll just show you the easy way to do it you can hold down control option click on each stack yeah that's right Henry when in doubt always use foreground alright and then you see these check boxes down here I'm just gonna click on those and you can see it creates an array down here of padding okay so that's as far as I got in 22 minutes we can keep working on this and keep adding more and more and more to it but I don't want to keep taking up you guys time what I will do though is I will continue working on this outside of the live stream and what I do is I put these projects up on my website so there's probably a link in the description that shows you where you can go to go to the previous episodes and get the projects for the previous episodes and the slides and you can go there and get it so I'll work on this today I'll add some more touches to it to kind of like clean it up a little bit now there's there's one thing here that I just noticed you notice the the buttons here the upcoming in the arrow they are kind of they're kind of washed out and that's because the opacity is being applied to them down here so what you'll have to do what we can do what I can do is move them up onto the rounded rectangle itself and see the way it's set up I yeah we'd have to add it before the overlay so rounded rectangle add the opacity and then add the overlay so it's got to be the second modifier or the first modifier then that way it shows up better it looks a lot better all right questions team spirit how do you integrate tab bar into switch UI well that's a different modifier if you want or it's a different view actually altogether if you want it's kind of like that outside the scope of this yeah it we could do it but check out my free book there's a link to it there's a free book that you can download and then there is a tab bar if you go onto into the control views chapter then you can see the tab bar basically what I would do here is I've come to I probably like the Z stack or maybe the V stack and I would surround this and then change it to the tab view right there and then it'll like give us a tab bar down at the bottom there's no buttons in it but then when you have to do next is you have to add other modifiers to add your buttons okay hey Bob from Berlin yeah I know that one took me a while to figure out man I had to get around that that constraint there for the fonts okay so I hope that answered your question teen spirit or at least gives you a direction to go and follow up on to add the tab bar to the bottom maybe what I'll do is I'll I'll add that to the project afterward okay so if nobody has any other questions I'm gonna wait a little bit cuz I know there's like a 20 to 30 second delay and the questions coming in but I hope this helped you out I hope this gave you some ideas on how you can create your own color scheme hey Paul from Toronto I'm glad you like my books man oh this gave you an idea of how to create a color scheme start with the accent first you know if you don't know what else to do then don't do anything just use an accent color and just use the black and white that Apple gives you it'll handle all the colors for your text it'll handle all the colors for your background but start with your accent color first and then move on to your background color play around with that and see how that looks against your accent color and then if you want to explore more then use the foreground color secondary and tertiary so what you could have done like we talked about here you could have just stayed with the secondary color for those backgrounds that'll work too like let's see if we come here Apple they give us the secondary color to make it easy for us thinking about the secondary color tubes you can keep layering it on top of each other it looks looks worse here cuz we're applying opacity you can keep layering those secondary colors and they'll keep changing in light mode they'll get darker and darker as you layer them in light mode they get lighter and lighter and it changes it for you automatically okay there we go am i into neuromorphic design I think it's pretty cool Neal morphic design I I do cover that in my book with some examples under the shadow modifier I believe and I think it doesn't really have a cool effect but I haven't really seen anything that I haven't seen any production apps that use it so I don't know if I'm using an app that's just a neo morphic design I'm not quite sure how I feel about it I like the way it looks but in terms of using it an actual UI I'm not sure alright hello Sunil alright guys that's it for this live episode of course it's gone over again I shouldn't try to limit it to 30 minutes I think that's a little unrealistic so I'm going to maybe just say it's going to be up to an hour long okay so that's it I'm signing off thank you guys again for joining if you are interested in shapes we're gonna cover a wave shape tomorrow and how to use that and Swift you like tomorrows in tomorrow's live episode so you're welcome to join that as well that's at noon alright see you guys

Channel: Mark Moeykens

Views: 3,838

Keywords: SwiftUI, Swiftui views, swiftui shadows

Id: geq442roxO0

Length: 51min 10sec (3070 seconds)

Published: Sat Jun 20 2020