Them everyone welcome back and Johnny B here with sloop's dot com.
And in this lesson we are going to work on some more stuff.
So in the last lesson we actually got around to creating our first documents here in our collection.
All right.
And in this lesson we going to lay the groundwork so that the lesson after this one we can actually
use fire store to pull down all of these information from our collections database.
All right.
So let's go ahead and get started.
I'm going to jump into X code here and we're going to be working mainly in the storyboard and the I
mean the swift file.
All right and so here's where we are when reference our mockup.
And so this first view here on the left is the one that we're going to be working on and this lesson
we can see that we have a segmented control up here at the top similar to the one in the right view
controller.
And we also have a table view here.
And then each of these cells we have one of our thoughts represented we see that we have the user name
the time stamp the thought text a start image and a label indicating how many likes each post has.
All right so this is what we're going to be working on.
So let's get started.
All right.
First off let's go ahead and get our segment to control in here how to do that.
I'm just going to copy the one in our second controllers.
I'm going to copy it command see and then click on our other controller and say command to copy it.
I'm just going to drag it up here to the top here and we're going to constrain it to say 20 from the
left 16 from the top 20 from the right I'm going to add those three constraints and that's all set up
now.
But we do need to add a nother segment to it don't we.
So here on the right under segment's I'm going to up it to four.
I want to select the fourth one segment 3 and I'm going to change this title to popular.
All right.
That looks good.
Next up we are going to need a table view.
OK so down here to search for table view you don't want to drag that in here.
And let's just put that right up here and drag that down and out and we're going to constrain it to
zero from the left bottom right and then 16 from the top.
There we go.
Next up we're going to need a table of use cell.
So when you drag a table cell in here and then I'm going to go with it selected over here in the table
view so we're going to just kind of drag that down a little bit.
Come on drag down.
Do we want to working.
There we go with the content view selected.
We're going to change the background color just to two different color just so we can kind of see it.
I have a light blue here and that's just so we can see the kind of the content area of the table you
said otherwise this kind of look a little bit difficult.
All right so do we need in these cells checking out our mock up again.
So we're gaining a label here here here.
Image of you.
OK so looks pretty simple.
Bunch of label use and an image.
All right so I went to go and just search for a label here and going to drag in a label put it in the
top left drag and another label and this one will be for the time stamp.
One more label for the thought text one label for the number of likes and then an image the you for
the like for the star for the like image.
OK.
Let's go and zoom in here.
There you go.
Enclose the bottom pane here and it looks pretty good and with the image you selected that's when change
its size here and the size inspector 24 width and 24 height.
That we go drag right down here into the bottom left and see here is this table.
You sell a little bit taller.
There we go.
All right.
So I'm going to select all four of these labels at once using command and cooking.
And then let's go to the attributes inspector.
Let's change the color to a dark gray.
Change the font to custom.
And family is the.
Next.
That looks good I say.
Done.
And then with them all selected going to do command equal and that will set the size.
And then let's go ahead and start putting these where they need to be.
I'm going to double click on this one I'm going to put Johnny B in that's going to be kind of placeholder
text for our user name.
And then for the time stamp and say something like October what is today the ninth covered ninth and
it is 9 0 1.
Ok then I'm going to drop down the font size on it.
Somebody come over here and drop it down to about 14 maybe a little bit more about 12.
That looks good.
Now for the user name I'm going to select the font and change the style to medium and then command equal.
There you go.
That looks good.
And then for this one I'm going to say this is my random thought OK and I'm going to drop its size down
to 14 is good.
And then with the image of you you selected Let's go and set an image.
So when I say Star I.
And then here I'm going to set ninety nine and then drop the font size down to 14 as well.
How we get started to come together.
Let's go ahead and add our constraints.
OK.
So here at the top left I'm going to constrain the zero from the left and zero from the top.
For the time stamp I'm going to control and drag to the user name label and say center vertically and
so that will just Center those two to each other.
OK.
Or at least it'll center the timestamp to the user name label and then I'm going to pin it from the
left.
So that looks good.
Then for our Random thought here I'm going to go ahead and pin it zero from the left it from the top
and zero from the right.
OK that looks good.
And then over here I'm going to go ahead and constrain the sizes for the width and the height here.
So add two constraints for 24 and 24.
And then with it selected I'm going to also select the label next to it and we're going to put these
two in a stack for you.
All right.
And this is done by this little icon down here.
And when I click and it says embed in stack.
So those are now in a stack of you.
So with the stack you selected to go ahead and give us some spacing here of about maybe 4 maybe about
six.
Six looks good already and then with this stack the you selected this.
Go ahead and put you pound right there and we are going to pin you zero from the left four from the
top and depending on the size of your table you sell.
The bottom is going to be a little bit different for you perhaps but mine is 0.5.
And if you don't have the exact same measurements that I have my table use sell is let's see how tall
you are.
96 so it's 96 tall.
All right.
But what really matters is what's most important is that we have constraints all the way from the top
all the way through to the bottom of the table.
So now what this does is this is one of the prerequisites to be able to have a table view cell that
is dynamically sized for the height.
Because if we look at our mockup here if we zoom in we can see that these cells are not the same height.
Each one for instance has one here.
This first one has only one line for the thought text and so the whole cell is a lot smaller than say
this one which has four lines of text all right.
So that's important that we have these constraints just right so that they flow from top to bottom in
an uninterrupted chain of constraint.
The other thing that we need to change here is selecting this label here.
We need to go into its attributes and set the lines to zero.
What this does is allow the label to expand to display all of the lines for that for that text.
All right so now that we have that let's go ahead and get rid of this ugly blue background on the content
of vu.
We're just going to change the background to default.
All right.
That looks good.
Save that and a couple of other things that we need to do with our table.
You still selected.
Let's see here selection.
Change that to none.
What this is is that's when you click on a cell.
If we don't have a certain number then it'll highlight a gray ugly color case that's good.
Now with our table you selected we don't want any dividers.
So let's see here where is that table view we want that in table view and that's here under separator
is.
So that looks good.
All right so we have our storyboard set up for our main see.
Let's go ahead and add those outlets right.
So we're going to hold option and click on Main Visi that swift and let's see here we just need a couple
of the last one for the segment control and one for the table view.
So here inside of the class to make a little header for outlets and then I'm going to control drag from
the segmented control.
I'm going to say segment control and that's an outlet and connect is good.
And then I'm going to select the table view not the table view cell but the table view learn to control
and drag and create a new outlet called Table View.
And when they say connect all ready and then go ahead and close our assistant editor jump into main
VC swift and let's get set up for our Table View Controller.
All right.
So we're going to lay out the skeleton for our table view.
All right.
Let's get rid of this did receive memory warning and to work with our table view we need a couple of
things right we need a couple of protocols we need to implement those are you table value data source
and you Table View table view delegate.
There you go.
So we are to our data source and our delegate.
And we need to set the data source and delegates from the same table view that delegate is equal to
self and table view that data source is equal to self.
So now that we have set the delegate and data source let's go ahead and implement the methods that are
required to conform to these protocols.
And those are we have two of them.
One is number of rows N.S. and phrenologist return 0.
And the second is cell for a row at index path.
And for now all this return a generic table.
You said OK we'll see that.
All right so now we have the bare minimum of what is required for a table view to function.
However we need a data source right.
We need somewhere to store the thoughts that are going to be downloaded.
And and so what we're going to need is we're going to need a class for and I need a model to put those
into.
All right so here on the model I'm going to reichlich and see a new file and this is just going to be
a swift file.
I'm going to say next and we're going to call this thought.
OK.
So this is going to be a Class A blueprint for the thoughts that are downloaded from our fire store
database.
And this is going to be a Class C class thought and then we're going to go ahead and put in our properties.
Remember it's like a blueprint so we have properties and attributes of our thought to class and what
are those.
Well we have most of them here and our constants already category.
The number of Commons Number likes thought text timestep use a name.
Actually the category isn't one of them.
But anyway so here is the thought.
Let's go ahead and write those out.
So those are private set of our username of type string.
OK.
And so you may be wondering what this private set is what this means is that the you can read from it
from anywhere but only the class inside of the class is allowed to set the value of the variables.
OK so I'm going to just copy this and paste it.
We have six of them.
And then I just go through and change these.
OK.
So next we have our time stamp and that is of type date.
Then we have our thought text that is of type String.
We were a number of likes that is of type int here for a number of comments and that is of type.
And then we have our Dokument ID and that is of type string.
And so this is new.
So what is this.
So each thought needs to have the document ID property so that we can reference it at a later time because
later we're going to have that star that we can click on and and add likes to each post to do that we
need to modify the data for that document and to do that and we need to have be able to reference the
path to that document.
And so we need to know the document IDs so that has to be part of its class.
All right let's go ahead and initialize this in the same unit and the parameters are.
All of these are going to say user name of type String time stamp type date fat text of type string.
You need a colon not a comma string num likes of type and numb comments of type int and document I d
of type string.
There you go.
And then we're just going to set those values and say self adad use a name is looks like we have a couple
of typos here.
This should be string.
Then we go.
All right.
So self the user name is equal to user name itself that time stamp is equal to time stamp that text
is equal to that should be self self-taught that text is equal to thought text self-doubt.
What's next.
Numb legs numb legs is equal to numb likes and self that numb comments is equal to numb comments and
self-doubt.
Document idea is equal to document ID.
All right so now we have our class and our initialiser here.
Very good.
So now we can come back to our list here assigning a property to itself.
So if that time stamp you got to take a step.
There you go.
All right so let's jump back to our mean visi.
So now here what we can do is we can create a variable that holds a an array of these thoughts.
OK.
It's going to save our or private of our thoughts is equal to an array of the class thought and we'll
initialize it right here.
And this reminds in private that our outlets actually could be private as well.
And this is a good practice because it's actually possible to modify your outlets from another class
if they're not set to private.
OK.
So our variables are private as well should our outlets be.
And so let's do then add thought we see as we're also here going to change these outlets to private
as well.
I'm just going to copy that paste and paste it so that's good.
All right so back to the sea.
OK so now we have our array of thoughts.
And so now here is the number of rows in section instead of returning zero we can actually return thoughts
that count.
All right very good answer.
Now let's take a look at this cell for Rove.
Index path.
We don't want to return a generic white table view cell.
We want to return a custom cell class of our thought cell.
But first we need to create that.
So let's go right here in our view.
Let's go ahead and right click and say new file and go to Cocoa touch class next.
And this is going to be a subclass of white people B-cell is going to be called thought cell and we're
going to say next and create all right.
So we're not going to be using the cell selected method so I can delete that and save it and jump into
our main story board.
And here we're going to set the table view you sell to this new custom class that we just created.
So if the table view cell selected go to his identity inspector and change the class to.
Thought so.
And while we're here in the attributes inspector let's set the identity of the reuse identifier so to
say.
Thought so.
OK.
And remember that because we're going to need it in a minute.
So with that copied let's jump.
All right let's go ahead.
Open the assistant editor for thought sell that Swift.
So with this open we can set the Iby outlets for our prototype cell.
So let's go ahead and do that.
I'm going to click on and see here thought so content to view.
So our user name a label and a control click and drag.
We're going to see user name label.
That's an outlet well go and put my header here like I like to do outlets there we go.
All right.
Next up is the time stamp label someone a control drag and say time stamp label.
That's an outlet so connect it.
And then in a control and drag from the thought text the label thought text label.
And that's an outlet to connect that.
And then we need here in the stack to be you.
We need the icon or the star image or something to control and drag and say like this image.
And that's an outlet.
And then lastly the likes number label likes label.
OK so that's good.
Going to connect that as well.
All right.
Awesome.
So that looks good.
Going to going to close our assistant editor and jump into our cells just again and save this.
And next up we're going to create a function called configure cell.
And what this cell does is every time in our main Visi does swift that sulphurea index path is called
We are going to pass into this function the configure cell.
The thought that corresponds with the index path from our thoughts array and from there we are going
to use that thought and it's information it's properties such as the username time stamp that text et
cetera to set the values for these Iby outlets.
OK.
So here we're going to say phunk configure cell and we are going to pass into it a thought of class
type.
Thought it's going to save that and jump in main Visi that swift.
And so here instead of returning a generic people view VSL instead what we wanted to do is we're going
to say if let cell is equal to table view Doddie Q reusable cell and the identifier is the one that
we set in storyboard which was thought cell for index path index path that we go.
And we need to cast it as a thought.
So.
Okay.
And what are we going to do with this so what are we going to do is say so that configure our cell and
we're going to pass into it.
The thought that corresponds to the row that is being queued and we're going to get that out of our
FAZZARI right here.
And so the flow here what we need to say that path that row.
So how the flow is going to be once we get everything hooked up in the next lesson is we we fetch the
results from our database in our store and we're going to store those in our thoughts array here that
we're going to reload the table view which is going to call all of the table view methods and then each
cell is going to be skewed and we're going to fill up our table view array from the data stored in our
database.
All right.
So then once we configure a cell we're just going to return it to a return cell and if we're not able
to teach you a cell which never happens really to say else and then we're going to return a generic
table view.
All right let's go ahead and run this and we won't see anything because we don't have any data in our
thoughts array but let's just make sure it doesn't crash and make sure we didn't forget anything so
far.
All right it's looking looking good.
We have our segment control appear.
We're not seeing anything in our table but that is to be expected.
And I think we did.
I think we have laid the groundwork so that in the next lesson we can go ahead and jump right into actually
using fyrst or downloading that data parsing it out storing it in this thoughts array and then hopefully
we should be able to see those that data displayed right in our table view.
But I do realize that we forgot one thing.
We talked about having the cell to be dynamically sizing and there's a couple of more things that we
need to do to make that happen where we need to do is we need to supply an estimated row height for
the table.
So when say table you dot estimated rawhide.
And we're going to see about 80 and then the last thing that we need to do bring to the table view that
throw height is equal to.
And this is where the magic happens.
We say table view and we want automatic a dimension.
OK.
And with those two lines of code in conjunction with the other things that we did in the storyboard
setting the lines to 0 and having the constraints from top to bottom of our table cell that will let
it be dynamically sizing.
All right.
So some pretty exciting stuff.
I hope you guys are exciting for the next one where we work more with firestorm.
That's where the that's where the really cool stuff is.
All right.
And so I'll see you in the next one.