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.
Case Study: To Do List Part 3
Loading...
Из курса от партнера University of California, Irvine
Best Practices for iOS User Interface Design
179 оценки
Explore Related Videos
At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you
University of California, Irvine
179 оценки
Курс 3 из 6 — Specialization iOS Development for Creative Entrepreneurs
Из урока
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.
Познакомьтесь с преподавателями
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner at Gradient
[MUSIC]
All right, as we roll along here in this case study bit to do manager,
what we've seen so far is that we've laid out the story board,
we sub class the different views.
We've created our core data entity and
we have passed our manage object context down through each one of our
view controllers and view hierarchy and we leveraged a protocol in order to do that.
We saw in that process that we used the prepareForSegue method call,
which is called just before
the UI visualizes the transfer from one ViewController to another.
We're going to continue along this slide and what we're going to do this time in
particular is we're going to lay out some of these UI elements,
we're going to lay out the to-do element, oops, sorry, [SOUND] there you go.
We want to layout the to-do elements on the left, and
we want to layout the edit items on the right, so that we have access to those.
And along the way, we're going to go ahead and fill up our table cell view subclass
to reflect the fact that we've just added some things to which we can bind data.
All right, great, let's do that.
So we're, in this section, what we're going to do is the UI layout of the view
controller, the to do editing view controller and the view cell.
All right, great, let's go there.
Let's go to our project.
And let's start with our prototyped cell.
What I would like to add to that cell is I would like
to add labels that are going to have the title, Label.
We'll add one label that will have the title of our to do.
Roughly put it in there, all right?
And then we're going to add another label which is going to have the date.
And what I'm going to do is I'm going to move out to the edge and
now we going to do the constraints.
So here the constraints, I want this on the edge, all right,
I want this element and I want this element to be aligned Centered vertically.
And I would like this element to be centered vertically in its container.
So that'll put everything up and down correct.
Now I would like this element to be attached to the right side.
And I would like it to be
the standard distance away from the label on the right side.
So this is something that's like built in to it, almost like a additional theme.
Rather than specifying a particular distance,
I'm going to specify a standard distance semantically.
And then whatever the layout is or the standard visualization, that
distance will be left between the label on the right and the label on the left.
Okay, add that.
And then this label, I would like this label to be anchored to the right side.
We already have the constraint on the left side.
We know, that's take care of the left side and the right side.
It aligns both of these in the container and with each other.
So the last thing that we have to specify is what length we want them
to, how wide we want them to be.
When we do something here that's kind of fun, I think.
I'm going to select them both and I'm going to start.
I'm going to select nothing, then I'm going to select them both.
I'm actually select them up here.
And what I'm going to start with is I'm going to say,
I want them both to have equal widths.
I'm going to add that constraint.
And I'm going to select that constraint here.
And I'm going to come over here, and
I'm going to say, actually, I'll want that constraint so that they're not equal, but
I want one to be three times the width of the other.
And so, in order to do that,
I want one to be this about three-fourths, let's say 0.33.
Nope, I actually want it to be 0.33, you have to be careful that it actually takes.
All right, so that is going to make it so they're not 1 to 1 but 1 to 0.33.
And so now I'm going to come here and
I am going to do option command equal to lay it out in it's final state.
I will select this one and do option command equal and
lay it out in it's final state.
And you can see that they take up a distance which is
proportional to that multiplier factor that I just entered.
So this good if you want to have them a relative width and
you want them also to fill up the whole width of the container.
So it's a little bit like keeping an aspect ratio between them but
only on one dimension.
Okay, we're going to fill those in eventually with the title on the left and
the due date on the right.
And let's see, is there anything else I need to say about that?
I want that Content View there, great.
And here's our cell and our cell should all be fine.
All right, I think that's the layout we want for that.
Now what we're going to do is we're going to bind those labels to the class so
that we can have access to them, so that we can set them at the right time.
So let's see here is, let's get a little bit more space so you can see it,
so here's our to do list, we have our table cell identifier.
Here's our table view controller, which is where we want those labels to be bound.
So I'm going to select the first label and I'm going to drag it over here and
I'm going to place it here.
And I'm going to call it the ToDoTitleLabel.
And I'm going to get the second one and I'm going to control drag it over here,
I'll put it right below there.
So we've access to it and I'm going to call
it ToDoDueDateLabel, all right.
All right, good.
In this class, let's get our hierarchy up over here,
and we'll addressed these in a second.
In this class, my Table View cell,
I want to create a method that is going to allow
me to pass a to-do entity to this class, and
have the class take the elements out of that
to-do entity, and fill it in to the UI.
And so let's do that.
It's not good to getting back, but we just say, setInternalFields.
And what's going to be pass is going to be pass a to ToDoEntity.
[SOUND] So, one of the data elements, incomingToDoEntity.
Now let's just stop there and we're going to have to make it aware,
Of ToDoEntity.h, make sure that clears.
This is what we've done in the past.
There's one thing that I want to do slightly differently, though.
And that is when we set our table view cell,
we know it's being done by the table view controller.
And so the table view controller knows which row, and which group and row,
which section and row it's in.
And I want to keep track of that because that's going to enable me to access
our core data element to get the original ToDoEntity back if I don't keep track
of it locally.
So I can either do that or I can keep track of it locally, which should I do?
Let's just keep track of it locally, I think.
All right that's a little bit of a change from what I planned on doing but great.
Okay so in our header file we've specified that we have this method
that we should have implemented.
We haven't implemented it over in our implementation so let's do that.
Right, something's off.
My UI table view cell.
I should see the binding.
Why don't I see the binding?
I thought I just bound those two elements in my storyboard.
Let's come back to my storyboard.
I thought I bound them somewhere.
Let's see.
So let's right-click and see if they are bound somewhere.
They are.
They're bound, here it is.
Oh I put them in the wrong place.
Look I put them in the table view controller rather than
the table view cell.
That's a problem.
That would have messed me up.
I noticed that when I went to edit my table view cell.
So I'm going to right-click on my to do date label and
I'm going to remove that binding, and I'm going to right click on the to do label
and I'm going to remove that binding.
The code remains but the connection is removed.
I'm going to cut this from my view controller and instead I'm going to
go to my table view cell which is where should have been in the first place.
Interesting.
Okay let's go to the header for my table view.
And let's put those fields down.
All right those are properties that represent it but I haven't bound it yet so
let's actually do the binding.
Let's bind the to do title to the title.
Do it the other way.
There we go.
And bind the to do data label to the label.
Great, all right.
Now we can go to the implementation of my UI table view cell and we're going to have
access to the to do title label and the to do due date label in order to set them.
Right, my table view cell implementation.
All right.
When we an incoming to do entity,
when we want to change the presentation of our cell,
we're going to say, self.toDoTitleLabel,
is going to be equal to the incomingToDoEntity.ToDoTitle,
so this is from our core data element.
And we're going to say self.toDoDueDateLabel is going to be equal
to incomingToDoEntity.toDoDueDate.
We have to address some complexity there because we have to
format that date the way we want it to be formatted.
Let's take care of that in a second.
And then last thing we're going to do is we're going to
keep track of the entity also.
So we didn't declare this, so let's go back and declare this in our header.
Let's create a property
where we keep a strong,
non-atomic link to our to do entity and
We'll call it localToDoEntity.
Great.
We don't need the parentheses.
And we can go back to our implementation now and
we can say self.localToDoEntity = IncomingToDoIdentity.
Okay, so now I mentioned this issue about our date formatting.
The problem here with our date formatting,
because dates are represented in iOS as an abstract object,
information about the time zone and the AM PM and the hours and all that stuff.
And depending on where you are in the world,
you represent that data differently.
You might draw dates with slashes between them, you might spell out the words,
you might use commas or periods, you might interchange the month and date fields.
And so translating a date object and
abstract date time into a string is not trivial.
In order to support that, there's a class called the NSDateFormatter.
And this enables us to create dates in the format that we want.
So we're going to create an object that we can work with.
Here, we'll just keep it locally, let's get ourselves a little bit more space.
And then what I want to do is I want to tell it how we're going to format
our dates.
And what I want to do is I'm want to set the date style equal to a built-in
constant called NSDateFormatterShortStyle, that's exactly what I want.
Code completion not helping me.
All right, and then set time style
equal to the short style as well.
Let's remove that.
So now what we're doing here is we're setting the UI to the text that we want.
So rather than just taking the description, the default description,
whatever we might get from built-in to XCode, we're going to try and
format it in this NSDateFormatterShortStyle.
And we are going to ask our date formatter to give us a string from date and
we are going to use our incoming to-do date to do that.
All right, so now we have some warnings and let's see what are our warnings.
Oh.
We need to say that this is the text that we want to modify.
[INAUDIBLE] We don't want to modify the text that is proper.
And that is the text we want to modify.
Make sure all our warnings go away.
Great. Let's bring back our side panel, and
let's check out if our warnings are related to table view.
They are, so we're good to go.
All right, so what we did there is we did the layout for our table view cells here.
And oh, come back.
We did our layout for our Table View.
And then we bound those UI elements to our table view cell class that we subclassed.
And then we created some functionality so
that when we have an entity that we want to represent we can pass it to our
subclassed table cell and we can fill out the fields in our UI.
Great. So the next thing that we need to
do is we need to lay out our editing field, and our editing field,
we have to have some way of editing all the different elements of our core data
entity that we want other users to be able to edit.
So for that let's start with some labels.
I'm going to have a label for each of the different things that we're going to edit.
So there's going to be a title, there's going to be details and
there's going to be a due date.
So let's go ahead and put that down, and let's say, let's change it so
it says title and details and due date.
And let's select those and
we're going to have to just figure out how we want to lay it out.
So for starters I want to make them a little bit bigger.
I want to come over here on the font and I want to use a standard layout.
This is a little bit like CSS if you're familiar with website layout.
I'm just going to use The semantic size of Title 3.
That should be a little bit bigger, [SOUND] but not overwhelming.
That could increases the font a little bit.
[SOUND] All right.
[SOUND] And I think I put this on top [SOUND] of this place where I'm editing.
So I'm going to pop that the corner,
[SOUND] bring that one up beneath it and now in here.
Then the place that they're going to edit in the title is going to be a Text Field.
You put that in here.
And we're going to stretch that out the entire link.
And then the details is going to be a text view.
Lets put that down, and let's stretch that out, the length.
And then our Due Date, we will make with a Date Picker.
Our Date Picker will drop in here.
All right, let's have it go down to the bottom.
Bottom [INAUDIBLE] Okay.
The basic layout is fine because the details doesn't have a border.
I'm going to select all three of these,
I'm just going to give them a slight colored background.
Let's give it a very faint not white color so
we can see the editing there, I'm no graphic designer actually don't like that.
Maybe we can change the background itself to have that color because that would
look a little bit better.Let's see if we can give
the background a slightly off-white color.
[SOUND] Is that too much?
[SOUND] it's a little too much.
[SOUND] All right.
We'll pick it ourselves.
There we go.
That's nice.
And then as long as we have that,
I actually want to have a little bit of space on the side here.
We can see that it ends.
All right and now I need to go through the process of setting
up all the constraints so these elements lay out currently.
All right.
Good.
I like how that looks basically.
So let's start by anchoring our title up here in the upper left.
We're going to say that we want the distance from the top
to be standard value.
I wan the distance from the left to be minus response real
quick [SOUND] Let's add those constraints and
let's make the width the width that it is now.
Add those constraints and
I'm going to OptionCommandEqual to see if it lays out there.
Good, now our next item,
I'm going to want to have it horizontally aligned with the title.
So we're going to pick to have it the left edge, the leading edge aligned.
And I want the right side to be -10 to the right so it matches the left side.
One constraint, great.
And then the distance from here to here I
want to be the standard value, but where did that happen?
Come over here.
Nope.
There's the top and the constant I want to be a standard value.
All right, now let's do OptionCommandEqual to lay them out.
That lays out well.
OptionCommandEqual lay it out, lays out well.
All right, and now my details element,
I want to have that Be left aligned with my field here.
The image is aligned, okay and
I want the width to be the width that is now, it's fine.
[SOUND] All right and
then I want the distance.
[SOUND] There [SOUND] I want it to be standard distance from the top.
[SOUND] Let's going up here, select it.
[SOUND] And select Standard Value and Add the Constraint.
And now we're OptionCommandEqual, and see if that was enough to set it.
Great. [SOUND] That was enough to set it.
[SOUND] All right.
Now, our Details editor.
I want the leading edge to be aligned with details,
and I want the right side to be -10 from the right.
Add that constraint.
And whatever the height is, I want it to match the height of the Date Picker.
So I want those tabs equals heights.
[SOUND] All right, and I won't option control that yet
because I haven't given height to the date picker.
Let's line up our Due Date, and say I want the Due Date and
that box to have the same leading edge.
I want the distance from the Due Date to the element above it
to be the standard value.
And that should be enough for the Due Date layout, shouldn't it?
No, not yet.
All right, and then my datepicker,
I would like my datepicker to be leading edge line with my due date.
So everything that leads you that you line.
I will do the right side to be -10 and
I would like the top to be standard value.
And I would like the bottom to be zero.
Now if I lay out my picker with It's good.
I lay out the Due Date with OptionCommandEqual.
It's good.
I lay out the details on OptionCommandEqual It did not goo good.
It's too high Did I set the details between the top of here?
Let's see, I want the top of that.
And I want this.
Let's see, Details Top.
So I need to find the place where Oh, maybe I didn't set it.
Okay, what I would like is I would like this to be a standard distance from
the top element.
Standard distance from the element above it.
Add that constraint.
All right, now if my OptionCommandEqual it good,
and then OptionCommandEqual we called the date picker, good.
And, along the way, command equal due date,
object let me pull the details view, details okay great.
So now option command equals is my friend and
I have nice layout that I'm happy with for my to-do element.
Alright, so now, that's the two things we want to do, we want to layout our
to-do list, we want to layout our to-do element, and we should be able to run it,
and if all goes well, let's check what our warnings are,
make sure our warnings that are associated with the table.
Which it is, which is great.
So now, if we run it we should see
the things that we have created in our simulator.
Add the plus button.
We have a nice segway into our pickers.
Everything looks good.
We'll go back to our to do list.
Okay.
Great. So that's what we wanted to handle in
this video.
We did it.
Part three. We laid out the to do
Editing View Controller, that the details view.
And then layout the TableViewCells.
While on our waiting, we getting this up working.
The main thing the main thing that we have to do now is we have to do some clean-up
work, and we have to connect the core data to the functionality.
A lot but that should be easy.
All right, stay tuned. [MUSIC]
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2019 Все права защищены.
