0
1
00:00:00,570 --> 00:00:06,900
Now, in the last lesson, we created our table view and populated it with three hardcoded items for our
1

2
00:00:06,900 --> 00:00:08,050
to-do list.
2

3
00:00:08,070 --> 00:00:16,050
Now, in this lesson, I want to be able to select each of these cells and have it printed in my debug console,
3

4
00:00:16,530 --> 00:00:22,880
and then I want to be able to give it a checkmark every time I click on each cell, and then uncheck it
4

5
00:00:22,920 --> 00:00:24,720
if I click it again.
5

6
00:00:24,720 --> 00:00:31,270
So to quote this up, the first thing that we need is some TableView Delegate Methods.
6

7
00:00:31,560 --> 00:00:36,290
So as a challenge, I want you to create the TableView
7

8
00:00:36,780 --> 00:00:37,790
Delegate Methods
8

9
00:00:40,800 --> 00:00:49,920
below this pragma MARK, and it's going to be the one that gets fired whenever we click on any cell in
9

10
00:00:49,920 --> 00:00:50,580
the table view.
10

11
00:00:50,590 --> 00:00:52,960
Now, you've used this method before,
11

12
00:00:52,980 --> 00:00:58,250
so either have a look back or have a quick Google and see if you can work it out.
12

13
00:00:58,260 --> 00:01:03,320
So pause the video and complete the challenge.
13

14
00:01:03,440 --> 00:01:06,590
Okay, so do you remember what the method was called?
14

15
00:01:06,650 --> 00:01:13,130
So, as with all TableView Delegate and data source methods, the easiest way is just to start writing table
15

16
00:01:13,130 --> 00:01:16,240
view and see what autosuggest comes up with,
16

17
00:01:16,560 --> 00:01:21,800
and the one that we want is didSelectRowAt IndexPath.
17

18
00:01:21,800 --> 00:01:28,690
And as you can see, it tells the delegate, which is this current class, that the specified row is now selected.
18

19
00:01:28,680 --> 00:01:30,260
So that's exactly what we want,
19

20
00:01:30,260 --> 00:01:31,070
right?
20

21
00:01:31,100 --> 00:01:34,020
So let's go ahead and delete that code placeholder.
21

22
00:01:34,220 --> 00:01:41,100
And we're going to print the indexPath.row.
22

23
00:01:41,330 --> 00:01:45,700
So this is going to print a number into the debug console
23

24
00:01:45,860 --> 00:01:47,950
when we select one of the cells.
24

25
00:01:47,990 --> 00:01:52,220
And that number's going to correspond to which cell we selected.
25

26
00:01:52,310 --> 00:01:54,290
So let's give it a go.
26

27
00:01:55,130 --> 00:02:02,670
Okay, so let's try the first one. So I get 0, 1, 2.
27

28
00:02:02,750 --> 00:02:04,620
So that's working pretty well.
28

29
00:02:04,700 --> 00:02:13,700
Now, the next thing I want to do is what if instead of printing out the row, I want to printout the corresponding
29

30
00:02:13,790 --> 00:02:15,440
item in the item array.
30

31
00:02:15,650 --> 00:02:18,010
So pause a video and see if you can do that.
31

32
00:02:20,820 --> 00:02:29,490
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

33
00:02:29,490 --> 00:02:29,820
2.
33

34
00:02:32,600 --> 00:02:32,930
Great.
34

35
00:02:32,930 --> 00:02:35,240
So that's working perfectly.
35

36
00:02:35,240 --> 00:02:40,340
Now, there's one thing that I don't really like about the user interface and it's the fact that whenever
36

37
00:02:40,340 --> 00:02:47,180
I select it, it always highlights the cell in gray, and it doesn't look like how a normal to-do list would
37

38
00:02:47,180 --> 00:02:47,760
function.
38

39
00:02:47,780 --> 00:02:51,980
It would maybe flash gray, and then it would disappear and go back to white.
39

40
00:02:52,220 --> 00:03:02,840
So we can achieve that by simply writing tableView.deselectRow at indexPath which is the current
40

41
00:03:02,840 --> 00:03:05,010
indexPath, animated:
41

42
00:03:05,210 --> 00:03:05,890
true.
42

43
00:03:06,230 --> 00:03:09,850
So, now you'll see the behavior looks a little bit different.
43

44
00:03:09,890 --> 00:03:17,420
So, now when I select it, it flashes gray briefly, but then it goes back to being deselected and goes back
44

45
00:03:17,420 --> 00:03:22,540
to being white which looks a lot nicer in terms of user interface.
45

46
00:03:22,700 --> 00:03:31,190
So the next thing we want to achieve is I want to have a checkmark next to the cells which I have selected.
46

47
00:03:31,910 --> 00:03:38,840
And in order to do that, we're going to use something called an accessory.
47

48
00:03:38,870 --> 00:03:44,780
So if you go to your Main.storyboard and you select your prototype cell, not the Content View, but the
48

49
00:03:44,840 --> 00:03:46,130
actual cell,
49

50
00:03:46,250 --> 00:03:51,680
then in the Attribute Inspector, you've got this property called accessory, and it's by default set to
50

51
00:03:51,680 --> 00:03:55,480
none. But you can see that there's a whole bunch of different things you can have,
51

52
00:03:55,490 --> 00:04:01,670
you can have a Disclosure Indicator which indicates to people that if you select this cell, it'll take
52

53
00:04:01,670 --> 00:04:05,520
you somewhere else, or a detail disclosure,
53

54
00:04:05,540 --> 00:04:14,030
so it has a little info button, or in our case, what we want is the Checkmark which ticks off the item
54

55
00:04:14,090 --> 00:04:15,620
that we have selected.
55

56
00:04:15,680 --> 00:04:19,850
So let's send it back to none, so that they're not selected by default
56

57
00:04:19,880 --> 00:04:28,760
when we run our app. And let's add a method inside our didSelectRow at IndexPath method, so that we give
57

58
00:04:28,760 --> 00:04:33,070
the cell that was selected a checkmark as an accessory.
58

59
00:04:33,230 --> 00:04:40,740
So let's comment out our print statement and use what we've done here in order to add a checkmark.
59

60
00:04:40,790 --> 00:04:50,240
So let's select the tableView.cellForRow at IndexPath, and this is grabbing a reference to the
60

61
00:04:50,240 --> 00:04:53,560
cell that is at a particular index path.
61

62
00:04:53,750 --> 00:04:58,920
Now, which index path are we going to specify? Well, obviously, the one that's currently selected.
62

63
00:04:59,030 --> 00:05:02,420
So that's the local variable here called IndexPath.
63

64
00:05:02,570 --> 00:05:14,050
So the cell at this index path in our tableView is going to have an accessoryType of .checkmark.
64

65
00:05:14,310 --> 00:05:20,870
And now if we run our app, you'll see that every time I select a cell, it gets a checkmark.
65

66
00:05:20,940 --> 00:05:24,300
But we haven't added any code to remove the checkmark.
66

67
00:05:24,450 --> 00:05:31,500
So when I selected again, it doesn't change anything because all we're saying is add a checkmark whenever
67

68
00:05:31,500 --> 00:05:38,730
a cell get selected. And if it gets selected more than once, then we don't have any way of deselecting the
68

69
00:05:38,730 --> 00:05:39,410
cell.
69

70
00:05:39,420 --> 00:05:44,560
So how can we remove the checkmark when it's already been selected?
70

71
00:05:44,640 --> 00:05:49,080
So if you want to think about this problem and figure it out ,then this is a good point to pause the
71

72
00:05:49,080 --> 00:05:51,670
video because I'm going to show you the solution.
72

73
00:05:51,750 --> 00:05:55,430
So what we need is a conditional, we need an if statement.
73

74
00:05:55,680 --> 00:06:04,770
We need to say that if the tableView's current cell at the current selected indexPath already has
74

75
00:06:04,770 --> 00:06:07,820
an accessory that is a checkmark.
75

76
00:06:07,890 --> 00:06:09,850
So if we copy that here,
76

77
00:06:10,440 --> 00:06:16,710
But instead of having the single equals which is the assignment, we have two equals which is checking,
77

78
00:06:16,710 --> 00:06:22,230
so check to see if the current cell that selected has an accessoryType of checkmark.
78

79
00:06:22,650 --> 00:06:29,210
And if so, then we want to change it to none.
79

80
00:06:29,730 --> 00:06:38,340
But otherwise, if it doesn't have a checkmark, then we want to say add a checkmark. So we can now safely
80

81
00:06:38,340 --> 00:06:44,070
delete this line of code. And let's run our app to see if that worked.
81

82
00:06:44,370 --> 00:06:50,520
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

83
00:06:50,520 --> 00:06:51,780
disappears.
83

84
00:06:51,780 --> 00:06:55,140
So it's all looking pretty good, right?
84

85
00:06:55,380 --> 00:07:03,480
So, now we've added on TableView Delegate Method that detects which row was selected, and we use that
85

86
00:07:03,480 --> 00:07:08,670
information to check to see if the selected row has a checkmark already,
86

87
00:07:08,670 --> 00:07:15,770
and if it does, then we're going to change its accessory to none to remove the checkmark, otherwise, i.e.,
87

88
00:07:15,780 --> 00:07:21,230
if it doesn't have a checkmark and we selected it, then it's going to have the checkmark accessory.
88

89
00:07:21,480 --> 00:07:29,680
So at this point, we've got a very, very simple, but barely functioning to-do list app. In the next lesson,
89

90
00:07:29,730 --> 00:07:36,390
we're going to add some more functionality to our app, so that instead of just having hardcoded items,
90

91
00:07:36,810 --> 00:07:41,620
we can actually add new items to our to-do list.
91

92
00:07:41,670 --> 00:07:45,300
So all of that and more in the next lesson, I'll see you there.