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 1
Loading...
Do curso por University of California, Irvine
Best Practices for iOS User Interface Design
179 classificações
University of California, Irvine
179 classificações
Curso 3 de 6 em Specialization Desenvolvimento móvel em iOS para Empreendedores Criativos
Na lição
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.
Conheça os instrutores
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner at Gradient
[MUSIC]
All right, it's time to take a look at some more code.
What we'd like to do in this lecture is to walk you through the process of building
a table view demo.
And do it kinda from the ground up to give you an opportunity to see how all
the pieces fit together.
Because sometimes, sometimes you see tutorials on the Internet for
connecting for example core data all the way to a UI table.
And that's great,
we'll probably have you do that in one of our peer review assignments.
But before we do that it's important that you look at how this works
in a more simple level so
that you can understand the moving pieces before you try and build a larger system.
So we want to do that.
Table View is a way to show a list of data and it appears all over the place.
We've touched base on this before.
It does it compactly and it does it efficiently.
You can show millions of lines of data.
All right, you can have a way of representing millions of lines of data
very efficiently if you use table view well.
When you implement a table view, you have to have some code
that provides functionality as both a delegate and
a datasource, so there's two different bits that you have to write code for.
The delegate, the code that implements the delegate work
is going to implement the interface UITableViewDelegate.
And the class that implements the datasource is going to implement
the UITableViewDataSource interface.
So the UITableViewDelegate and the UITableViewDataSource.
Now, often this can be the same class, but it doesn't necessarily have to be.
And what this means,
is that your class has to have functions in it that iOS expects to be there.
So that when a user interacts with a table
you can tell iOS how you want it to represent your data.
How you want it to present your data.
And it's broken into delegate and datasource.
So in the delegate functions, they provide information for laying out the table for
what the row height should be based on the data that you have.
What the row indentation should be and
it responds to, it does what you want if the user selects rows.
On the other hand, the data source does the work of configuring the Table View.
It provides the cell for a given row,
meaning it's gonna construct a cell that contains the data for a given row.
It's gonna tell the iOS how many sections there are so like in,
if you look at a contact book there will be sections for
different letters of the alphabet and so your data source delegate is
responsible for telling iOS how many sections there are.
How many sections?
How many?
Actually that's backwards.
Not how many sections per row, but how many rows per section there should be.
You provide the title of the title, the title of the Table View to iOS and
you provide the title for the sections.
For example, letters of the alphabet for splitting up your context into groups.
That data source is also responsible for inserting or deleting table rows and
the reason why that's important is because when the user does some action that would
add things to the table, the data source is responsible for
making sure that that gets recorded and
whatever the data structure is it's keeping track of the data.
And finally, the data source is responsible for
modifying the backing data store if the user reorders elements of the table.
So the idea is that iOS is handling the touches and the taps and
the movement of elements, but
it's relying on the datasource to keep all the data somewhere wherever you wanna keep
it, whether it's in a local in memory data structure like an array or
in something more sophisticated like a core data backing store.
All right.
So let's build it.
We're going to build a table view, to which we can add data.
We're going to have it backed by an array, and we're going to animate the insertions.
But we're going to do it step by step.
And it's gonna take, we're gonna go through a few steps in order to get there.
So the first thing that we're gonna do is we're gonna construct our interface.
Okay, so I'm starting with a clean single-view application.
I did not include core data in this.
And what I'm gonna do is I'm gonna create the interface that we wanna work with.
I'm gonna start on my main storyboard and
to this storyboard I want to add a text field.
We're gonna use this text field as a place to enter new elements into our table.
Go ahead and place it up here in the upper left.
And then I'm going to add a button which is going to be the add button
that's gonna instruct iOS to add the additional item.
So go ahead and put add in there, and I'm gonna stretch this out so
you can put the new data in.
And let's see, and let's just add the constraints that will keep it on the upper
left, and in relationship to that Add button.
So let's zero from the top.
Zero from the left.
Give it eight from the element on the right.
Looks good. Got those constraints.
And then the Add button, we'll put in the upper right.
So, we'll make it 20 from the top and zero from the right
and that should be okay, add those constraints and
then we're going to control-drag from the text view to the button and
we're gonna center them vertically.
And we're gonna do option-control equal to reassign these frames and
see how they come out.
Right, so that Option control equal is the same thing as selecting an element.
And then coming here,
resolving auto layout issues, and selecting update frames.
So if I select that, editor, resolve auto layout issues, update frames.
What that does is it redraws this current frame
with the constraints that I have indicated to make sure that I get what I want.
All right, so that looks good.
The next thing that I'm going to add is I'm going to add a button that tells the,
that's gonna, we're gonna implement that's gonna sort the content.
We're not gonna use this right away, but, we'll put it here for now.
We'll make this the sort button and
we're going to have this constrained on the top,
and on the left, and on the right.
We'll add those constraints.
And we'll option command equal to make sure it's laid out okay.
It looks good.
Okay, so if that's how we're gonna add elements to our table,
we actually need a table into which we're going to add this information.
So let's create a table view and let's put it out here.
And we're gonna anchor this down on the bottom and the left and the right.
And we'll have it fill up most of the rest of the screen.
And we will assign it boundaries on all the different sides.
And we'll add those for
constraints, and option command equals to make sure it looks okay.
And let's just run it in our simulator to make sure everything's laying out
the way we expect it to go.
Okay, look's pretty good.
I had game center running, let's go ahead and close that out.
Okay, when I closed it out it stopped running.
Let's go back to our simulator.
Actually move it over so we see it on the screen.
Close our Game Center and News and Reminders and Wallet and
Photos and Health and Calendar and Maps and our previous demos.
All out of there, okay great.
All right, so we like the way that that was laid out, that was perfect.
And so great.
So now we need to think about what our next step is going to be.
[MUSIC]
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2019 Coursera Inc. Todos os direitos reservados.
