Hey hey ladies and gentlemen welcome back Johnny be here with us.
Come and we are continuing on with our SMAC chat app and we're making some great progress in just the
first couple of lessons.
We already got the slide out menu.
In fact let's go ahead and just run this and take a look.
In this lesson we're going to continue working on our UI we're going to get the channel VCU set up to
actually go ahead and take a look at our design mockups.
And here is what we're going to be working on.
So we got a couple of labels some buttons up on here.
Button Down here with a with an image and a table view that's going to contain our channels later on.
And one of the big things here though that we're going to work on is what you see here in the background.
This gradient.
And so we're actually going to code up a custom gradient view file that's going to be able to that's
going to be able to do this or is going to be pretty cool pretty fun.
And so let's get started.
All right.
So that's good.
And jump over here into main storyboard real quick and my Looks like our files get shifted around a
bit.
So we're just going to drag this over.
All right so here's where we're at.
Here's what we got so far in our simulator we're able to pull this and drag this over and right now
our channel Visi is just plain white.
So let's go ahead and work on that.
So how are we going to make this gradient.
You know you might think it's going to be pretty tough but it's actually not too bad.
I swear we're going to do is we're going to come over here to our view folder and we're going to right
click and say new file and we're going to create a subclass.
So we're going to make sure you've got Iowa selected and Koca touch class are going to say next and
it's going to be a subclass of you I view.
I'm going to call this ingredient.
You say next.
And create.
All right.
So what we're going to do is we're going to make this subclass not only work when we run but also so
that you can see it in real time action in the in the in the storyboard OK.
So first off what we gotta do is we've got to put in a line of code here called IB desirable and basically
what this does is this just lets this class know that it needs to be able to render inside of the storyboard.
And then we're going to need a couple of variables that we are able to select and change in the storyboard.
So for instance if we come over to the storyboarded and just grab any of these elements you'll see here
that you know we have things that we can select and change and we're just going to create custom variables
that we can change ourselves and that will change the properties of this custom view.
OK.
And we do that by declaring an IP inspectable.
OK.
And we're going to say var top color.
And that's going to be of type color.
And for now I'll just say something like you like colored dot blue and so now what we're doing is we're
creating a variable that can be changed inside of the storyboard.
And that's going to be a color picture that we can be able to choose.
OK.
And then we're going to say did set and we're going to say self-taught needs out.
OK.
So if we click on self that needs lay out right here it says that what this does is it invalidates the
current layout of the receiver and triggers a layout update during the next update cycle.
OK.
So basically when we're in storyboard if we click on this and change the color when we said it.
That's what this key word here is set then we're going to say OK we've changed some stuff.
So go ahead and update how we look update the layout of this view.
OK.
And so we're going to need a couple of variables here because we're making a gradient.
And of course a gradient is you know you have usually two colors it can be multiple colors but you're
changing gradually from one color to another color and it just sort of blends nicely together.
Right.
So we got a top color and then we're going to have of course a bottom color and I'm just actually going
to copy this and pasted for sake of time too.
Bottom color and we'll change this soon to say UI colored dark green and same thing.
Once we change it we're just going to update our layout.
OK but what's going to happen when we update our layout.
Well we you know we haven't even we haven't said what needs to happen when we update it.
So we are going to override our lay out sub views because.
So what's happening is when when we change color we say Sidneys lay.
And what happens when you say senese lay out then the the layout of the view is updated and this function
right here is called.
All right.
So here is where we're going to actually create our layer and add it to this new subclass.
OK.
So working with gradient layers and swift is actually pretty easy.
So what we're going to do first is we're just going to create a variable called gradient layer and that's
going to be of type.
A gradient layer for s.a.a stands for core animation.
And if you click on here right here you can see the description says a layer that draws a color gradient
over its background color filling the shape of the layer including rounded corners.
OK.
So we're going to create the gradient layer and then we're going to set up some of its properties.
OK so what does a gradient need.
Well first off it needs some colors of which we've already created a couple of here.
It needs a starting and an end point and it needs to know how big of the shape it is going to be filling.
And pretty much it.
So it needs colors start and end point.
And to know how big it's going to be.
OK.
So to start with we're going to say gradient layer dot colors is equal to.
And you see that it is expecting an array of UI or C.G. colors actually.
So we're going to see top color dot CEG color and then bottom color dot Siggi color.
So now we have set up the colors that are going to be included in this gradient.
Now we're going to set up the start and end point and talk about the start and end point.
I created this little graph for you.
So in Iowa as the UI views they have their own coordinate system OK.
So you view the origin is 0 0 so x equals zero and y equals zero.
And that's actually at the top left which might be a little bit counter-intuitive to you.
Right.
So in school you probably learn with graphs that the origin is down here and the bottom left not so
with Iowas I don't know why but the origin is up here in the top left at 0 0 and the y axis grows more
positive as you go down and the x axis grows more positive as you go to the right.
So if you use the the numbers are normalized to 1 OK so 0 being the least and one being the most.
All right so here at the top left we have we're at 0 0 and then here at the bottom right is 1 1 or here
at the top right.
X's 1.
And why is 0 or here at the bottom left X is zero and y is one.
So with that in mind if we wanted to add gradient that went cascading from the top left to the bottom
right the starting point would be zero zero and the endpoint would be 1 1.
And if we take a look at our designs it does indeed look like our gradient flows from the top left to
the bottom right.
So I'm thinking our start point needs to be here at 0 0 and our end point needs to be down here at 1
1.
Right.
So let's go ahead and code that up.
So that just looks like this.
We're going to say gradient there Dot start point is equal to and if you check out right here what are
we expecting.
C'mon auto complete it looks like it's going to show me but it's expecting a C.G. point.
OK.
So a core graphics point.
And so you just sort of see your point and then pull up a parentheses it'll give us some options for
auto completion.
So we're going to do.
And here's how we're going to see the 0 0 is our start point and Preedy and laser dot and point is equal
to see you point.
And that is going to be one 1 and so now we need to tell it what size the view is going to be sorgen
say ingredient layer dot
frame is equal to.
And for that we're just going to set it equal to the size of the view that it is a subclass of Spruance
self-taught bounds.
And then lastly we need to we've just created a layer we haven't added that to anything.
So we're going to add this gradient layer which is a see a gradient layer to the UI views layers.
It's once a self-taught layer dot insert some letters so this the specified layer into the receiver's
list of layers at the specified index.
So you can say insert Topes the layer that we are going to insert is of course our gradient layer and
we are going to place it at zero meaning that it's at the first layer.
All right.
So we're going to see this and we're going to clean this up a little bit get rid of the empty space.
Save that.
And let's go over this just this whole entire file.
Just one more time to start off.
We have I design them all which means that it's going to be able to work in storyboard.
We have our inspectable variables that we'll be able to change inside a storyboard dynamically and then
we have our override function of layout subbie use which is called whenever we change one of our variables
here and inside of that we create a layer.
We set the layer colors.
We set the start and end point and the frame.
And lastly we insert that Sabliere to the view itself.
OK.
So that looks good we're going to save that and we're going to come back over here to our main story
Borton and I'm going to select our channel Visi and I'm going to select our view here and we read it
change its class to a greedy interview.
Now check this out.
This is going to do a little bit of work here because it's got to reset the storyboard but if everything
goes according to plan we should see a nice gradient view right here.
And what law.
So you'll see here that we have.
We're starting here at 0 0 and we're ending up here.
So with these end start and end points you kind of think of it like you're drawing a string between
those two points and the color gradient in lines has to be perpendicular to that line at any point.
OK.
So imagine a string from here to here.
All of these gradient lines are perpendicular to that line OK.
So you can do some pretty cool things with with these grating views.
Just go ahead and just come over here and let's see if we can change these.
So we can change this to read and yeah it should update automatically here and storyboards So that is
pretty cool.
And I just wanted to show you a couple of other cool things with the gradients you see here in our gradient
layer dark colors.
It doesn't have to be just who you can actually put as many greedy and colors in here as you want.
So for instance I'm going to bring a sandwich the middle colors we're going to see a top color bottom
color top color that Suji color.
And then this jump back into storyboard and see what that looks like.
So now you see that we have three different colors here in the gradient.
And then let's go ahead and show you how you can switch up some of these other things here.
I want to bring back my let's see here my coordinate system.
So say you wanted a gradient that was you know just straight up and down.
What would your start and end point need to be.
Well your start point would need to be right here in the middle and your endpoint would need to be right
here in the middle at the bottom.
So what would that look like.
Well why would be zero and your X would be 0.5 right.
So you're going to say zero point five and then at the bottom needs to be all the way up the.
I'm sorry.
It should be 0.5 for X and 0 for y and then at the bottom why should be 1 and X should still be 0.5.
Let's go and see what that looks and see that come back to our storyboard.
There we go.
So now we see that we have our grading just straight up and down and same thing if you wanted to be
vertical looking gradient then you would just change it to 0.5 for the y 0 4 x and then the endpoint
would be one for X and 0.5.
Save that and come back to storyboard.
And there you go.
So we can do all sorts of cool things with with gradients.
And then the last thing that we want to do is actually just set these to the right colors that we want
to use because as you probably noticed this is nothing like the colors that we want to be seen here.
All right.
So what those cars actually are let's go back to our greeting view and switch things back.
Just going to do a switch back to where we want them 0 0 and 1 1.
Then when you get rid of this third color and then I'm going to show you something cool.
So the old days you'd either have to use the standard colors that color comes with or could your own
using the color initialize with the R G B components or.
Now you can just do something with like this color literal and then you can double click on this and
put in your own colors whatever you want them to be.
All right so let me just pull up here the colors that we want this to be.
Let's see here.
So this purple is going to be right here next color for a for d d.
Right.
So that's our top color and our bottom color and do the same thing here color literal.
Then double click on it to change it go to other and it's hecks color is 2 C D for d 8.
Right.
That looks good.
I just want to say that come back over to our storyboard and there we go.
All right.
So we got our good looking great.
And let's go ahead and compare this.
That's looking was looking pretty good.
All right.
So this guy right here we can also change to be the greedy and view change as well.
All right so that's looking good.
All right so what's next here in our channel.
See what do we got.
We got a label up here.
We got another label here.
But a table view and a image view here and then a button down here.
Right.
So let's go ahead and get cracking on that.
So here I'm going to go ahead and search for the label and drag you in here.
I got another label in.
We need a button up here.
Hey button down here.
And an image view you as well down here.
All right let's go and get started up here.
Let me grab both of these labels and change the color to white I you change the font to custom.
And we're going to go with hell couldn't you.
And that looks fine.
Is it done.
This top one though is actually going to be style bold.
And we're going to bump that up a couple of sizes.
So it looks good.
I'm going to change the title to smack and then if you if you get like this where is truncated like
them.
If you click on it and just go a command equal it will fit it to its size height.
And this guy right here we're going to call this channels right.
And then we're going to decrease its size all the way down to 12 right here.
And then we're going to say command equal on it again.
And that looks pretty good.
And this button over here this is the ad channel buttons so it's a plus sign.
We don't need any any text there for the button.
So I delete the text and then here I'm going to go to its image right here and this is add the channel
button.
All right so we got that right there.
Let's go and zoom in on this.
View Controller here.
All right.
So I started to take shape a little bit.
So down here we have our image view.
And so I'm just going to resize I was going through an image in there so that we can actually see it
and the image that we want is called menue profile icon and that looks good.
We need to resize it so the size is 75 by 75.
I'm just going to drag this down here to the bottom
that we go and then I'm going to track this guy right here and change its text color to white of course
change the font to custom and how that it can new is fine.
But this is going to be bold.
That looks good.
Going to change its title to log in right and then looks pretty good.
Now go ahead and start adding some constraints here.
All right so for this guy let's go zero from the left and 24 from the top and then for channels let's
go zero from the left and 20 from the bottom of the SMAC And what does that look different.
Let's see did I not do a left constraint leading space.
Oh there should be zero leadings space should be zero.
All right.
And then for our button here we're going to go ahead and do a controlled drag to the channel's label
and when I say center vertically and then we need to add a constraint and you may think that we should
just do a standard spacing from the right of you know 20 but if we run this remember that we actually
have a top view controller that doesn't disappear entirely.
So that's probably going to be obstructed.
Yep see.
So you can even can't even really see it.
You can see it for just a second but it's being covered up.
So remember we made the we made we left 60 points on the right.
So what we want to do is actually going if we have it selected we can go to it size constraint and then
we can drag its trailing space people to 20 and I can just change this to.
We want this to be 72.
All right.
So let's go ahead and run that again.
And if we click on this now or we have it.
And you know I think this is a 72 what I want to.
But 72 without the constraint with the margins you see we have some constraints.
The margins were here so I'm going to go and just delete this and then add it again.
But uncheck the constraint margins right here.
OK.
So what I did I did that kind of quick but I deleted the old constraint that had the margin already
built into it.
Then I clicked on it again added a new constraint and made sure that the constraint to margins was unchecked.
And I'm going to say add constraint and that should do it for us.
All right so these are all constrained up here at the top.
Let's go and do these guys down here at the bottom.
So when I say zero from the left 20 from the bottom and width and height and for this carrot here we're
going to control drag to the image here I'm going I say center vertically and then I'm going to give
it 20 from the left.
All right so that is now also fully constrained.
And last but not least I'm going to throw a table with you in here and let's go ahead and just kind
of throw you in here and drag you out.
And I'm going to constrain that zero from the left 20 from the top zero from the right and 20 from the
bottom.
Say add four constraints and then I'm going to make sure that our background is clear on this guy's
background here and say clear color and I'm going to save this and run it just to see how it looks.
And voila there you go looking pretty snazzy.
All right so we're making some great progress on our AUI right here.
We created an awesome gradient file that you can reuse anywhere for anything that inherits from you
I'd use.
So you know we're making good progress.
And yeah so next thing we're going to do is go ahead and save and commit hard changes because we are
good little programmers.
When I say get I make sure I'm on the right branch you for less than three minutes say get status say
get and get commit dash em and this is less than three.
And then I'm going to actually push this branch up to my depth slopes repose and I say get push.
Origin lesson dash 0 3
put in my password and that is pushed up to the online repo.
And we are looking good.
All right so and the next lesson we're going to continue working on the UI and hopefully we'll get to
the log in view control all right.
So if you guys are having fun and I will see you in the next one.