Introduction to Core Graphics (iOS/Swift)

hi everyone welcome to the swift arcade i'm your host jonathan rasmussen in this week's episode i want to take a look at something that's really fundamental that's really going to help you build and do more advanced things in ios and that's called core graphics in this episode i'm going to show you two different ways to draw core graphics and add them to your ios apps i'm going to explain to you the fundamentals of how ios core graphics work and all of this is going to enable you to do more advanced things do really cool animations layouts and really understand fundamentally how things happen on the screen in ui kit so with that come on in let's get a good solid introduction to this thing called core graphics all right so what is core graphics core graphics is apple's library for drawing things on the screen every shape every image you see on a screen is powered by core graphics this is why it's kind of good to know in the apple ecosystem if you've been working in ios you've probably noticed that most of your work has been done in a library called coho touch or ui kit so when we create ui table view controllers ui view controllers ui image views ui buttons we're always working up here in ui kit but underneath that is a library that starts with the acronym cg whenever you see cg you know you're working with core graphics and check this out this is how old core graphics is this is the document revision history for the core graphics documentation by apple it's completely up to date but look when they actually started editing this it's almost at the birth of the web back in 2001 but it's even older than that because this is technology that apple bought from next when steve jobs came over and joined apple so the point i'm making here is this is an extremely mature extremely refined powerful library and it powers everything's on our phone and you still use it and see it in ios today now how does it actually work well basically what you do when you're working with core graphics the traditionally is you override the draw rect function in a ui view so if we had a custom ui view here we would define a view there's a function here called draw rect this is what we'd override and this is where we would do our core graphics work so core graphics work is drawing images this is where we could come in and define a rectangle set its fill color to be red set its stroke color to be green that's the border we can set things like line widths we then take those rectangles add them to something called our context and this is where we do all the context is basically the configuration that holds the state of what's actually going to be painted on the screen and we say we'd like to add say this rectangle to the context and then fill it in that's how we would draw a red square with a green border if we wanted to draw a yellow circle we would define another rectangle specify its x and y position its width give it some colors for fill and stroke set its line width and then draw in this case we would add an ellipse to the context for a circle here and add that and feel that in so that's that's one way we can go about working with core graphics in ui kit create a custom view then override the draw func but there's another way we can go ahead and do this and if you're scouring the internet and looking for examples on core graphics this is what i found a little bit confusing there's a couple ways of doing it the other way is to load in a core graphics image via a plain old ui image view so we can define so here i'm in a view controller i'm just going to define a ui image view and then here we use a helper function to get us the context this ui graphics image renderer this gives us a renderer which in its callback will pass to us something that holds the context and then we can do our core graphics work in here actually drawing a ui image and then set that on the image view itself down here so at high level those are just two different ways we can go ahead and create images load them up into our view controllers in our views and it looks really simple and it is but there's a few gotchas so why don't we jump into the lab now and create one of these things from scratch [Music] all right so let's create a brand new app project here let's call this core graphics fun and let's just go ahead and accept all the defaults there feel free to save it wherever you like i'm just going to throw this on my desktop and i'm not going to bother getting rid of the storyboards today we'll just go ahead and work with what we've got maybe the one thing i will do is i'm just going to create a new group without folder here get rid of all the files that we don't really care about so we can just focus on the stuff i really want you to see which is just going to be this view controller we're going to do our work and let's go in there now and let's start with the very first most basic thing we can do when we're starting with core graphics let's just draw a simple let's create a simple view and do some core graphics work around there so let's come up here i'm going to define a viewish doesn't exist right now this is going to be called my view this is going to be a custom uiview we're going to create and just to get this thing compiling why don't we come down here and define it let's go class my view plain old ui view and so this is the first thing to understand is we're going to create this view we're going to do our custom drawing down here in a cg rect but let's first of all just get our view into our view controller so here we're still firmly in ui kit land we can still do all of our regular ui kit stuff so let's just go ahead and give this view a let's set our parent view the view that corresponds with this view controller let's give it a background color just so we can help separate what is us and what is not us so i'm just going to give this a system gray background five just a sort of a light gray background and let's take this my view thing we're going to be working with and let's just do this with straight up auto layout let's just set our auto layout constraint flag to be false that enables our view to do auto layout and then let's go ahead and just add this view we've created to our view as we typically do just when working with view controllers and views and then let's come in here and just do some auto layout and i'm just going to copy in some code to speed this up but let's just take a look at what we're doing here this is going to be my view and all we're going to do here is we're going to center this view into the middle of our view controller by using our x and y centering constraints here we're also going to hard code and give this view a explicit width and height of 400 by 400 and then i'm just going to print the bounds this is just handy so you can see what the sizes of your phone core graphics is very very specific it likes to know exactly where things are so sometimes i find it handy to print out the size of my view area in this case the screen and before we run this let's just give my view a background color here let's give it something like um i don't know something funky like uh cyan just so we can see where this is showing up on our screen and i'm gonna run this using the iphone 11 pro max and i'll explain why i just want to know exactly what my size area is and i just want a bit of a bigger canvas let's just run this get the simulator up and see what we got okay so here we have exactly what we'd expect which is nothing too special right now we just have a cyan view this is my custom view it's there there's nothing in it we haven't added any core graphics yet let's now go ahead and do that so coming down to my view here let's go ahead and just set this up so let's just give this some overrides which we typically need when we're working with custom ui views so this is just the override that takes in look at this cgrect there's core graphics right there we're not going to take we could specify the rec to draw this view if we want but we're not going to we're going to specifically laid out ourselves this is just a required initializer we need ns coder if we're working with storyboards this is how this view would hydrate and save itself to disk but let's go down here and do the fun interesting thing the thing we're all here for and let's override this draw rect function so in here this is where we're going to do our cg core graphics work we're going to override this function we're going to draw our shapes lay things out so let's start by doing the one thing that we need if we're going to do any drawing and that is getting this thing called a context everything in core graphics is driven by context you can almost think of this as your palette when you're setting colors when you're setting widths and you're kind of controlling what you want to see drawn context is the state or the object that contains all the stuff so we always need to start with a context and this is how we're going to get it now the next thing we do when working with core graphics is we need to define our canvas or basically our painting area so in this case i'm going to go ahead and just draw out or define a canvas starting at the origin point 0 0 with the width of 200 by 180. so what we're going to draw here is this is going to be our square we're just going to start by drawing a plane square and this is defining our canvas here's the origin here's the width and here's the height now watch what happens let's just get something going here let's set some properties on our rectangle that we're going to draw specifically let's set the fill color let's say we'd like our our square to be red we're going to set the stroke color to be green notice here we can use ui kit colors but we need to get another color behind the scenes this is called the cg color and this is the one that breaks it into the more of an rgb style format so that's just one subtle difference between ui kit and core graphics here we have to go one layer down because remember when core graphics was created uik wasn't around it's it's way older than ui kit so this is how we specify the ui kit's color and pass that into a core graphics object then we're going to set the line width we're going to add our rectangle to our context and we're going to draw the path we're going to say hey draw this thing out using this option here called fill stroke there's lots of different things we can do here there's lots of different ways we can fill it we could fill we could clip we could do all sorts of different things these are just enums different drawing modes and core graphics and then we're just going to fill it in we're just going to paint it in and there we go so let's just run this and see what happens we defined our square we've overridden draw and there we go okay i'm going to just add one more little bit of code here which i'm going to explain what this does later at the end of the episode and it's quite important because it trips up young people but i'm just going to inset this square a bit to give it a little i'm going to push it a little bit more into the boundaries of a rectangle and there we go a red square with a green border sitting in our view now just for kicks i want to get rid of this cyan here just because it's kind of burning my eyes a bit let's run this again and the thing i want you to appreciate here is that we've defined a view so this black area this is the view we defined up here and we've set its constraints in auto load to be 400 by 400 so just understand we're controlling this size of this parent view with auto layout but in here we have full control over how core graphics is going to work so that's what's going on in there and look at this this 0 0 corresponds to this origin right in the upper left hand corner here so when we draw this out don't be confused into thinking that the middle of your shape that you're drawing is right here it's always this upper left and the coordinate system for core graphics goes down and to the right so it's increasing x increasing y this is 0 0 with the 200 height of 180. all right let's go in here and let's just repeat it with let's get a circle in there and the thing i want you to know when we draw this circle is two things one chord graphics uses this thing called the painter's model painter's model means whenever you're painting with core graphics you're always overlaying what's already on the page in other words when we go in there and draw a circle which we're going to do with this code here we can't go back and change the square that's already been painted onto the canvas all we can do is change our palette change the colors change our stroke width change our shape and draw it but kind of what's been painted has already been done so that's just something to understand it's called the painters model we're continuously painting on our canvas so here watch what happens with this we're going to define our canvas as a cg rect with an x of 256 a y of 256 height and width where do you think this is going to appear on this image now this is the origin up here 0 0 we've defined our square of 0 0 with this height and this width where do you think this is going to go well 256 256 in it's going to appear somewhere down here and it's going to have a height and a width with these colors let's run it and see what happens voila there's our circle and this is the thing i want you to appreciate the origin of the circle the 256 256 is right around here so just understand how the coordinate system works that's one thing i really found confusing when i first got started with core graphics origin is here it defines the position in terms of x y and then your height and width go from there and in this case we have a yellow circle with a line width like that and voila there you go if you've been following along and you type this out you should now see this you've just drawn your very first chord graphics image in an ios app congratulations now of course there's another way that we can also draw core graphics in ui kit and that's to load things in via an image view so i know this is amazing work we've done feel free to go ahead and save this and don't worry i've got all of this also in my website you can come back here and download this code and run it anytime but let's go in here and let's just start again and i want to show you another way of loading things into ui kit using core graphics and that is used to you that is to use this thing called the ui image view so we're going to do something very similar but this time instead of creating our own custom ui view we're just going to use a plain old ui kit image view so we're going to create an image view we're going to again use auto layout we're going to add it to our sub view we're just going to put it right in the middle of our view here we're then going to come down here and define a function called draw circle this is where we will do our fun core graphics work but i just want to i want you to appreciate what's going on here let's just run this and what we'll see in our simulator here is absolutely nothing which is expected because image views themselves they don't contain anything and they don't size themselves until you give them an image which is exactly what we're going to do down here in draw circle a different way of loading in an image in this case the image view is going to be our container so let's come down here now and let's actually bring in and draw do some core graphics and draw an image that we can insert into our image view so let's start by just getting what we always need we eventually want to get the context because that's how we do our drawing but in this case ui kit gives us a nice convenience routine called ui graphics image renderer and this thing gives us something which can give us a core graphics content actually what it does is it gives us a there's a method we could call on it called renderer image and what this does is this lets us create an image via a callback so we're going to create our image down here this is where we're going to do our core graphics work and this thing here contains our core graphic this is where we're going to get our core graphic from and we're just going to do our work in there so the first thing we're going to do is let's just define the canvas that we want to draw in again it's going to be a cg rect we're going to start right in the upper left hand corner 0 0. in this case we're going to draw another circle with a width of 400 and a height of 400. stay tuned i want to get into this in just a little bit i'm not going to punt on that anymore but for now i'm just going to leave it in there you'll see why in a second and then let's go in there and just fill and stroke our circle so to do that we just do our final core graphics work here we get the context from this ctx container which holds it for us we're going to set the fill color we're going to set the stroke color set the line width let's make this a bit thicker i'm going to make this 20 and i'm going to make these 10 and you'll see why in a second and this won't quite work yet because what we haven't done is while this what this does is this gives us an image but now we need to set that image into our image view this is kind of where the magic happens we take our image container view and we go hey image i'd like you to be the image that we just created here so that's how we can take our core graphics image from this image renderer and put it into our image view so if we run this hey nice we get a a circle with a line width of 20 it's black circle's red looks beautiful okay now pay attention i'm going to show you the one thing that trips up just about everybody when they first get started with core graphics this really tripped up me i want to show you what happens when i remove this little thing called inset by here and we go to draw our circle with an origin up here of 0 0 and a height and width of 400. watch what happens when we draw this whoa what just happened there our circle is clipped part of it is inside part of our borders inside part of our borders outside what's going on here this is the thing that was really confusing for me when i first got started in core graphics and it all has to do with set line width if you look at the documentation of set line width you'll notice that what it says in there is that when you set the width of the line and you're going to draw it the default value is one so if we didn't specify it we would always have a value to be one but when stroked or when this thing is painted the line straddles the path with half of the total width on either side that's what's going on here and this is what totally confused me if you remember way back when we did a starbucks app we had to build a custom graph in there to show how many reward points you had gotten for drinking coffee and we did it with core graphics and this is the thing that really tripped me up i couldn't figure out why my shapes are always getting clipped and and it's basically because of the straddling thing so the way we fix this is we can take our rectangle and we can inset it by basically half the width of our line width so here's a quick image i created just to show this if our line width is 20 points half is drawn on the inside half as drawn on the outside we just take our set line with a value of 20 here and we half it and that's what we can do to use our inset by here that's how we can get around this so in our case line width of 20 inset by 10 that will if we add that back and we rerun this that will bring everything inside the rectangle our circle will be completely flush nothing will be clipped and life will be good okay now i know what you're thinking jonathan this isn't exactly blowing my socks away i mean it's really nice that you can create circles and squares but why are we even learning this i mean can't i do everything in ui kit and the answer is yes you can but the reason why i wanted to get into core graphics and show this to you is that later on i'm going to be getting into some core animation stuff and you really need to understand a couple things around core graphics if you want to animate things using something core animation which we're going to get into in a couple of videos later the main takeaways from here if you remember nothing else is one understand how the coordinate system for core graphics works this is just really handy even if you work in a ui kit if you ever need to drop down in that cg layer i understand the origin is in the upper left hand corner and everything flows from there in ios it's increasing down into the right and then secondly just understand how things get straddled with this path now that you know that half will get drawn inside the path and half will get drawn out you'll know how to deal with that and you won't be confused when you need to go draw some shapes okay well there you have it that's how core graphics works those are kind of the basics around how you actually go about and draw things with core graphics if you want to learn more about core graphics and how we're going to use those in animations do hit like do hit subscribe i've got some other videos around taking this information and using it for animations which we're going to be doing later but if nothing else at least you've got a basic understanding of how core graphics works you won't be intimidated when you see cg come up in your ios programs and just appreciate the beauty of this library which has been around for over 20 years powering everything we do on our phones and if you're serious about getting to ios development i think it's a good thing to just brush upon and know how it works okay thanks so much for coming everyone i hope you enjoyed that we'll see you next time bye you

Channel: Swift Arcade

Views: 3,151

Keywords: swift, ios, iosdeveloper, softwaredeveloper

Id: won0gA05ce0

Length: 23min 14sec (1394 seconds)

Published: Fri Jan 22 2021