Welcome back again.
In this lesson we're going to talk about custom table view sales and in doing that I'm actually going
to do a quick recap of a lot of concepts that we have done both in this section and our previous sections.
So I will try to make a very tiny application that uses a lot of things that we have done in the past.
So the application that I develop is essentially like a real estate property search application that
you have a table view that shows you a lot of different properties and you can search between them.
I believe the search part of it to the next lesson.
But in this lesson we learn how to make the property population how we add so many different properties
and then how do we customize asset to show all of those details about each property.
So that's going to explode.
And in here I'm going to start a new application from this point on within the application as sometimes
I make a single of your application and I have an add a table view to it and sometimes I'll make a single
application I will make a table view controller in it.
Both of them would be kind of identical but depending on your needs you might need either of the two.
So it's makes sense that I show you both of them several times so we have a better grasp on them.
So for no I say a single viewer application custom so custom tables set up and this is my application
and the moment it shows up I'm going to head into the storyboard and say for this one maybe we make
a table view controller.
So I'm going to add table of your controller if I remember this is the one that built into it has a
table view and built into that it has a table view cell.
But this cell this time I don't want to use it as it is right now which is using one of the basic pre-existing
templates.
I don't want to use either of these.
I want to make my own template under the table they want to make for myself it essentially has these
different parameters.
It has a title on the top.
It has a description in the center.
And since this is an application for real estate it also shows me the number of the bedrooms and the
number of the bathrooms on that property.
So let's go ahead and design a cell like that.
I'm going to select my table view.
I'm gonna go up here into my table of use dimensions and say each row is a height is 128 unit.
So it's actually quite larger.
And I could temporary change the background car of the cell so we could see it more clearly.
Maybe if I make it like that it shows me that this area there kind of brown area is where my cell is
going to be.
Now a cell view is like any other view.
You could just add any objects tweet as a sub for you if you want it.
So for instance I could go ahead in here and say I have a label I'm going to wrap it up here say this
label on the very top somewhere like there will be my title the main title of the property then I'm
going to have a text view so I'm going to add another one of these which is here a text you in here
and a lot of smaller of course I'm going to come back to these and clean things up I'm going to add
two more labels so there is a label here on the lower left corner and they that label on the lower right.
CORNISH Now let's go ahead and zoom into this thing and we can start modifying things.
The first thing is this label on the top.
I want it to be centered.
I want it to be a lot larger.
Maybe want its font to also be quite heavy something like this.
So for instance this is the one that shows me maybe somebody who is selling their property they going
to title it house on the terror street maybe something like that.
So that's the title of it.
Then there's a better description for it and description for it says maybe along the lines of this is
a beautiful neighborhood or anything that you can imagine someone would write in a description for a
property.
I'm going to replace it somewhat about here
like that.
So they're all set properly.
Then these two labels are meant to show us the number of the bedrooms on this property and the number
of the bathrooms.
I'm not going into the details of developing a real estate application just yet.
We are assuming that these are for residential places and they have bedrooms and they have bathrooms
so that's all we care about right now.
So we have not and maybe make it a little bit wider.
Something like that or something one of the hundreds maybe both of these a little bit smaller so they're
not as a prominence and maybe both of them are having different colors such as dark gray colors something
like that.
I'm for a description.
I'm gonna throw up the background color.
I don't want that OK.
And of course for the cell itself I'm going to make its mind going to be something like a group table
view.
So it's actually quite clean and nice and it shows me all the details that I want.
Then next thing I have to do is I'm going to have to set the separator line so I can see them clearly.
I'm going to go in here and say My separator is a single line and that single line has a color maybe
like this one a bluish color.
They can clearly see I usually like to set my custom separator in sets of 15 and 15.
So there's a little distance in here.
Little gap on the other side.
And you have to set the kind of strains for your elements within your cell simply because the table
view as you set it it will always have a height of one hundred twenty eight but the veto of it will
depend on the size of the device that you're using.
So if I'm designing an iPhone 8 as I'm doing it in here and I write an iPhone 8 we obviously see the
very same thing.
But if you want to be run this application on iPhone 10 as it is the case in here then we'll end up
seeing a different arrangement of the elements.
So it makes sense that they set all the constraints manually.
So to do that I'm going to go ahead and say this object in here it has a top US space.
It has a leading space.
It has a trailing space and it has a height.
There is an icon set the height is simply because I know the height of the cell it will always be the
same.
So proportional to that.
This is OK.
Then I'm going to go ahead and do the same thing for my other objects including the text edit or text
view set the height for it.
Then I'm going to say for this object it has a VIT.
It has a vertical spacing.
It has a leading is facing and it has a bottom is facing and the same thing in here.
It has a width it has a trailing a space a vertical of space and a button space and that's all I have
to do to set all the kind of thing.
So they always look the same.
Now the next thing that is quite important is how are we going to access these different items.
To do that we need to have a subclass for my table view cell which currently doesn't have any class
and is using the default UI table view cell.
So they go ahead and say fine new command n I want a Coke with each class of the type you I table view
cell and I want to call this one my table view cell all is property table view cell depending on what
you are doing in a larger application it makes sense that the names are more definitive but in our smaller
applications such as this one it doesn't really matter in the table view cell subclass we don't really
need to do anything we need to keep both of these functions but what we really need to do is we need
to add all of our outlets so to do that I'm going to head back to a storyboard select my cell and say
my cell has this one as a class for its property table view set and once they do that I could go ahead
to my assistant window and load the right object if it doesn't load it automatically which sometimes
exclude doesn't you have to manually load it.
So I think that's the case with me now.
So I want to go in here and say it in a sort of the automatic make it manual and in here load property
table view said I'd load this one I'm going to go ahead and say this object on the top this one Let's
call this one may maybe top labor the text.
I'm gonna call it this corruption text view the left one here.
I'm going to call it bedroom's label and dab on the last one I'm going to call it bathrooms labor.
So we now have a new class that can access all the outlets from my newly created set.
So let's go ahead into our actual story boiler actual fight which is this one make it our initial view
controller just like every other time that you had to do it in you and I have to assign a class for
here as well.
So I'm gonna say command and in here.
That's going to be a you I table view controller and I'm going to call it my table view controller.
Yeah I've done this several times before already.
Of course you know we don't need the view controller anymore because nobody's really using that someone
actually delete this one and I'm going to head to the storyboard and say the class for this table view
controller is actually going to be my table view controller.
And if you remember table of your controllers by default they had a lot of methods methods that we would
need to populate their content number of sections number of rows.
And the only tool that we actually needed are these to the number of rows and also sell for raw at index
spot which is here.
The formatting is confusing me for a second cell for row.
I didn't expect everything else I can drop for now.
So here we have now these two functions that we have to use them to populate our table view.
So later on I'm going to write an actual data class that is going to hold on to my information but for
now because I just want to be able to see what I have done with my table view I'm going to go ahead
and say let's see our table view always shows us 10 sales.
So that's just a random number it shows as a static number of 10 sounds at all times the memory format
everything nice and tidy.
And then for the cell at row I'm going to have to come up with some random or just you know static values
I'm going to say cell that becomes my table view Q reusing identifier I don't have an identifier just
yet so I'm going to go to my cell say My cell is actually having an identifier that is if I selected
properly it is cell I.
So that's the idea for my cell and then I come in here and say that's the idea for it for index map
but then I don't want it to be of the type that is the default type which is you a table view cell I
want it to be after type property table view cell I'm going to go ahead in here and say as property
table view cell.
So the cells that they have in here I know them to be of the type property table of your cell.
So I'm going to get it to be of that type the moment we do that if for a second you forget this entire
part.
This is like this is going to produce an error or not but if we could assume it to be like that it means
we have a cell of this type and that type gives us access to all of these guys top labor description
of bedrooms and bathrooms.
Talk is no different than using any other class they could come in here and say well said the cell dot
top label that text to become let's say title and then sell that description view that text make it
to be this is a description and then sell dot bedrooms label let's just give it a number or bedrooms
something like that and then sell that bathroom label becomes let's say the same thing.
So when you do this you essentially get all of those variables from your cell to be populated in here
of course in this case I'm just doing it a statically for ten of them and I forgot to add the two texts
in here as I always do.
And if you're on the application now we should be able to see this application showing us 10 cells that
they are all populated but they're populated with the same set of information which is obviously not
what we want but it shows us we're going in the right direction at least.
So another app is know that I can see that there is now one title this is a description so on and so
forth for ten of them.
Now we need to populate our data and this is really something that we have done before.
This is nothing new about it.
This is not about the table views.
This is merely about using classes and using arrays to produce data for application.
So the first thing I'm gonna do is I'm going to make a new shift file this shift while I'm going to
call it property and the property is actually going to hold on to my property class.
So it's going to be a class property.
So this is each of the listings that people they place on your application essentially.
So for each of them I have went to have a value and let's have title which is a string I'm going to
have a valuable description which is again a string I have a variable let's call it bedrooms.
This one I'm going to make it an integer and a value of our bathrooms which is again an integer.
And I think that's quite enough for my application on this test that we are doing in a real life application
you might have so many other pieces of information.
But I think for us this would be this would be enough.
So the next thing I want to do is I'm going to have to write and in it and in the end it I'm going to
say input title which is a string and input description which is also a string I'm gonna get an input
bits which is also which is an integer an input that's which is an integer and based on that you're
going to populate everything I'm going to say title is the input title and description is the input
description bedrooms is the input bits and bathrooms on the input that's and that's all we have to do
in here.
So we have a new cast this new class has an initialize there initialized as based on the four values
that the offer it makes a new property for us.
Now the next thing we have to do is we have to assume that our data is going to be stored somewhere
and this is something we'll see in far more advanced details in the future but for now we'll actually
place my data within an array of a new class and you might be wondering why don't we put it right here
in this class.
You very well could do that but there is actually another very good practice a better practice is to
separate your objects as much as you can your model as much as you can see your data is in a separate
place.
So if you want to access it and read it you can read it from a separate location.
So I'm going to say I have a new find this new find I'm going to call it to be my data and obviously
it holds a class called class.
My data doesn't have a super class and the only thing I want to have for you here I want to have one
value event which is called properties array which is an array of property property.
So that's the only thing I want to have for it.
Now since I don't want to constantly re initialize an object from my date on I want to be able to use
it globally everywhere I'm going to make this guy to be a static value.
So it's a static valuable called properties array that we can access it wherever we want.
And we only initialize it once once we have it.
We can use it forever if we want to use it.
So that's all we have to do for our class my data.
Now the next thing is how are we going to populate the information.
Harvey going to make our properties in a real life application these properties would be posted by many
many users.
We don't have that luxury.
Yes I'm actually going to go ahead and make some dummy information here.
And when I go ahead I'm making you find I'm going to call this one populate or maybe dummy populate
because these are the dummy information we don't really have them from some source or nobody's actually
entering them.
We're just assuming there would exist at some point.
So in here I have a class called dummy populate the dummy populate essentially has only one function.
That's a function called populate.
These are the dummies that you're going to produce in here.
And since I'm going to use this function in any of the other classes I'm going to have to make this
a class function because I don't want to initialize this dummy populate as an object.
I just want to use this particular function from it.
This would be very similar to copying this function going to a table a view controller and placing it
somewhere up here.
We could very well do that.
The simple reason why we don't do it is because it's a better design to have everything separate from
each other.
This way my table view controller can focus on only taking care of the table view and my populate takes
care of the population of the data and everybody else takes care of their own task essentially.
Somebody delete that.
Go back to my dummy populate.
I have a class function.
The first thing I'm where doing my class function is I'm going to say my data dot array becomes an empty
one because we want to start adding stuff to it.
Then I'm going to go ahead and say let let's call this one house one that is going to be a property
and that property needs all these foreign pieces of information.
So I'm going to go ahead and say the title is house on the terrace the streets and the description is
this is a beautiful house.
They'll built or something like that.
I don't really know what they post in there.
The number of bedrooms is three the number of bathrooms is say 1.
And then I'm gonna say this guy my at my data that's properties that append house 1 tweets.
Then I'm going to copy this process one more time.
And since these are my dummies I'm only going to two times.
So the next one is going to be are lists view apartment.
If that's how you spell it.
And then I'm going to say beautiful building with nice views and it has only one bedroom and one bathroom.
And that is going to be added in here as well.
So you're adding both of those to our properties array and that's all I want to do with my populate.
If you wanted to you could add more of these or you could write a text field set off you know objects
in a new view controller where your user can actually add more of these to your array if you will do
a lot more of these when we talk about data which is coming up in a few sections but for now we're just
gonna make two dummies.
So by the time this function is called our properties array will have two objects in it.
So the last thing we have to do is actually rather simple.
I have to go to my table of your controller in my view did look when the view actually loads for the
first time I'm going to go ahead in here and say dummy populate dot populate.
So make all of those objects.
So by calling this function you're essentially making all of these things happen.
So by now we have the array ready to us if I have the array ready to do me I can simply do this.
I could go ahead and say number of rows are actually going to be made out to dot array that counts.
So instead of just you know putting 10 in there I'm going to say the number that I actually have in
my array and the next thing I'm going to do in here is actually very very simple in here I'm going to
go ahead and say let this property to be.
I'm going to say my data dot array and from the array I'm going to get the object that index part the
draw because this cell is showing us either the first one or the second one from these two objects.
These these two objects in the area or this array so I'm going to go in here and say well wherever you
are.
Find out which property you want to show.
And if you found the property for the top label say that property dot title for the description say
that property.
That description for the number of the bedrooms say that property dot bedrooms.
So we have to format it.
I'm going to go ahead and say let's format it like this and paint.
Yes say bedrooms or maybe like that better.
I'm led do the same thing for the bathroom I'm going to say it is actually like this.
It has a formatting of this property that bathrooms.
And it says bathrooms and that's about it.
We have a custom table view so that we have it here as a as a class.
And that one is connected to an actual cell in a storyboard.
We have our data being populated in year from a certain type of property and wants to become part table
of your controller we populate those.
We find the number of those two and assume the number of cells in our table view and for each of the
cells in our table view.
If you find that particular property and we use that to show the different values of our outlets in
our actual cell.
So let's go ahead and run this application if it all goes well we should be able to see two cells each
cell showing us some of the details and that's happening in here and we are seeing two of the cells
in here.
These are custom sense you could imagine that for the cells you can have multiple takes viewers Labor's
image you use for whatever purpose that you are trying to make them look like you could actually extend
the table view to have more you know detail is in here if you want to make an application such as a
Twitter application that each of the cells on their own they lose so many many different things.
The advantage of the table view is that these cueing feature that gets rid of the already used cells.
So that was how to use a table of your cell said let's keep it up to here and move on to our next lesson.