Hey everybody what's going on this is Caleb with Debb slopes dot com and in this video we're going to
build the search cell in Interface Builder.
We're also going to create its subclass and we're going to wire up all the Iby outlets so that we can
work with it and configure it properly to begin.
I want to pull open the simulator here and I want to show you what a search cell looks like in the completed
version of the app this is the one I've already built.
And let's go to the search section and we're going to go ahead and search for a repo here.
So I'm going to say are x Swift.
And there we go.
That's what it looks like.
Now I use the get hub logo.
We're not going to use that in this app.
We're not allowed to use it of course because it is a for pay company.
So we're going to just use our search cell there because it's a search result or our search search icon.
I mean so let's take a look.
We have a title a description.
We have the fork count as well as the programming language so let's go ahead and let's go set this up.
OK let's minimize that and pull open your X code project and let's do this.
This is so exciting.
So basically what we're going to do is we're going to begin by dropping in a view very similarly to
what we did in the trending feed we see.
All right.
And we're going to go ahead and positioned this so that it is like.
So we're going to fill most of the cell but not all of it.
And we're going to set the background to be our dark blue color just like that.
Now let's go ahead and let's set some constraints here by pinning it to all four sides.
Zero.
So it'll stay in place.
That looks great.
And now let's think what do we need to do.
We need to set up well let's look at our simulator.
We need to set up some labels I believe.
Yeah an image view labels the description cool.
Let's do that.
So let's drag on.
AUI label like so.
There we go.
And you know what.
This cell is actually starting to look a little bit too short.
So let's go ahead and pull it down.
And you know what that looks too big now so let's try one hundred instead of 80.
And then the table view we've got a set to also be 100 so that the table you respect's are change.
And let's go ahead and let's set this up.
We're going to make this a little bigger like so we're going to change the fun to be ave next.
Just as you may have expected let's change it to be demi bold Whoops not italic and let's set it to
be size 20.
Make it white and we're going to stretch it to go way out here like so then let's just call this repo
name beautiful and I'm going to copy and paste it like so by clicking on it like this and copying and
pasting and then beneath it I'm going to go ahead and change this down to maybe size.
What is this 14.
And let's change it to be medium width or I guess thickness.
That's going to be repo description.
OK.
Very cool.
Now we need to think what else are we missing.
Let's pull open our simulator.
We have our description and then we're going to need our forks count and our language and so you know
what for that I'm actually going to just go ahead and select the stack view that that's from and copy
it and then paste it to our cell just like that makes it really easy and we don't need contributors.
We're going to go ahead and just delete that.
And you know what let's go through and delete ones we don't need.
I don't need that I don't need this second separator.
Whoops that was the separator for the one above.
Make sure you're in the right view controller.
I don't need that separator.
That looks pretty good.
And you know what we also have this little view on the side here.
OK super cool.
So now let's just make sure that none of these are connected to the other view controller which this
one looks fine and the language.
Also we should check OK.
It's good to go.
So that's good.
That will connect to our search cell in a little while but we need to add an R image so we need to do
UI apps UI image view.
Drag it on right here.
OK.
There we go.
Very nice.
Let's make it a square and let's make it Lineup exactly there.
So it should be 68 by 68 and we can make that a little more exact this way.
Perfect.
OK.
So why don't we just go ahead and fill this with our search icon large for now and then do aspect fit.
There we go.
Super cool.
That looks awesome.
And yeah let's constrain the rest of these guys.
So let's go ahead and set this to go to the edge of that image.
Let's constrain our image first actually from the top 10 from the right and eight from the bottom with
a fixed width of 68 that'll do it.
Then let's go ahead and let's set this to be 8 from the top 8 from the left from the right.
And let's set it to have a fixed width or sorry a fixed height of 28.
You know what.
Let's make it 24.
There we go.
Then for our repo description let's go ahead and let's set that up as well.
So it currently is 28 from the top because it's beneath our repo name label which we don't want that
we want it to be snug right next to it.
So go ahead and drop it down a little bit.
And then also pull the end so that it matches where the repo name ends.
So go ahead and let's just set this to be zero from the top 25 from the left 8 from the right.
And let's do in two from the bottom is fine we'll give it a little bit of space.
OK.
Very cool.
And last we're going to choose our stack view here which is hiding from us.
There it is.
And we're going to go ahead and pin this to from the top 25 from the left.
And instead of giving it a fixed width or anything like that I'm just going to go ahead and give it
a fixed height of 20 just like so although it's given me a problem now because I believe one of the
height constraints carried over from when we copied it so delete that and then change the original height
constraint to be 20.
Basically what this is going to do is it's going to set it up so that if a long programming language
name comes in it will be able to stretch.
And that's why we're not giving it a fixed width.
So this is great.
This is in place and now we're going to go ahead and create the subclass for it.
So go ahead and right click on view click new file and then choose Cocco touch class.
Now it's already a subclass of your table view cell so just call it search cell and click create wonderful.
So now that that's there go ahead and click on Main storyboard.
Go back to your table view choose the cell and now we can go into the identity inspector and we can
choose search cell.
And you know what while we're at it we should set the identity as well to have a reuse identifier of
search cell with a lower case s at the beginning.
Very very cool.
So now if we select the search cell we should be able to although it's not going to let us let's try
building it let's clean it we go and build and as soon as we are done doing that we should get our cell
to show up the way we want which is beautiful although it's going to take a while so I'm just gonna
actually do it manually.
We don't waste time.
There are search cell and we can actually get rid of set selected and we can go ahead and start connecting
our IP outlets.
So let's go ahead and let's.
Right click and drag from repo name to search cell and just call this repo name label.
Right click and drag from repo description and say repo desk label.
OK there we go our build is now finished.
Click on the label in the stack view that's going to be fork's count.
So let's just say fork's count label.
This is language label
and we're going to go ahead and leave the image you untouched for now.
But let's go ahead and get rid of this and let's configure our cell.
So just like you may have expected our cells are going to be accepting an instance of repo and that's
what's going to get all of its information.
So we're going to create a configure cell function func configure cell and we're going to pass in a
repo of type repo.
And now we can go ahead and type repo name label text.
It's going to be equal to repo dot name repo description label that text is repo dot description as
you can see this one's a little bit slimmed down forks count labeled that text is equal to repot dot
number of forks but remember that's an integer.
So we need to call string string and call string describing or we can just type it and then pass in
Ribault the number of forks and it will create that into a string which is neat.
What else we have language label.
Whoops sorry calling the wrong stuff here.
Language label text equals Ribault language.
And now our cell is all configured with all the data we need.
That is when we call that.
But when we select a cell we're going to have it load the repository.
So I'm going to create a variable that's going to hold the value of that Ribault you or else so go ahead
and type private var Ribault your l of type string.
And go ahead and make it optional because we have not yet instantiated it.
But now go ahead and instantiate it.
So you are all equals repo.
You are l.
Now it's good to go.
So this is awesome but we're going to go ahead and just use awake from nib to round the corners of this
cell and you know what we actually can't do that until we right click and drag from this view and set
it to be back to you like so.
OK so now that we can access that we can call back view dot layered dot corner radius and set it to
be 15.
Very cool.
That should do exactly as we're hoping.
And now our search cell subclass is good to go.
We are ready to start searching in our table view and showing results.
This is amazing.
So let's go ahead and let's move on to the next video where we're going to set up the search the seas
table view to actually show results and make API calls using our ICs Swift it's going to be amazing.
So let's head over there and let's get started right now.