SwiftUI Shapes Live: 1 - The Trapezium

all right I think we're live now let me set this up here I want to check with you guys to make sure you can hear me okay so if you can let me know and by the way these live streams they're like 30 seconds delayed so as soon as I start talking it's gonna be 30 seconds before you guys can hear it and if you message something I'm not quite sure what the delay on the messaging is maybe that's more instant but we'll see okay yeah let me type in a message here just to make sure make sure you can see my screen - awesome Thank You Stuart thanks so much okay so let's begin now I had this idea of creating shapes and by the way Stuart I watched your video and this is so good if you guys haven't subscribed to Stuart Lynch's channel yet you should head over there and check it out he had a really cool video come out on shapes which is actually the topic that I'm talking about and he had a really cool way of going about it and building his custom shape from an SVG it's a scalable vector graphic I think it's called and he also was able to animate it like being drawn using the trim modifier so that's really cool and but to back up what I'm doing here today what I want to teach you guys or just have you follow along I want to create sort of like a repository of shapes that I can quickly take out and use while I'm designing and I want to make that later you know I don't have too many shapes in my book right now but I want to add more shapes and then I want to create a repository shapes that anyone can use for design so that's my intention and this is one of the shapes if you see on my screen this mock-up right here is has an angle to it right you know the image of the trees and the fog and that's and I didn't know what shape that was called I had to look at that it's called the trapezium eye trapezius as if the you know that those two angles are parallel you know so I had two slanted angles but I guess just one is a trapezium so singular maybe and that's what we're going to create I want to create something like this so this is something I want to add in I had the idea I'm like well if I'm going to create it maybe I'll just do it live and have you guys watch long so hopefully it's not too boring I don't think it will be because I've create some other shapes and they're pretty fun but they do take some work there are some concepts you have to grasp I don't want to teach you guys those as I do this so I have a project open here and I have a setup for the trapezium object now first of all let me create a shape we'll get our shape started here and of course I'm gonna call it a trapezium there we go and I'm not going to you know create a view it's not gonna be a view it's actually going to be a shape there's reason why it's gonna be a shape shapes have some advantages basically their push out views and push out views they'll just expand out and use as much space as they can that's available to them the thing that's good about that is all you have to do is adjust the frame and that shape is gonna fill in that frame you know it's gonna stretch and and do what it can to fill up whatever space you give it so that's one thing I like about it so it's not going to be a hard-coded size your frame that you give it will determine the size of it another advantage I like is I can give it a fill using the normal shape fill functions I can give it a stroke or an outline for the shape and there's no extra coding that I have to do to accommodate for those things they're just built right in the shapes and then you can animate the properties that you want to animate meaning you know all views and shapes you can animate them with offset rotate scale it make it bigger smaller those things are built in but for this shape I'm envisioning that you can drag or animate the that whoops you can animate that angle that's on the bottom so when we look at this you know as maybe the screen builds we can it'll start off as a square and then animate up to an angle and the title comes in and you can control what gets animated that way so that's a another thing I like about chases we can do that so let's get started here we know we want to shape it gives us this handy helper here that allows us to add the protocol stub for shape there's only one it's just path and let's take a look at this here it returns a path a path object is basically something that is well Apple says it's like a 2d object with a like an outline of a 2d object okay that's all the path is how you create that outline or you know the flow of it that path the shape of that path is you call functions on the path object and look what's sent look at what's passed in here oh let me just bring this up so I can see your chat here okay look what's passed in a CG rect is passed in now when you give this object or this shape of frame we're gonna know what that size is so if I create a frame 100 by 100 that is your CG wreck that's passed in I'll be able to access and know that it's 100 by 100 but I'm not going to necessarily inspect the size instead I'm going to make my shape relative to that size so let me show you what I mean here so the first thing you have to do is you have to tell your path where to start well first of all we need a path so let's create that alt I'm just going to create it like this so now we have new path and I'm going to return it that's what it expects to be returned like that then we can say well where do we want this path to start now when you look at the this object the trapezium right here I can start it in the upper right hand corner upper left hand corner I started at the bottom I can start this shape wherever I want it and the shape is just going to be four lines right to create this so by default I'd like to start in the upper left hand corner 0 0 so think of like a graph or a coordinate system a grid XY coordinate system right I think I brought up a picture here to show you guys yeah in in my book this is under geometry reader but it still applies so look at this square right here the men Y in a minutes those are properties of a cg rekt which is passed in okay and so we're going to start up in this corner upper left-hand corner and we're going to draw around in a clockwise fashion again you can go counterclockwise if you want we're gonna go clockwise and we're gonna use actually these properties here that's another reason why I brought this up so if we want to draw a line all the way to the upper right hand corner then we're going to have it we just supply a point which is an XY coordinate so we're gonna say oh go to max X and go to y 0 so Y is up and down it's not going up a Down or anywhere we just wanted to go to max X so that is our first step first we're going to set let's see here first want to set where we're going to start from so we'll say path dot move you see it takes a CG point CG point is just XY coordinate and then from here you know I could do this okay I could say 0 0 and that will start me off in the upper upper left hand corner that's where 0 0 starts but I could also do this as well 0 ok so I don't know if you saw that there but it says it starts with location 0 0 so I think that's pretty easy I can take out the CG point and it'll still work so we're gonna start right in the upper left hand corner now we're going to go clockwise to the upper right hand corner so for that I'm going to add a line okay add line now you can watch out this two of them here this add lines so you can supply like a coordinate of points or an array of points I mean or you can just add one line one line is fine for us I like to do it this way so I can track it as I go along okay x + y X I want to go all the way over to the right so there's there's two ways I can do this we talked about the mid X right so I'm gonna access my rect here that's the parameter that's passed in and I can say width so if it's 100 by 100 square the width will be 100 so that'll take me all the way to the end or as we saw we can also go max X either ones fine you can do either one you want looks for why that's just going to be zero okay let's draw one more line and I just copy and paste it there now we want to do is we want to go all the way down to the bottom right so max X is fine but now we want to go to max y that's going to take us all the way down to the bottom right hand corner now we have some we have enough parts of the shape here where we should be able to see something so let's do this let's go into our V stack and maybe we can start previewing this thing as we build it I'm going to add it right up to the top here I'll just say a trapezium just like that let's zoom it and let's see what we get build a build let's take a look here circular bye friends okay I'm not quite sure why there's a circular reference here it's let's try to build it without referencing it here okay let's try that if you guys have any hits let me know hey Nick okay so if we try to add the trapezium circular reference ah why is that okay create new path add some lines and then I return it let me check my references here and let's just try this I don't see the circular reference I don't have anything else in here I don't think let me rename it I don't think I have another trapezium boy maybe I'm not sure all right let's do this let's just rename it no I can't okay Oh what's yeah let's rename it trapezium shape I'm not sure you know I don't I didn't think trapezium was a reserved word or anything okay so it's working you see you see how when I select trapezium shape here there's a blue rectangle that means it's the shape is being rendered and it's shapes or push out views right now you can't see anything because we commented out this code right here so let's uncomment that there you go okay so this is our start point right here in the upper left hand corner it goes over to the right and then it draws down here now you see a line here because by default is it's filling itself with the color and shapes do that you create a circle a rectangle you'll get a black shape right so clean yeah maybe I had to do that that's actually that's not a bad idea we got it working now I'll stick with this for now but I'll be sure to check my my comments earlier okay now we need to complete this so what we want to do is we want to another line that goes to the other side so let's add another line here and I'm just gonna copy this and instead I'm gonna have it go over to zero so there we go we have a square that's a good start now you know this shape is for sides right we've only drawn three we've only added three lines so what you could do is you could draw another line going back up to the top because if you supply a stroke to this object you might not get that fourth line in there you know if you draw an outline for it you might not get that fourth line you can add a line or what you can do is you can also just close the sub path what's called close up paths so I can say path dot close and it's gonna draw the last line for me it's going to take this last point that we'd find right here and it's gonna go back to our very first point which is right here upper right corner now you don't see it do any difference because it'll spilled in anyway so this isn't a trapezium yet we have a rectangle that's so good job there we have with our rectangle what we want to do now is we want to lift that last line we want to change that y-coordinate so it goes up a little bit but we want to do it in a way like I could go here and I could just say go to 200 and let's presume that there's our trapezium right there but it's not you know I can't hard code that number because I don't know how big I want that shape to even be so what I'm going to is I'm just gonna create a property for it alt what do I want to call it just called it offset there we go it's a CG float and we can give it a default amount maybe like 50 so let's try that and then we'll use offset here resume it yeah there we go so you know it's only 50 down right so here's what I can do this of course doesn't look right I'm going to add a frame to it I'm going to change the the height of the shape and I think 200 might be okay a little bit bigger let's make it 300 yeah it looks good now you notice that 50 isn't really gonna work out for me so I'm going to make a little bit more if the height is 300 maybe I'll make it 250 offset all right so make it 250 they're a little bit less yeah looks alright so let's take a look here so you doesn't have that much of an angle too right oops go back accidentally clicked it so that's approximately what we want now this is pretty cool we have a shape here that we can reuse we can add it to projects we can even give it a color so let's give it a color here and you just do it with a filth same way you do with any other shape and I'll say purple there and I'll probably take off that top part there where it's protecting the safe area and I'll ignore the safe area for the top there goes right to the top now in that and that mock up we have a picture in there so yeah make us a percentage of the height that's actually not a bad idea Oh bad batter batter ROG better oz I think you might be right yeah he's saying the circular reference might have been because the name I project is also trapezium I think that might be the problem yeah you're right I was any thinking about that okay all right good so we have our shape now let's test it we want to you know we're looking at this mock-up here and try to get it like that I did before I started here I did import an image here that I got from pixels and it's from Jordan ster Anka right here so I left his name in there to give him credit for it thank you for the picture Jordan and we're gonna use that let's go back into our content view and we're gonna do here is we're going to add the image now if you remember to like for clipping when you clip a shape you had to shape first then you have a modifier called clip shape and in that modifier you pass in a shape can be a circle rounded rectangle or in this case gonna be our trapezium so let's see how that looks here okay and most likely I think that image is gonna be too big so yeah you see part of the mountain there yeah it's definitely too big so what we need to do is make it resizable that'll bring it down but the scaling is off right so what I'm going to do is I'm going to adjust the aspect ratio all right and let's make it fill okay that looks better so it's adjusting aspect ratio for the width of the device and because it's fill it's gonna be cutting off portions of the image but that's okay we're okay with that we view it on a larger image that image will I mean if we view on a larger device that you know just grow and get bigger to make sure it gets filled up all right so now we need to add the trapezium so let's see here we want clip shape right there and we're gonna use our trapezium all right and let's see how it handles it by default oh that's a project right trapezium shape okay so it's way out of control it's way off there and we need to definitely set the offset here now I like a someone had the idea of making a percentage I like that idea so maybe we can do something like that and instead of like a number here we'll just supply value between zero and one and then we'll just multiply the height by that that number so let's do this let's change it to like 75% right so we'll default it to 75 and then what we're going to do is we want to take the max height or max Y rather that's the height and we're gonna multiply it by the offset let's resume that see if you get something that's more than 5% yeah that was good so that's the default I'm not passing in a value to change it we can test it after what I want to do is I want to kind of clean up my UI a little bit here I'm going to I'm gonna keep this modifier the ignoring the safe area here and I'm gonna add that to my image I don't want to delete this trapezium here okay image is super big I should have probably kept that frame on there so let's make sure we have a frame I think I'll do that yeah after the resizable now I don't have to type it in right if if you're new to Swift you I actually make some more space here Swift UI it's a couple ways you can add modifiers frame in particular frame is always there for us to be able to adjust so if I'm clicking on the image here for some reason it thinks I'm clicking on the trapezium yes see this says trapezium shape offset to 20 hi you 300 I'm not quite sure what it's referring to there so let's try it this way so I know you should be able to use this sometimes doesn't always work as you can see I'm not quite sure maybe I wonder if that gets set because it's resizable oh there we go yeah now we have it okay image this is what we want and for the height I can just adjust here right or what I can also do I can hold on command click on the image go to show so with UI inspector and I can adjust the height here so I think I'll do that we had 300 last time right hit enter there we go so let's look a little bit better right it's looking more like our a mock-up that we have here okay now everything's looking great here I think what I'm going to do is I might add a border to it so let's see we can do that with an overlay so let's do that so we clipped the shape here and then I think I'll over lay it here with another trapezium shape and then you know fills it right because it's by default it gets filled with black so what I'm going to do is I'm gonna add a stroke now there's something when you create your own shape is usually if you're used to using shapes as two modifiers for outlines there's stroke in the stroke border short borders not not inherent to shapes here I think that's something that Apple added to give you more options and I think what it is I think it's just a stroke with an insect if you don't know the difference the stroke well you know if you have a thick stroke around something the midpoint of that stroke say the stroke is 10 wide the midpoint is where the actual frame or the border of the shape is so you have five going into the shape and five going out of the shape stroke border takes all ten and put some right inside the border so it never goes outside the border we don't so we don't have that we don't have a stroke border if we want to add a stroke and keep it in the order then we can add it in set an insect just basically says how much do you want to push it in you know if it's a positive value you can also do negative in cents which has it go out of the frame we're not going to do that I'm not really worried about that if it goes out so we'll say we ever stroke here and the shape style that can be anything like a color a gradient radial gradient linear gradient things like that I'll stick with a solid color and we'll say let's just do gray kind of boring right but it kind of matches that mock up that I saw okay and we actually for style did they have one that was would line width that's really what I want is I want a line width here hold on one second hey how's my wife yes we want line width and let's see let's just go to ten okay there you go so now oh so here's here's what I'm talking about right so you see the full width on the bottom but on the sides and the top it's only half of it right because it's going outside so maybe an inset would be good but I'm not really gonna worry about it right now I'm just gonna leave it like this and then I think the last thing I'm gonna do is give it a shadow I think a shadow would look good so a shadow and I'll just say eight there go a little shadow on there and actually you know I'm gonna move the shadow up because I think what's happening is it's applying the shadow to the to the overlay which is our stroke so let's do this let's see let's just add the shadow to the trapezium oh no I don't think we can do it yeah let's just move it in front of the overlay there we go yeah and I think we had to increase it so we see it outside of the border there all right there we go so we created trapezium and we created a property so we adjust the angle so let's test that we didn't really test that right and let's see offset I don't know if there's a better name if you guys can think of a better name for this property definitely let me know let's see so it's now a percentage right so let's say 50% there we go 50% so if you look at the frame you'll notice that's half of it if we supply an offset we'll have to adjust it for the stroke as well but I think this is okay we know that it works it looks like it's working here go to 8 8 9 yeah it's working just great okay so everything's looking good there now let's see we talked about so we talked about filling we filled it we gave it outline we're using it as a mask what else can you do with shapes you can also animate it but of course you can animate it with normal routines like I said earlier you can scale it rotate it things like that but we can do is we can actually animate the that offset that we have there okay so imagine this okay let's do this let's add a slider slider I'm gonna need a value I need a state property I don't have this is a different laptop but I haven't used recently and I don't have my snippets on here so I'll just have to do by hand and we'll call it offset I guess and we'll just say by default offset is 0.75 that makes sense and then we need a slider yeah let's put it down here slider okay and I'm going to I'm gonna need a range for it so many options I can't it's hard to see which one is the right one um range I think this will work yeah that's try that okay so the binding I'm gonna bind it to a set that I just created right there and for a range oops I want to delete that yeah we want from zero maybe zero point one two one one will be a hundred percent zero point wanna be ten percent okay and uh the label I'm not gonna had a label I don't know if there's a constructor or initialize it without it yeah label is something you might use for accessibility reasons so you know someone if they see a slider on here and there they have if they're blind you need to tell them there's a slider there so you can use a label for that purpose you can say this is the slider for the offset and they'll hear it and they'll know it's on there just make them aware of it okay this is good we have that on there we just add some padding here horizontal padding just so we can see the ends okay now we need to bind that property here that state property to the trapeziums offset so we'll need that property here again for the initializer and we're going to say offset there and then we'll also need that for our borders well cannot convert oh you know I think I have to like explicitly say it's a CG float okay let's try that again now I move that slider it should adjust it let's try it one more time here okay I think it's working oh look down here it's still rendering okay let's wait a little bit there we go alright let's try to move this there we go okay so it's moving that's that's working just fine remember we made we made the lower range value zero point one so it's not gonna go all the way to top it's just gonna go to 10% and so if you if you change it we want to be able to reset it like click a button and hey quad Kurt I do have that in my book I talk about quad cause I really love quad curves they're super handy just they make making the it makes making the creation of curves so much easier because you only needed to find one point okay so let's add a button to do some animation here I'll do the other side a button here and it's just gonna be a plain old button so I'll say reset we're gonna reset the trapezium back to its normal shape and we need to action okay and here I'll just say well we'll say with animation this is where we'll put our animation right here and the result I'll say self dot offset so this is the property at the very top here I'm going to set that back to 0.75 like that so I'll be able to adjust it to something besides its default hit reset don't go back all right let's try that here so I bring it down here hit reset so notice what happened here why it that's not animated it's not just the lag if you guys are experiencing lag on YouTube that's not the lag it really isn't animated and it doesn't know how to animate that shape you know it so what you I doesn't know that it wants me to animate just this offset property right here doesn't know so how do we tell it how do we tell it to do that well my friend Xavier the creator us with UI labs he taught me how to do this he's he's a super friendly guy by the way I've had the pleasure of talking with him so let's do this we're going to create this property called animatable data and this is all that's needed anima animatable data is all that's needed for switchy I to know what it is you want animate we have to tell the type it's going to be a CG float that were animating here and we need a supply a getter and a setter so when it asks for animatable data we're going to tell it hey this is the value I want you to animate so let's create our getter and what are we going to return well we're just gonna return this property right here the offset property and then to set it what are we going to set want to set the offset so it it will be setting the offset for us you know this setter on here so I'm imagine imagine this let's go back to the preview so it's perfectly square now we want it to reset back to 75 so it is going to do what's called interpolation it knows where you're starting from and it knows where you want to go and it's going to interpolate all those values in between or insert those like values in between so it's going to go from one two point ninety nine point ninety eight point ninety seven in so on and so on up to point seventy five and that's the beauty of it you just have to tell it which property you want to do it you want it to do that too so we want it to do that with our offset property it's gonna it knows the beginning knows the end it's gonna interpolate the values in between its gonna animate it for us super handy I mean that's about as easy as it can get here so let's try this look at now it's animating might be kind of hard to see let me slow it down a little bit though so let's see I'm gonna say animation we'll make it linear linear animation means it's even speed from beginning to end by default it's ease in and ease out ease in means it starts out slow speeds up and then slows down toward the end I'm gonna make it linear so it's the same speed all the way through okay and let's make it let's make it four seconds so you can really see it alright so we need you change it then I'm going to click reset and I'll go back to 0.75 there we go all right look at pretty pretty cool right so let's let's do this maybe what we'll do instead of having a reset on there let's imagine what this might look like if it was a real UI so let's make some changes here I think what I'm going to do instead of having it as 0.75 let's go with 0.65 and see what that looks like actually I want to stop live previewing it here yeah that looks ok we should be able to see a change there and oh no actually this is what I'm going to do that is what I'm going to end up is that 0.65 let's set it to 1 so it's a square every time you change a state value you resume it here okay this is where this how it's going to start out and then what we're going to do is I am going to want to comment this out so we don't have to see that and on a peer when the screen first loads I want to kick off the animation so I need some kind of variable some kind of value to say hey this animation is going to take place and change the values you'll see what I mean here so we're gonna need another state variable here I can just imagine you know while I'm going through here like I'm sure Stuart is looking at this he knows exactly what's going on here cuz I watch this video I'm like oh man this is pretty serendipitous because this is exactly what I want to do this is exactly what I want to do in this in this video all right so we need to this is for animation yeah so we'll say start animation and by default we'll be false so yeah you know actually I don't I don't need this state variable anymore I want to delete that because I needed that for the slider let me just comment it out just K so I want to use it later and now these don't have values so here's what I'm going to do so start animation yeah that's I'm gonna change I'm going to change my mind I'll just call it change because that's a shorter word let's just keep my code shorter here so this is what I'm going to say if change equals false or if change equals true that means I want to animate it to 0.65 otherwise it's going to be one so nothing should change they're the same thing for my border for my stroke so their change is false and everything is 1 and it's a square but then as soon as I load this screen and change if I change that variable the true everything's gonna go to the new shape to look like a trapezium so how can we do that well we can add a modifier here called on appear on a carry here and as you guys know Scott Smith he's another youtuber he's a friend of mine and he lives in Utah here he lives at two towns over for me nice guy so he taught me this he says if you want to keep your code if even smaller on one line with on a peer I'm talking about he says use the one with the perform he says then you can just keep everything on line otherwise ideal default to this way let me just show you real quick I get I get tips from him he's my swift UI buddy we share tips and tricks so like this so I want to say self dot change looks there's my snippets so I want to say self dot change and I want to toggle that to make it true so you notice okay that's three lines right there right um I can do this like that but if I want to keep it on if I want to use the performer I can just keep home online anyway that's just something you taught me you can do this if you want but it looks more natural if it if it's with the parentheses you just say perform like that I don't know I like it there we go okay I think that's working correctly now if I run this the on appear will will run and it should kick off our animation actually it looks like it's toggling it right now yeah so it looks like it's already changing it the true that's strange okay I have a question here it says what if you have multiple values of the same type that should be animatable that's a good question there is another way to do that and right here it says animal animatable data you can actually create a tuple and pass in two values so maybe I have you know like another property here I don't gonna make something up here I say offset number two so then I could create a tuple here and it'll be CG float like that I think I have to say animatable pair yeah right there you do it that way and then inside of here you can change both values or set both values I think that's how you do it oh yeah okay thanks Stuart I do I knew if I could show you guys something else to help me out here if you go to Swift UI labs comm Xavier he has a post on animatable data which will give you more information about how to animate more than one value okay so let's here yeah so you know what I am gonna need a couple of lines so let's go back to the way it was yeah like that indent it okay we need this with animation there we go let's resume that still isn't yeah it should be one yeah I'm not sure let's see here yeah its square true yeah weird usually this is the way I used to do it like in my animation book I'm not sure I'm not sure what's happening here it's making it effective like right away all right maybe if we run it I don't think I have the simulator up it's gonna take a while we'll see though go you just have to run it you used to work in the simulator or in the on a canvas so I'm not quite sure why it doesn't anymore maybe it's something new maybe I have to live preview it for her to take change take effect yeah I do okay all right cool all right so that's working you see the animation there and we could do you know other things like we want to do other animations like maybe that text right there the trapezium we want to do offset and have it slide in at the same time it's moving up we can do that too so let's see 4x will say change equals true then move it to well where it is now else let's move it off the screen say like 400 don't change the Y so now if we run it you notice the animation there it slowed down it looked better if it's you know if we speed it up a little bit like let's change this to a 1 yeah so you get the idea we have a shape we can do a lot of different things with it we can give a fill we can use it as a mask or use a clip shape yeah yeah yeah you're right that's yeah and there's different things you can do so let's try something else one last thing before I go what if we wanted to change the other angles like if I put this shape on the bottom and I want the angle to go up that's not gonna work right now so how could we change our shape to accommodate for that well let's see so let's try this let me clean this up here I'm gonna get rid of this I'm gonna add a trapezium on the bottom wheezing shape okay now instead we want that angle to go either down to the right or down to the left so let's see how we can do that now there's there's this object that I like to use that it's a to enum it gives you four different choices as far as like a position of a square or points in a square yeah it tells you it has a top left top right bottom left bottom right and then we can use that enum to say which corner we want to supply the offset to so we'll need another property for that and let's add that here and call it corner and wasn't that name of that you know I'm talking about it's called a rect corner right there and by default let's make the the bottom left the default right there so we're gonna use the bottom left corner and that's the value we're going to adjust all right so here's what we're gonna have to do I'm just referring to my coat I think what I'll do to save time I'll do the first one and then I'm going to copy and paste the rest of them I'm gonna cheat a little bit so this is what I did we start at zero for our shape and but what if that is the corner what if that top-left corner this corner we want to bring down so in case of this trapezium at the bottom we want to bring that top-left corner down so we can't use zero anymore we need a CG point because we need to adjust like in this case we adjust the Y on this one and we want adjust the Y on that top-left corner so we need a CG point and for the X we can keep that at zero what we're adjusting is the Y so for the Y we let's see we want to see if that property is set and if it's set then we want to apply the offset otherwise we'll keep it at zero so let's do this we're going to say the corner equals dot top left then want to use our offset we want to use we can't do that if you use our asset if we multiply it because I gotta think about this so I originally did this I didn't use the percentage so we want to do is we want to multiply it almost by like the inverse of our offset so if it's a hundred so imagine if the height is 100 right and we give it 75 percent you don't want 25 we don't want you know the the result will be 25 right we want it to be 75 so like we want to be 100 times 0.5 yeah yeah that'll work we want to go say 5 down okay well let's try it so also at times uh the height let's keep it like we have it down here max Y times offset oh and then if it isn't then we'll just leave it at zero not per a hand corner okay let's try that let's try one angle for now everything builds everything looks right I'm going to I want to get rid of this animation just for now yeah it's going to be a square for now and then for this trapezium down here it's not going to have two parameters available to us right here so offset will say 0.75 and the corner will be top left okay it's partially there let's take a look at our second line here or let's see so it starts down here and it goes up to the upper right-hand corner and then it draws down right here the starting point which is top left then it goes to the top right which is that line yam accident and then it goes to the bottom right okay and then it goes over so this looks like oh yeah this is of course okay so it's applying the offset here so we need to ignore that offset right yeah all right so let's do this we're going to say we're only going to apply that if the corner is top or bottom left otherwise it'll be zero okay bottom left that is like right oh I see for the title okay yeah this isn't I mean this looks right it's going up - oh it's not zero it's just max why there okay there we go so that looks like it's working and if we change this maybe we only want to go 25 down 25% down maybe wanted to go 50% down yeah that's looking correct okay so you see how I did that there that's how you do it for the rest of the corners so I think that kind of gives you an idea of like how to use this and from here you know again you can just uh supply a fill and we could say color green pick a different color this time I'll say 16 and it just gives you another tool to enhance your UI in some fashion now of course you can put buttons inside of those shapes you know with the overlay or you can use them as a background you can create a Z stack and have them behind your UI these are just the options to give you a way to enhance your UI with shapes so I think you have enough to be able to use this right you have enough to be able to create a trapezium on your own and I think what I'll do on my website I'm going to start a new page where you guys can go into there and I'm going to create more shapes I want to do more live events and create more shapes like this that you can use for your UI and and then I'll have the projects along with that so you'll be able to see the video you'll be able to get the project be able to get the code and I think that's about it so my mic is echoing is it am i too far from it let me know let me know if it's better now I'm actually gonna be ending off soon anyway but I don't know if it's eques yeah Brando so um do you guys want me to do the last two corners should we do that those no echo there okay yeah angry apple maybe it's something happening on your side I'll tell you what yeah one nice tan say on why just do last two corners then we'll have a complete shape that we can customize and I animate all right you convinced me Fernando okay so the next the next corner is gonna be the top right okay so let's do that what I'm going to do is uh let's do an opacity here I want to overlap these cuz it'll look pretty cool if I do that so we'll say opacity and we're gonna make that green partially see-through and then what I'm going to do is let's create a z-stack put one on top of the other think you guys will like this okay so we have two right now but we're going to do what I want to do is I want to say this top one will actually start from the top right and go down so they're going to crisscross and overlap so let's even get that to happen now we see the square on top is just it's a square right now so I try pzm cuz we don't have any code for the top right oh if you've got two corners at the same time I got you well what we can do is uh we that would be another shape that won't be a trapezium anymore we you can do that you just have to multiply your value your offset and you'd have to instead of specifying a corner well you'd have to do is make this like an array so you can pass in two corners and then you just have to change your code for your lines so you know one let's start lower and go around and the other one would start a little bit higher I get what I'm saying there so yeah you'd have to pass in an array of rectangles a rectangle corners how do you open the menu where you can click oh you hold down command the old on command and click on any of your views it'll bring up options so like I can hold on command click on z-stack and then it gives me this context menu that pops up I can embed things in there or I can access the swift UI inspector and just padding in the frame things like that yeah this this video will be it gets persisted to my channel so you can come back here and take a look at it again okay you know I'm going to do I'm going to just do the other corners for this I know I said I was going to end off but now I'm kind of like motivated I feel like I started down this path now I gotta see it through okay so we have this this one shape and we want the top right corner to go down so let's see how fast we it is this is our top right corner right here and we want adjust the Y right so let's take a look at this this will be this is our else part of our statement here it's call a ternary operator we use a question mark and a colon so here we want to say if it's top right if the corner equals top right if that variable equals top right then what we're going to do is we're going to take the the max I think we can just use this max why yeah the height and adjust it times and multiply it by the offset here thanks for that yeah they're real so if you look at the preview you notice they're kind of like crisscross now because we have another shape on top that's going down I change the opacity the corner the radius for the shadow yeah and I think we can increase this a little bit there we go so I think you see the kind like the effect that gives here let's bump this up a little bit maybe 75 yeah yeah so Stuart is saying that um about the canvas if we try to go in here it's not giving us the same options you know for the embedding or accessing the inspector this 50i inspector so that's cool I actually didn't know that Stuart there's another way you can access the swifty eye inspector hold on a command and click on these objects to then you can access options from here so you show this with GI inspector from there make changes maybe want change the weight let's make it bold yeah there we go okay we have one more corner let's uh let's knock that out real quick and I want to be able to preview that so we're gonna put this you know let's do this let's um let's change this to true so it creates our trapezium there and then I'm just gonna overlay it with another shape I'm grab one of these guys I'm gonna hold down command click on image and I'm gonna there's no embed in z-stack z-stack is the death it's the layers right there isn't an embed for that so what I usually do is just embed it in an H stack horizontal stack I change that to its Z stack like that and then what I'm going to do is I'm going to you put another shape on top of it this right here have some opacity so we can still look through it but instead what I want is the opposite of the trapezium behind it I want the angle to go from the other direction so here's what I'm going to do I'm going to say bottom because I wanted to start from the bottom left no bottom right is what I meant okay it's no code for that so just gonna give me a square for now let me move this edges down so they're both like right on top of each other holding down command option and using my bracket keys to move lines you know Tommy Allen Scott Smith again that was one of his Friday tips on Twitter if you don't follow him on Twitter you should definitely get on Twitter follow Stuart follow Scott Smith Stuart why don't you put your handle your Twitter handle in the chat so people can see it Stuart is full of great ideas he is a great post I follow him okay so we wanted to do bottom right nothing's happening right now here's our bottom right it's this this Y right here so I'm going to do is I'm gonna copy this whole thing here and I'm going to say whoa Corner goals bottom right equals bottom right then we want to take the max why no we want to max X max why yeah we want to multiply oh this is where we need to inverse no yeah it's the zero here then we want to set it to max why yeah yeah there's that you're opposite right there let's do this actually let's put this behind it again I'm gonna highlight it command option use my bracket keys move that up now it's behind it so we can create kind of like an accent with that shape behind it and maybe change color like you I think you can see the potential here to help enhance your UI in some way let's lighten that up a little bit it's laying it up even more yeah there we go there you go we now have a shape we have four we have trapeziums that can be adjusted from any angle you can use it in your UI you can use it just like you see here that was my original inspiration he needs it just like this so if you guys don't have any questions then I'm gonna wait for a little bit because I know the questions will take 30 seconds to come in because you guys won't see this for 30 seconds after I say it so let me know if you have any questions if not then we'll just end off you guys don't know I do have a book you can go check it out I have a couple of free books if you guys want to pick them up and start learning Swift you I not sure where you guys are Swift you I your beginner advanced never heard of it you know trying it out for the first time I've got some free books I'll get you started with so at UI and animations tak luthiers he lives in Vancouver - yeah that's where Stewart is welcome gingka sonar and a problem you know I was super super nervous about doing live sessions and if you know I've had a YouTube channel for about four years a little over four years never showed my face because I was so nervous actually not only did I not show my face in video I didn't even show my face on social media it slowly it took a while I'm like I'm gonna have to do this something I really want to do I was really nervous about it and my patrons I think it was the beginning of the year I said I'm gonna start showing my face every day I get used to it so I record them a short video every day I don't know what I was doing what's working on how my day was going I got used to it pretty fast in my first live session I was super nervous and the second one I actually feel better now the things you know what I'm most afraid of are making mistakes like this like we saw today when things don't work out when we had that circular reference I mean magic if you're on stage you get a bunch people they're live looking at you I think that's even worse a little bit better because I'll see you guys like staring at me but it's nerve-wracking right I mean imagine yourself doing this so it's just a chance that I just have to do and just have to get used to yeah you know we're gonna make mistakes anyone that does a live presentation will make mistakes but I think it's part of the fun it makes it more real as a developer I'm not perfect you know a lot of these other presenters and content creators they're not perfect either right but we do our best and we take we have enough courage to be able to share what we know with everyone else even though we might be wrong okay thanks so much Stuart appreciate that Stuart will be live soon enough he's he's that where I was he's gonna he's gonna work out to it is that right Stuart okay yeah right how to solve problems yeah how so this is how you solve problem guys when you're in a tough bind you can get on Twitter and message Stuart he's gonna help you out just like you did just like he helped me today no kidding that the other day when I first I did my first live session guys this was just two days ago two days ago so I'm in a I'm in a studio closet like a little a smaller closet where I record things this has a nice sound of my recording equipment here there's a lack of ventilation it's 97 degrees 97 degrees Fahrenheit where I was on Friday and that's about I think about 34 35 Celsius today it's only it's not even sixty degrees Fahrenheit so it's a lot cooler but that day when I do my first live session I had that on me oh I was so hot oh my gosh alright guys enough talking for me thank you so much for showing up thank you so much for showing up I really appreciate it I'll be doing more of these I want to try to do them I gotta find the right time to do them when people are available because I don't I think this is a bad time most my audiences in Europe in the United States so I think I'm getting more like that the asian asian australian audience right now so i'll mix it up i'm thinking about doing two series one for shapes until i finish them and then another one for you i creating UI with a specific topic or a specific theme that we want to cover you know maybe the theme is login screens maybe the theme is flight reservations screens or maybe there's a different topic that i want to cover maybe it's covering shadow how to give your UI more depth how to create a color scheme how to do a list and how to customize it you know things like that and I like the idea of it being random you know where I let you guys decide through with a random number Wow today you are day it's 2:10 a.m. well thank you so much for joining us here it's staying up for this so anyway those are my ideas that have to live sessions and you know until until I run out of topics or until I complete all the shades I'm gonna make them available on my website so you guys can just go there you'll see the complete build up of all the videos and all the code and maybe I'll throw in some some extras in there too that you guys can get hold of 5:30 a.m. and 8:00 Wow what are you doing up so early besides you guys sooner Wow 5:30 a.m. in India I was in India probably 7 years ago I guess seven years yeah seven years ago I just came up it's probably Monday for a Gingka yeah yeah he's passed the the date line alright guys that's it I'm gonna wrap up or else I'm just gonna keep telling you guys stories and keep chatting and not ending alright so thanks again and I'll see you in the next life session

Channel: Mark Moeykens

Views: 3,176

Keywords: SwiftUI, SwiftUI Shapes

Id: d0Lc5ImoWDQ

Length: 71min 54sec (4314 seconds)

Published: Mon Jun 08 2020