Hey buddy what's going on.
This is Caleb with slopes dot com.
And in this video we're going to set up our trending repo cell subclass.
We already built the trending repots cell in Interface Builder but now we're going to build the subclassed
file and we're going to connect up the IP outlets and set up a function to configure them the way that
we need to.
So let's go ahead and let's pull open our X code project Whyalla and in the view file or The View group
my bad.
Go ahead and right click click new file Cocco touch class and set the subclass to be UI.
Table View cell.
We're going to call this trending repo cell.
And of course the language is swift.
Of course this is the swift course wouldn't make sense to do Objective-C anyway.
Go ahead and click next.
Then go ahead and save it into the view group like so.
And here we go.
So what we're going to need is we're going to go ahead and actually get rid of this Babai and we're
going to go ahead and think what do we need here.
How are we going to set up our cell first.
We're going to connect them outlets then we're going to set up the custom appearance of this cell the
way that it's supposed to look.
And you know what.
Let's dive into it now.
Let's go to our main storyboard and let's link up our elements.
OK.
So penélope and the assistant editor and there is our cell right here.
Beautiful.
So you know what.
Actually before we move on we need to set the identity of this table view cell to actually have the
proper identity.
So table cell is here.
And let's go ahead and click on the identity inspector and go ahead and set it to be trending Ribault
cell.
Now we're going to go ahead and copy this and then go to the attributes inspector and for the reuse
identifier we're going to paste that in but lowercase t ify.
That's not a real word but we're going to change the T to a lowercase T and press ENTER that'll be the
identifier we use when we dequeue the cell.
So now we can go ahead and click on our trending reposeful go to automatic and it's not showing up yet.
As you can tell that's not good but we can go into manual.
Maybe maybe not but C's Is it going to let us.
There we go.
Versey app versey app view trending Ribault cell.
OK.
Believe it or not we actually can connect these two here.
Sometimes it just doesn't show up unless you build or clean.
So let's go ahead and let's set up our Iby outlets by starting with the image view.
Let's go ahead and click on the image view if to go in a couple of layers there.
And right click and drag and we'll just call this repo image view.
Beautiful.
Next up let's go ahead and set up the repo name label.
Like so Ribault name label connect.
Let's do the description label.
Ribault description label we can just use abbreviations that's fine.
We can go ahead and set the little label here.
OK go ahead and right click and drag and that's going to be a number of forks.
Whoops.
Label.
Make sure you name it properly number of forks label.
This will be the language label.
And this one will be contributed.
I can't speak.
Contribute.
Tours.
Label.
Beautiful.
That looks awesome.
And there's one last thing that we got to do.
We're going to head in we're going to go ahead and basically set up this blue view in the back to be
a back view and we're going to actually set up the back view to have a nice drop shadow behind it.
So from this view we're going to go ahead and right click and drag and we'll just call this back view
just like that.
That's pretty sweet.
What we're going to do next is we're going to go ahead and right click from our button our view read
me button and let's go ahead and drop that there will call this view read me button like so real and
that looks great.
So let's think we have our outlets all connected.
I don't think we missed anything.
We have all of our labels we have our back view and our button so that looks pretty great.
Let's go ahead and let's collapse the assistant editor and just go straight into the trending repo cell
subclass.
So now we're going to do actually is we're going to set up a function called configure cell that we're
going to call when we want to pass in data to configure the cell.
Obviously it's in the name and we can do that beneath here.
We can go ahead and call phunk configure cell and we need to think what are we going to pass in to each
cell.
Well repo data right repository data from get hub and thankfully in the last video we set up our repo
subclass.
So sorry not a reprieve subclassed but our repo model.
And so when we configure the cell we can pass in a repo type repo.
That's a class we've already created.
And in order to continue setting this up we actually look inside repo to see what we have.
We've got an image name description fork's language contributors and repo you r l k lots of things to
think about.
But we can go ahead and set up our image view.
So let's go ahead and type Ribault image view.
Image equals repo image.
It's of type II image so we can just set that directly.
Next we have Ribault name label and we need to set the text property of that to be whatever gets passed
in from repo.
But we have one here repo that name beautiful next to repo description labeled dot text.
We're going to set to Ribault dot description as you may have guessed what else we have of number of
fork's label text but look a number of forks in our repo subclass here comes in as an int.
So we need to cast it as a string and we can do that really easily by calling string.
And then you'll notice inside of this there is something called String describing.
And we can pass it a subject which is really anything and it will encapsulate that as a string.
So we can create a string describing Ribault dot number of forks and it will cast that as a string and
pass it into our label which is really neat.
Next we need to do language label text and that's going to be equal to repot dot language.
Easy peasy last we have contributor's label dot text and we're going to go ahead and set that to be
equal to Ribault.
Doc contributor's although look at that it's coming in as an int.
So we need to go ahead and cut this using command X and type String describing.
I'm just going to type it manually and pass in repo number of contributors and we get that as a string
supercool.
So this is great and all but we have one more property inside that we have not yet used but we're going
to need we have a u r l right.
That's the L to the repo but we don't have a way of using it we're not going to display it on the cell.
We're not going to show it but we do need it for sure.
Because when we tap on that view read me button we're going to want it to be able to present the Safari
Web you controller.
So I'm going to create a property inside our subclass here and we're basically going to be able to set
the value of it to the value that comes in from the repo and we configure the cell.
So go ahead and just type private.
Private var Ribault you Arel of type string.
And we're going to make it optional because we've not yet instantiated it.
But that's what we're going to do in configure cell so go ahead and just call Ribault Yoro equals repo
that Ribault you IRL and it's now set.
So it's good to go.
What else let's think we have this all ready to configure all of the visible elements become configured
with the U R L becomes set let's think is there anything else we're missing here.
Hmm.
Well you know we could do we could definitely set up our back view to have a shadow because that is
needed and in order to do that we're going to go ahead and call a function or rather override a function
called Lay out.
Subdues OK.
And this is going to lay out the subdues right because all of these elements are sub views of our trending
repots cell.
So this is a great place to set up a custom view customization.
So let's go ahead and let's call back view and we're going to give it a corner radius.
So let's go ahead and let's call back few and we're going to give it a shadow so let's go ahead and
type dot shadow color.
Oops sorry.
We need to access its layer property so that you dot layer shadow color and we can use a color literal
and I'm going to use black because that will give us a nice dark shadow.
Perfect.
Next we're going to call back.
You layer dot shadow opacity and I don't want it to be super intense so I'm actually going to set it
to be zero point to five twenty five percent.
After that we'll do back view dot layer dot shadow radius and that's going to set to the kind of the
distance of the shadow from the surface below it and the radius is only going to be 5.0.
Not super big but big enough.
And then we're going to go ahead and set back a few dot layer dot shadow offset to be whereas it has
to be an instance of as you could tell as well you can't really tell let me do that again.
Offset is of type C.G. size.
So we need to set it to be equal to C.G. size.
And we're going to go ahead and create one with a with zero and a height of zero meaning it's going
to be offset zero.
It's only going to be directly beneath the rectangle.
All right so let's think.
Do we have everything we need here.
I believe we do.
But you know what.
Actually let's go look at storyboard.
We want it to have a nice rounded corner.
Right.
It has a nice rounded corner in this app.
It does not yet here.
So we're going to go ahead and actually customize that at the beginning by typing back view dot layer
dot corner radius and set that to be equal to 15.
All right that's the corner radius that I found worked really well in the simulator 15.
So what we can do is we can go ahead and let's just set up our cell or let's just set up our table view
rather to return one cell.
We're going to set it up manually and then we're going to actually go back and delete it later but I
just want to see if this worked.
I wanna see how it looks.
So we're going to go ahead and conform to Table View delegate and table view data source like so in
feuded load we need to set up table view.
Delegate to be equal to self.
Meaning this view controller we need to set table view datasource also to be self.
Okay that's just what you got to do.
And inside the class we need to call three functions.
A number of sections in table view number of items or a certain number of rows in Section and cell for
road index path.
Those are the three required ones for Table View.
Now for a number of sections we're just going to return one section of rows a number of rows in section
we're going to go ahead and call return 1.
Just one cell and then for self-growth index path we're going to go ahead and create a cell.
And it's really easy.
All we need to do is basically to create a cell configure it and then return that cell.
And since we're only doing one we can very easily do this.
So go ahead and type guard let sell and we're using guard let just because we will be queuing reusable
cells that are optional it's just the way to be safe.
So guard let's sell equals.
Table View.
Dequeue it's hard to spell reusable cell with identifier and if you remember our identifier is trending
Ribault cell with a capital C..
We set that in Interface Builder earlier.
Now the index path we can access here easily from the index path that is given in the function.
And so what we're going to actually do is this dequeue reusable cell function only Dijk Hughes a table
view cell.
But we have a custom subclass.
So we need to forecast it optionally as a trending Ribault cell.
Now with guard light you need to provide basically a way for it to escape in case we cannot successfully
create the cell.
So we have guard left and then we can say else like if that can't work we're just going to go ahead
and return a blank table view cell like so.
So now we basically have a constant here that will return a non-optional constant.
If we can successfully do it otherwise it will return AUI table you sell just a blank one.
Which is perfect.
So now we can go ahead and call sell that configure cell and we can pass in a repo.
But we should generate a static repo first.
So let's just go ahead and type let Ribault equals repo and let's go ahead and just pass in an image
which will do that in a second.
But let's just pass in a string here or let's call it.
You know Swift the description you know Apple's programming language.
All right.
Number of forks let's say 356 language we will say Swift of course.
Number of contributors let's say 562.
And the repo you are will just say debited to Google dot com.
I'm not actually putting a real repo there but for the image one thing we can do is we can just go look
at our assets and this is just for now I'm just going to pass in the search icon case I'm going to copy
that name actually go into trending feed Visi and I'll just say you I image but if you look in our image
if we initialize a UI image you can call one called named and you can just give the name of that file.
So we're going to go ahead and actually delete this initialiser and just use you I image named.
Now I'll paste in the name there.
And we are going to have to force unwrap it because basically we're saying there is a file name this.
So that's why we have to force unwrap it.
But now we have an instance of Repo that we can pass into our cell just like that.
And then at the very end after we've configured all the data we can go ahead and return the cell.
Easy as that.
And of course you'll see that a return error it goes away.
So I'm pretty excited.
I think we should go see if this works although you know what we should definitely call table view reload
data.
Otherwise it's not going to reload.
We haven't set up our poll to refresh indicator yet which we will which is very cool but let's go ahead
and let's build and run this to the iPhone 7 simulator and let's see how we did.
It's going to build and run.
Shouldn't take too long to build do to do didn't do beautiful.
Sorry I just thought you'd like some elevator music there while we were waiting.
And let's see how he did.
The app is opening it's taking its time.
Ooh.
Hey hey look at that.
That is awesome.
We have a nice border not a border but a nice chateau.
We've got an image.
We've got our border here.
This looks awesome.
The language contributors.
That's not good.
We'll get we're going to turn off selection because it doesn't look very good.
Let's actually go ahead and let's stop this and run it again so that we can just see without that a
live selection thing we're going to turn selection off.
But you know what I'm noticing noticing the border does not look great on this button.
So let's go ahead and let's go back to main story board and we're going to actually set this button
maybe to have a wider with maybe of 150 Yeah let's try that.
That should give us a little bit more room on the button.
But you know what I'm noticing this cell is a little bit squashed.
Right.
I don't know if you're noticing that too.
Let's see does that look better.
Looks like it's kind of getting cut off.
That's weird.
Do you notice that we're sort of it's almost like a coming to a point.
And it should be coming to a perfect rounded edge.
Let's go check suit we did in our repots cell.
Oh no that's rounded border button.
We're doing frame height and we're dividing it by two.
Yeah that should be fine.
Maybe I can access the view.
No.
Just a frame.
OK.
So afraid to height divided by two should be good.
Oh you know what I wonder though if the reason for that is because we have not set an explicit height.
Let's see because basically the height is going to be dependent upon the size of the stack view.
Yeah.
So we haven't set an explicit height.
Let's do that as well.
Let's set an explicit height of 40.
And now when we build and run that issue should go away with the corner being a little bit pointed.
It should be perfectly round.
Now let's check to see how he did.
OK.
Beautiful.
You see that there's no more little pointed edge that looks nice but I am a little concerned.
Why this is kind of being squished here.
Let's see.
I wonder if we return to let's try returning to cells.
I just want to see what it looks like.
So what I did is I just basically change one to two because it's going to return two rows in the section.
The same exact cell.
OK.
Yeah.
So it looks like the size of this view is going to be dependent on the size of the image and we do not
want that we want to set an explicit height for this back view like so.
And as you can tell it's just going to stretch out to the size of the cell.
But it appears that the cell is getting squished.
We've set a row height of 400.
But let's look at the table view.
OK so you add the row height is being set automatically so there couldn't be a problem here.
Let's go ahead and let's set it to be explicitly 400 let's build and run and let's make sure that our
cell is not going to get squished again.
And you know what this is actually gigantic So I'm going to try to shrink this down.
OK.
So there we go that's much better.
The cells are nice and tall but we're getting some pretty ugly off centering and squishing here which
is not what we want so let's look in our stack view and let's figure out what the problem is.
OK we have aligned everything to the center which is what we want.
We have filled everything with just Bill.
Let's try filling equally that.
That is not right.
How about Phil proportionally.
Yeah you know what that might work because our image is going to come in at a certain size.
Oh and you know what we're doing scale to fill.
We should be doing aspect fill because the image coming in should fill this view and that should not
change the frame of the image view based on how it comes in.
So let's build and run let's make sure that this fixed the problem and if not then we'll keep tweaking
till we get it right.
OK so let's just think about what we're doing here.
This looks much much better.
OK we're getting the image it's coming in the size it's supposed to.
This is a little bit more spaced out than I want.
So you know what I think maybe let's try changing it back to.
Well let's try equal spacing Let's see how that does.
Sometimes you've got to play around with the stack view until it looks the way you want.
They are known to be finicky and sometimes act and predictably OK.
So that's not good because then everything is sort of the same size equal centering is probably going
to be about the same thing.
Phil looks OK.
You know what since we're doing Phil I'm going to actually just set an explicit height for this to be
180 like so.
And that way when we pass an image and it's always going to be the same size and then everything kind
of depend on that.
That way we can just make sure that our image view comes in the same size the whole time.
Let's see if that fixes our problem.
OK.
Yeah that looks much much better.
So an image that comes in is going to fill this cell like so.
And then the button is here.
The language comes in all the numbers come in properly the description the title.
Awesome guys look at this.
This looks so good.
We have a cell and it's good to go.
So here's what we're going to do.
We're going to go on to the next video and we're going to basically set up our download service.
We're going to set up a singleton class that's going to allow us to start downloading data from the
get hub API we're going to fill this with real data very very soon.
So get excited.
Let's head over to the next video and let's do it now.