Come back again now that you know how to use IB design will I be inspectable you have to do this exercise
which is producing a view with a gradient background and the requirements for it is that the gradient
should have three colors and you should be able to change the color in the middle using something like
a slider or anything that you can think of that you can actually modify where the location of the middle
color is.
So a gradient left the color middle color right color and the middle color should be controllable by
the user.
If you want to compose the video now for a few seconds and give it a shot on your own and then look
at my solution as well.
So I'm going to get this.
That's what I'm going to go to school start the new project I'm going to call the grade and read the
end to
and yet I'm going to go to my view controller.
You don't really need any of these I could actually make you file for it but odds are that if I type
it right here because it's easier.
So I'm going to add in your class that class I'm going to call it to be or maybe custom class or draw
class.
It's a subclass of view and we know that it has to be and I'd be design a world class.
And here are the basics of what we need to do.
So I need to highlight three colors those colors are left right and middle.
I need to have some sort of a location picture so location picture for middle color and of course I
have to draw a gradient.
So why don't we solve it one step at a time.
So I'm going to say the first three are actually quite easy.
It's going to be a variable.
Let's call it.
And I lift the color left color.
She's going to be a you only color.
And when I say the different mind you for it is maybe red and then obviously or use that it can change
that.
And when I have a right color.
So that's going to be our kind of.
And we need to have a middle color of course.
So that's going to be middle class.
And one of them I'm going to say is green.
One of them is blue and the three colors now are taken out.
I have to find a way for a location and then as to my location is going to be a C.G. float value somewhere
between zero to one.
And that's not just an assumption.
I know that's how the gradients work and you will see it in a second.
So I'm going to say I even have a liar let's call it myth color.
OK we have that mid-court location perhaps medical location becomes a CEG float and that's going to
have a value of 0.5 at the very beginning.
Know they have all these four I'm going to have to make all of them.
Respectable.
And then I say I be inspectable and I copied this for all four of them died.
And so now about three colors and one I've been inspectable by it.
Now let's go all or draw which is the most important part of this.
I'm going to have to get myself a little bit of space like that and I'm going to say I have a role and
it's an oversight.
And it is very hard to draw the gradient to draw a gradient.
You need a graphics context.
So I'm going to say let contex to be you.
The graphics get current context which is easier if I actually wrote it.
Grafix get current context.
So now I have the context.
The next thing I have to do is for when I actually make a grade and it could do it like this.
I could say Frontex dot draw the line gradient.
And here's the interesting part.
They tell me what are the different things that I need to include in here.
I'm going to tell you I don't need to have any options for now so I'm just going to give it an empty
array because asking for an array but then it says give me a gradient how you want to draw it and then
give me the start and end point of where you want to draw it.
So you start on end then actually the easier let's deal with those first.
I'm going to say I have a let's just call it if left point left point becomes obviously zero.
That's going to be C.G. point dot Z.
And that's the left corner of the right one the gradient to start and then I'm going to have to have
a let this column to the right point and that's going to be a C.G. point and this C.G. point I have
to make it based on the set of The View that I want to draw the gradient on.
So I'm going to say it's a point of X and Y and the Y if it doesn't really matter.
So I'm going to put zero of X up it matters.
And that's going to be bounds to vet and that is the vet of the bounds of the current object which is
this guy the class of Carstone class you I view the type you have you.
So I've got that.
So that's going to be my starting point.
And that's going to be my ending point.
So they got those two taken care of.
The next thing is actually making a great in.
So let's go ahead and see how we're going to do that.
Vote in here and say Give me my grade.
And that's going to be a great gradient of C.G. gradients can be done in several different ways.
The way I want to use is actually this one using Acara space using a set of colors and using a set of
locations.
So space colors and locations.
So let's go ahead and say OK now for the card space.
You have to kind of use the card space device.
RG So I'm going to just like that.
I'm going to say CEG color a space and for that I'm going to say device.
RG What Carlos is asking for a c f right which is essentially a foundation type of array and the good
news is any kind of normal swift array you can just convert it to CFR right.
So we can make our colors array and then convert it.
The same thing goes on for the locations.
So we have to make 8 an array that holds onto the locations of these colors and then place it here as
an array.
So I'm going to go in here and say Give me a list.
Let's call this one crullers array and this kind of array is actually very very simple is a lefty color
Mitt color.
I should have copied this one first.
MIT color.
And then of course right not the only problem in here is all of these callers are actually you e-collars.
So we could either convert them or make them C.G. colors or in here we have to convert them to C.G.
colors.
So I'm going to say you've me C.G. color of this one because you're working with the core graphics and
we can only use colors of the type CEG color.
So now we have the colors array which in here I'm going to say use the colors array and make it as C-f.
Right.
So that part is taking care of that.
I know it's a lot of code and unfortunately we can't really test anything unless we do all of these.
So let's see what we have to do for the locations.
The locations saying give me an array of the locations that you want to use to essentially draw your
or your gradient.
So I'm going to say that the array is called this one all colors locations colors color looks or anything
to that effect doesn't really matter.
And for that I'm going to go ahead and say I have two locations for left zero that is zero.
The middle one which is this one middle the color location and the far right one 1.0.
So those are the three locations that we're going to have and that is going to be used in colors.
Look I'm going to use it in my locations.
So now we have a gradient being made from these colors at these locations.
Of course now I can take my gradient and copy it here.
Let me get everything in one screen.
I mean scale everything properly so you can see all in one go maybe like that and is giving me an error
saying that the value of the grade must be non-nil.
So you have to essentially force on rapid N-word which you could either do it here or you could actually
do it in your grade and say I know this gradient is going to happen because I know these colors exist
and I know these locations exist.
So either all of them do the trick for me.
So off the top we have all the four inspectable.
And we have our draw that maybe I can make it like that.
And then we have all context callers or Akos locations making actual grade and placing the gradient
from this point to that point.
And this go ahead to a story about that in this story we're I'm going to go ahead and make a view.
I'm going to place it here open the inspector window and let it give it a class that is going to be
custom class.
And when we do that it starts doing its thing as tries to render whatever we have in the IP design table
and soon enough we will get the gradient.
Perfect.
And here in the attributes we can actually change these three colors.
I could say one of them is that they are yellow.
The other one is a pink color.
And the last one the middle one and when I make it to be a green color and I of course have this middle
a color locaters which I can put it at point one and then I make that a bit more distinct color such
as Black if I can be better.
So here I'm going to say point to point five point nine point nine five.
And that perfectly controls the gradient only the middle occurred of course but you could if you wanted
to expand and then change everything else.
So that's about that.
A view with a gradient.
I grant that we can control in here and with that in mind let's move on to our next lesson.