You will learn to develop sophisticated user interfaces for iOS, with a focus on user interface design best practices, UI animations, and responsive design. You will learn about the key UI widgets, mapping interfaces and view restoration.
UITableView: Part 2
Loading...
Del curso dictado por University of California, Irvine
Best Practices for iOS User Interface Design
177 calificaciones
University of California, Irvine
177 calificaciones
Curso 3 de 6 en SpecializationiOS Development for Creative Entrepreneurs
De la lección
Table Views, Core Data and User Interface Integration
In week 4, we will look at table views, core data, and user interface integration. We will cover table views, table views plus core data, and you will finally learn how to put it all together. We will end the course with a peer review assignment called To Do Manager.
Conoce a los instructores
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner at Gradient
[MUSIC]
Okay now what we're going to do is we're going to create a prototype cell.
And we're going to connect our table view to our view controller so
that we know that the view controller's the place where the delegate and
the data source is going to be drawn from.
So let's switch back to our project and
let's put our prototype cell and to open up our hierarchy here so
we can see what we're working with.
And let's take our table view cell and
let's drop it into our table view here and this becomes our prototype cell.
And into our prototype cell let's take a label.
And let's put a label into our cell.
And lets give it constraints within the cell to make sure that it
fills up the whole space.
We want it to be at zero, at zero, zero, and zero to add those constraints.
Let's Option+Cmd+Equals, lay it out, see how it looks.
Additionally, I think I might want to be,
I'm going to control drag it to the thing at its end to the element that it's in and
want to center it vertically in the container and
I'm going to Option+Cmd+Equals to make that layout right.
And then just to demonstrate the functionality of this cell.
What I'm gonna do is I'm gonna select my cell and
over here you can, I want this label to be
italics so that we can just kind of see what's happening here.
So let's see.
Okay, there we go.
I still want it left aligned.
Okay.
Okay, that's good.
Now our table view cell, so
what we've done is we put a label into our table view cell.
That cell is going to be something that we create, and
we've going to create multiple copies of that when we create our label.
And, yeah, so we're gonna go ahead and
call and give that cell a name so that we can access it.
And call it our cell.
[SOUND] All right.
So far so good.
And now we want to assign the delegate and
the data source of our table cell to the code in view controller.
We saw this before when we did our scroll view.
We're gonna click on table view and we're gonna control drag it to the view
controller and we're gonna set it as the data source,
and then we're gonna do it again and we're gonna set it as the delegate.
What that means is that we're gonna need to go and
write code that implements methods in our view controller
because we've just assigned it to be the delegate and the data source.
When we do that we need to give our view controller a couple interfaces and
we are going to give it have it be two interfaces we want it to have
the UITableViewDataSource and UITableViewDelegate.
There we go.
Super.
And the first thing that I think we wanna do is we're going to have to answer
the iOS request to say how many rows should iOS put in our table.
And for starters, let's just hardcode this as three.
And so in order to do that we have to implement a couple of functions.
The first one is going to be.
Here we'll put a, Just a marker in
here to indicate that we are doing
UITableViewDataSource, functions here.
And the first thing that we want to do is we want to see how many sections are in
our data, and this is a function that is described
as part of our interfaces and it is number of sections in table view, great.
And we're just going to return one because we're not going to have multiple sections
we're just going to have one section.
So that's super.
All right, the next thing that we want to do is we want to say,
okay how many rows are going to be in a given section?
So the way that this happened is iOS says asks us,
hey, here is a section, how many rows should be in it?
So we have to have a function that can answer that question.
So this is gonna be also return NSInteger object and
it is going to be the number,
NSInteger is gonna be tableView, numberOfRowsInSection.
Great, and we're just going to hard code back the answer three for
the time being, just so that we can see the result and see how this works.
Then the last thing that we need to implement is we need to respond with what
the data should be in each of those cells.
And so iOS is gonna ask us to create the appropriate cell for a given row.
And so we're just gonna repeat the same thing and
we're going to write a function that returns a UITableView cell.
And it is, did I do that right?
Pointer, not.
Tableview.
Something, I didn't type something right here let's see.
UITableView solve pointer.
Tableview.
Good.
UITable, there we go, UI table view, not cell, just UITableView.
Okay, so this function is responsible for replying with which cell,
should be placed into a table in a given row.
So iOS will say hey here's the index path and
the index path is a combination of the section and the row and
we're responsible for returning the cell that's appropriate there.
So what we're gonna do is we're gonna grab that cell and we're going to return it.
And so, what we're gonna do is, we're going to need to have access
to our prototype cell.
So let's see, how are we gonna do that?
We're going to, Need to have access to our TableView.
Where is our TableView?
All right, so let's Ctrl-drag that over to our interface.
So we have access to our table view.
All right.
And what else are we gonna want?
We're eventually gonna want to add our button, and
we're gonna have our text field, but we're not gonna work with that quite yet.
And what we're going to do is we're going to grab from the table view
the TQ reusable cell with identifier and
the identifier is going to be our cell.
And for index path, index path.
Great.
All right, so let me describe what I just did here.
Return that.
All right, and it's complaining about something.
Let's see.
Strange cluster base.
There we go.
Okay so this is a function that is called cell,
tableView, and then cellForRowAtIndexPath.
And we're gonna be pass the indexPath that we're interested in.
But for the time being, we're not using that information.
We don't care what it's going to be right now.
Instead what we're gonna do is, we're gonna ask our table view,
which we've defined up here, to give us a cell
from our prototype cell list, whose name is label.
Here's our cell, and we see over here we gave the cell an identifier cell.
And so that prototype cell is what we're asking for and we're going to return that.
We're going to return three of them when we're asked and
there's only going to be one section.
So if all goes well,
when we run this we will see a table with three elements in it.
Let's see if that works.
Great, so, wow, that worked really well.
Except my sort button disappeared.
We have to see what happened to our sort button.
You can see that these labels are in a table, that they bounce and
you can scroll them, and that's not very interesting but
we've multiplied three different prototype cells there.
Let's see what happened to our sort here.
Table view seems to have subsumed it.
[SOUND] All right, well let's see,
let's take all of the constraints off of our table view.
Makes me nervous.
And let's run it again, see if we get our sort button back.
Nope, still don't have our sort button.
Let's get our table view and lower it a little bit.
Let's see if we can give it some spacing here, vertical spacing.
And Option+Cmd+Equals, like that, cuz we took all of them off.
Okay, so we need to add constraints back to our table view so
we can get the desired effect, which is that the table is visible.
All right, so we've given it vertical spacing from sort and
now we wanna place it 0, 0, 20 from the sides and the bottom.
Add those constraints and then Option+Ctrl+Equals,
see if it lays out, good.
Now we'll play it.
We've got a table view, and our sort button has still disappeared.
Why has our sort button disappeared?
I'm not sure.
Let's try relaying out our sort button.
We'll clear all the constraints on our sort button.
Let's lower it a little bit.
Hm, let's align it horizontally in the container.
Let's add that constraint.
All right, let's bring it down again.
Oops.
Let's give it constraints on
the top and the bottom for now.
Option+Ctrl+Equals, you see that lays out okay.
Let's run it.
See if we can get our sort button back.
There we go. Our sort button is back.
Constraint somehow got overridden or something.
I don't know what was going on.
That's not a great user interface but
I don't want to spend too much more time on that.
I just wanna have the sort button there for he future.
All right.
All right so we established that our view controller is the delegate for
our table view and we've written these three functions that are going to
provide the number of sections in the table view, which is one.
The number of rows in the section which is gonna be
three regardless of which section we get.
And we're going to return a cell, which is a copy of each of the elements.
Okay, so the next thing that would interesting
is if we would change the content of the label to be
equal to the value of, The row that we got.
So, that would be kind of an interesting thing to do.
So let's see if we can do that.
So, the first thing that we're gonna wanna do is, let's create
a subclass that is going to represent our cell object, all right?
So that's what we're gonna do next.
We're going to create a class that enables us to capture all
of the data associated with the cell.
So that's what we'll do next.
[MUSIC]
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2018 Coursera Inc. Todos los derechos reservados.
