Now, in the last lesson, we created our table view and populated it with three hardcoded items for our 1
to-do list. 2
Now, in this lesson, I want to be able to select each of these cells and have it printed in my debug console, 3
and then I want to be able to give it a checkmark every time I click on each cell, and then uncheck it 4
if I click it again. 5
So to quote this up, the first thing that we need is some TableView Delegate Methods. 6
So as a challenge, I want you to create the TableView 7
Delegate Methods 8
below this pragma MARK, and it's going to be the one that gets fired whenever we click on any cell in 9
the table view. 10
Now, you've used this method before, 11
so either have a look back or have a quick Google and see if you can work it out. 12
So pause the video and complete the challenge. 13
Okay, so do you remember what the method was called? 14
So, as with all TableView Delegate and data source methods, the easiest way is just to start writing table 15
view and see what autosuggest comes up with, 16
and the one that we want is didSelectRowAt IndexPath. 17
And as you can see, it tells the delegate, which is this current class, that the specified row is now selected. 18
So that's exactly what we want, 19
right? 20
So let's go ahead and delete that code placeholder. 21
And we're going to print the indexPath.row. 22
So this is going to print a number into the debug console 23
when we select one of the cells. 24
And that number's going to correspond to which cell we selected. 25
So let's give it a go. 26
Okay, so let's try the first one. So I get 0, 1, 2. 27
So that's working pretty well. 28
Now, the next thing I want to do is what if instead of printing out the row, I want to printout the corresponding 29
item in the item array. 30
So pause a video and see if you can do that. 31
So all you have to do is to add item array in front, and then we're going to select the one at 0, 1, or 32
2. 33
Great. 34
So that's working perfectly. 35
Now, there's one thing that I don't really like about the user interface and it's the fact that whenever 36
I select it, it always highlights the cell in gray, and it doesn't look like how a normal to-do list would 37
function. 38
It would maybe flash gray, and then it would disappear and go back to white. 39
So we can achieve that by simply writing tableView.deselectRow at indexPath which is the current 40
indexPath, animated: 41
true. 42
So, now you'll see the behavior looks a little bit different. 43
So, now when I select it, it flashes gray briefly, but then it goes back to being deselected and goes back 44
to being white which looks a lot nicer in terms of user interface. 45
So the next thing we want to achieve is I want to have a checkmark next to the cells which I have selected. 46
And in order to do that, we're going to use something called an accessory. 47
So if you go to your Main.storyboard and you select your prototype cell, not the Content View, but the 48
actual cell, 49
then in the Attribute Inspector, you've got this property called accessory, and it's by default set to 50
none. But you can see that there's a whole bunch of different things you can have, 51
you can have a Disclosure Indicator which indicates to people that if you select this cell, it'll take 52
you somewhere else, or a detail disclosure, 53
so it has a little info button, or in our case, what we want is the Checkmark which ticks off the item 54
that we have selected. 55
So let's send it back to none, so that they're not selected by default 56
when we run our app. And let's add a method inside our didSelectRow at IndexPath method, so that we give 57
the cell that was selected a checkmark as an accessory. 58
So let's comment out our print statement and use what we've done here in order to add a checkmark. 59
So let's select the tableView.cellForRow at IndexPath, and this is grabbing a reference to the 60
cell that is at a particular index path. 61
Now, which index path are we going to specify? Well, obviously, the one that's currently selected. 62
So that's the local variable here called IndexPath. 63
So the cell at this index path in our tableView is going to have an accessoryType of .checkmark. 64
And now if we run our app, you'll see that every time I select a cell, it gets a checkmark. 65
But we haven't added any code to remove the checkmark. 66
So when I selected again, it doesn't change anything because all we're saying is add a checkmark whenever 67
a cell get selected. And if it gets selected more than once, then we don't have any way of deselecting the 68
cell. 69
So how can we remove the checkmark when it's already been selected? 70
So if you want to think about this problem and figure it out ,then this is a good point to pause the 71
video because I'm going to show you the solution. 72
So what we need is a conditional, we need an if statement. 73
We need to say that if the tableView's current cell at the current selected indexPath already has 74
an accessory that is a checkmark. 75
So if we copy that here, 76
But instead of having the single equals which is the assignment, we have two equals which is checking, 77
so check to see if the current cell that selected has an accessoryType of checkmark. 78
And if so, then we want to change it to none. 79
But otherwise, if it doesn't have a checkmark, then we want to say add a checkmark. So we can now safely 80
delete this line of code. And let's run our app to see if that worked. 81
Okay. So now if I click on one of them, I get a checkmark. And if I click on it again, then my checkmark 82
disappears. 83
So it's all looking pretty good, right? 84
So, now we've added on TableView Delegate Method that detects which row was selected, and we use that 85
information to check to see if the selected row has a checkmark already, 86
and if it does, then we're going to change its accessory to none to remove the checkmark, otherwise, i.e., 87
if it doesn't have a checkmark and we selected it, then it's going to have the checkmark accessory. 88
So at this point, we've got a very, very simple, but barely functioning to-do list app. In the next lesson, 89
we're going to add some more functionality to our app, so that instead of just having hardcoded items, 90
we can actually add new items to our to-do list. 91
So all of that and more in the next lesson, I'll see you there.