1 00:00:00,900 --> 00:00:01,980 Welcome back again. 2 00:00:01,980 --> 00:00:07,920 In this lesson we look at how to implement a table view within a single view application. 3 00:00:07,950 --> 00:00:11,840 So essentially seek out the use of table view controller. 4 00:00:11,850 --> 00:00:16,920 This should give us a little bit of a better sense of how a table view actually works. 5 00:00:16,920 --> 00:00:21,240 So let's going to explode and yet I'm going to start a new application. 6 00:00:21,240 --> 00:00:27,780 I'm going to call it my table view in single view. 7 00:00:27,870 --> 00:00:33,470 So that's my table view in a single view application on what I head into this storyboard and my storyboard. 8 00:00:33,480 --> 00:00:40,980 I'm going to have to make a table view which is essentially this guy in yet another table view controller 9 00:00:41,210 --> 00:00:46,800 is just the table view part of it something and that I get table view here maybe place it somewhere 10 00:00:46,800 --> 00:00:52,980 nice and tidy like that and then actually want to add one more function to this table view which is 11 00:00:52,980 --> 00:00:56,630 when I type on a cell I want to know which cell we have selected. 12 00:00:56,820 --> 00:01:03,150 So to do that I'm actually going to go ahead and add a label in here that tells me which type or which 13 00:01:03,150 --> 00:01:10,590 cell I have top 10 I'm going to add the labor going here and say let's change some of the settings in 14 00:01:10,590 --> 00:01:14,430 here and I'm going to set all the constraints for all of these guys. 15 00:01:14,430 --> 00:01:21,450 I'm going to say this is a type a space a leading space a trailing a space. 16 00:01:21,450 --> 00:01:23,390 It always has the same height. 17 00:01:23,430 --> 00:01:31,560 My table view has a vertical spacing as the leading spacing has a trailing spacing and has a bottom 18 00:01:31,620 --> 00:01:35,510 spacing so so far I have a labor and I have a table view. 19 00:01:35,520 --> 00:01:41,790 Now if you recall from the last listen table of use they also need to have a prototype cell of it in 20 00:01:41,790 --> 00:01:42,030 them. 21 00:01:42,360 --> 00:01:47,550 So I'm going to go in here the outlets and I'm going to add a table view cell. 22 00:01:47,970 --> 00:01:49,290 My dragnet over there. 23 00:01:49,800 --> 00:01:55,160 So now they have the cell in here I'm going to go ahead select this cell and again give it an idea. 24 00:01:55,170 --> 00:02:00,540 Just like the last time I'm going to say this is called Cell I.D. or a gain any name that you want to 25 00:02:00,540 --> 00:02:01,590 give it. 26 00:02:01,590 --> 00:02:05,280 And then what you need to do is you need to change the style of your cell. 27 00:02:05,310 --> 00:02:07,710 I'm going to make it basic once again. 28 00:02:07,710 --> 00:02:09,450 So it's only a titan. 29 00:02:09,960 --> 00:02:16,340 I'm also going to make one more really no small change in here I'm going to select my table view cohere 30 00:02:16,500 --> 00:02:25,280 in the dimensions and say my raw height is not automatic which essentially means it is not inferred 31 00:02:25,290 --> 00:02:29,100 from their programming values or the default values. 32 00:02:29,310 --> 00:02:34,750 So when I actually manually change the raw height to be maybe 64. 33 00:02:34,920 --> 00:02:38,270 So is a bit of a taller role for each of them. 34 00:02:38,280 --> 00:02:43,800 The second thing I want to change is I want to select my table view and going here in these attributes 35 00:02:44,150 --> 00:02:50,160 and there is a little line that you might be able to see that separates every two says I want to go 36 00:02:50,160 --> 00:02:59,760 ahead in here and say My separator is a single line and that single line is actually this color a bluish 37 00:02:59,760 --> 00:03:01,540 color something like that. 38 00:03:01,540 --> 00:03:10,020 And I want to say that the separator also has an inset which makes it 15 units from left then right 39 00:03:10,360 --> 00:03:12,600 are inset that is something like that. 40 00:03:12,600 --> 00:03:17,850 So my separator line is not covering the entire vit of the cell. 41 00:03:17,850 --> 00:03:21,480 It has a little space here on the left and there's a little space here on the right. 42 00:03:22,020 --> 00:03:23,970 So that's all I'm going to do in here. 43 00:03:23,970 --> 00:03:30,600 Now the last time where we use the UI table view controller the table view was automatically connected 44 00:03:30,600 --> 00:03:32,000 to the view controller. 45 00:03:32,010 --> 00:03:35,050 This time we actually have to introduce outlets for it. 46 00:03:35,130 --> 00:03:42,750 So I'm going to go in here select my assistant window button and go in here and say I have the label 47 00:03:42,750 --> 00:03:49,650 of course that's got my label and then I'm going to go ahead and have my table view. 48 00:03:49,650 --> 00:03:53,350 So that's going to become my table view. 49 00:03:53,430 --> 00:03:58,580 So now I have both of these outlets there in my programming side. 50 00:03:58,620 --> 00:04:00,980 I have the labor and I have my table view. 51 00:04:01,080 --> 00:04:07,380 So let's go back to the view controller and in here we have to know right the codes that he's going 52 00:04:07,380 --> 00:04:09,930 to be populating our table view. 53 00:04:09,990 --> 00:04:16,140 The first thing I have to do is I have to conform this view controller to two new delegates one of them 54 00:04:16,140 --> 00:04:25,040 is called you eye table view delegate and the other one is called you eye table view data source. 55 00:04:25,140 --> 00:04:31,770 So just like Harvey used to do it in a picture view we are making sure that this view controller provides 56 00:04:31,770 --> 00:04:38,550 the source for everything that we want to see on the table view and that is telling me you have to conform 57 00:04:38,550 --> 00:04:41,130 it and you have to use all the methods for it. 58 00:04:41,190 --> 00:04:47,070 There are only two real methods that must be here that the table view wouldn't work without them. 59 00:04:47,070 --> 00:04:52,110 One of them is the number of rows for us in section and the other one is the self photo rule. 60 00:04:52,110 --> 00:04:57,210 So I could actually go ahead and let him autocomplete and I'm going to write them myself so we can see 61 00:04:57,390 --> 00:04:59,180 how it works and get it going. 62 00:04:59,180 --> 00:05:03,780 Yeah at the bottom of the view that load I'm keeping the view the Droid because we still need to do 63 00:05:03,780 --> 00:05:04,670 something. 64 00:05:04,710 --> 00:05:09,960 So one of those methods is number of rows in Section. 65 00:05:09,960 --> 00:05:15,530 This is the one that we used last time and it has to return a value for now I'm going to say return 66 00:05:15,530 --> 00:05:17,980 to zero and then the other one. 67 00:05:18,030 --> 00:05:24,460 Let me get myself a little bit better a space maybe I could do this maybe a quick format. 68 00:05:24,480 --> 00:05:26,190 These are not like them like that. 69 00:05:26,190 --> 00:05:26,990 But anyway. 70 00:05:27,480 --> 00:05:34,110 So the other one is sell for raw at index path and that's the other method that must be there. 71 00:05:34,140 --> 00:05:37,100 So our table view knows how to do it. 72 00:05:37,110 --> 00:05:43,130 So for the two of these let's go ahead and say we want to repopulate the same thing as before. 73 00:05:43,140 --> 00:05:53,130 We want to show names of the cities some logo up here and say I have a list cities array to become Vancouver 74 00:05:55,140 --> 00:05:56,070 New York 75 00:05:59,160 --> 00:06:05,520 real or like that New Delhi wash. 76 00:06:05,720 --> 00:06:08,060 And that's all the cities that I want to have. 77 00:06:08,070 --> 00:06:19,630 So the number of rows in this sections be cities are a that count and in the table view sell for a role. 78 00:06:19,650 --> 00:06:22,170 You have to return a you a table. 79 00:06:22,170 --> 00:06:25,440 You said so I'm going to go ahead and say do this. 80 00:06:25,460 --> 00:06:35,330 I'm going to say let's sell the B table view DOD D Q Using identifier and the identifier was settled 81 00:06:35,380 --> 00:06:40,260 I.D. That's the identify that we made ourselves in the storyboard. 82 00:06:40,580 --> 00:06:46,730 Then I'm going to go ahead and say return said by now all the errors are going to disappear and the 83 00:06:46,730 --> 00:06:52,460 application is actually going to run but he doesn't really do anything for me and I forgot to make sure 84 00:06:52,460 --> 00:07:00,080 that this thing actually exists or I'm going to make it a forced unwrapped because I know that I have 85 00:07:00,140 --> 00:07:06,470 a self identifier still I.D. So now that all the errors are gone we actually have to customize the values 86 00:07:06,470 --> 00:07:15,700 of the cell and just like the last time I'm gonna say sell the text label that text becomes whatever 87 00:07:15,700 --> 00:07:21,150 you have in the cities are a at that index. 88 00:07:21,150 --> 00:07:25,550 So index parts index part got to roll. 89 00:07:26,370 --> 00:07:32,730 So now we have the cells showing the right values but if you run this application is not going to show 90 00:07:32,730 --> 00:07:41,690 me anything and I want you to take a moment and think about the why that would be so the reason for 91 00:07:41,690 --> 00:07:48,860 it is this my table view doesn't know that the data for it is coming from this view controller. 92 00:07:48,860 --> 00:07:52,730 It is true that we have conformed to the right data source on the right. 93 00:07:52,730 --> 00:07:59,690 Delegate but we haven't said the delegate and the data source of this particular table view to be this 94 00:07:59,690 --> 00:08:05,840 view controller so that you could do it in two ways one could go to the storyboard select third table 95 00:08:05,840 --> 00:08:13,250 view controller right over the view controller and say data source and delegates are here or you could 96 00:08:13,250 --> 00:08:24,510 go to a view controller in their view did Lord say my table view that delegate is self and my table 97 00:08:24,510 --> 00:08:28,650 view the data source is all source stuff. 98 00:08:28,860 --> 00:08:36,570 So now this particular table view ignores that it's different values they have to come from this find 99 00:08:36,690 --> 00:08:42,600 this view controller and if you're on this application now we should be able to see the same thing that 100 00:08:42,630 --> 00:08:48,240 we saw the last time except that this time of year not between a table view controller if you're rather 101 00:08:48,240 --> 00:08:54,720 within a single you eye view controller and then the application laws we can see that this is the body 102 00:08:54,720 --> 00:09:00,510 of the table view and we have the label up there obviously for each of them we have one of the values 103 00:09:00,600 --> 00:09:01,280 in our array. 104 00:09:01,830 --> 00:09:08,160 So the next thing was when I type on one of these I want to be able to see that value here on my label 105 00:09:08,290 --> 00:09:14,760 but essentially I want to know what happens when we come up on one of these can be somehow get that 106 00:09:14,760 --> 00:09:15,780 selection. 107 00:09:15,840 --> 00:09:23,960 So that has another method and that method is called Select row at index part. 108 00:09:24,150 --> 00:09:27,300 That's a very simple method that says table view. 109 00:09:27,330 --> 00:09:32,760 Did select the role if we did selected it doesn't have a return type so you can do whatever you like 110 00:09:32,760 --> 00:09:38,190 to do what they want to do is this I want to find out the index funds from the index Mark I want to 111 00:09:38,190 --> 00:09:44,730 find the name I want to find the name of that city and present it on my label so I'm going to go ahead 112 00:09:44,730 --> 00:09:55,410 and say my neighbor dot text becomes city's array the object that is an index part that's raw so wherever 113 00:09:55,410 --> 00:10:02,010 you are find that cities every object and presented on my label and if you're on the application now 114 00:10:02,040 --> 00:10:09,820 we should be able to see that when we type on any of the cells that cell appears on our label and white 115 00:10:09,870 --> 00:10:12,560 New York Vancouver Delhi real. 116 00:10:12,570 --> 00:10:14,040 So on and so forth. 117 00:10:14,190 --> 00:10:19,800 And obviously what you could do is you could actually have a separate view controller for instance that 118 00:10:19,800 --> 00:10:26,490 when you tap on this it performs a Segway and takes you to that view controller that could be another 119 00:10:26,490 --> 00:10:27,570 way of thinking about it. 120 00:10:28,140 --> 00:10:30,600 Now I want to show you two other things in here. 121 00:10:30,630 --> 00:10:32,360 Table views built into them. 122 00:10:32,370 --> 00:10:37,050 They have something called a table view header and a table of your footer. 123 00:10:37,060 --> 00:10:42,390 I could come in here and say tighten for header view in Section. 124 00:10:42,600 --> 00:10:45,100 So that's going to be a title for it. 125 00:10:45,210 --> 00:10:52,990 I'm going to say return when I say name of cities. 126 00:10:53,410 --> 00:10:59,500 And if we run the application now on top of our section which is only one section at the moment is going 127 00:10:59,510 --> 00:11:06,900 to show the name of the cities and you could similarly add a title for footer in section and instead 128 00:11:06,900 --> 00:11:11,200 of just relying on a string values you could actually use their head their view. 129 00:11:11,200 --> 00:11:15,870 So that's going to be a header view for section. 130 00:11:15,870 --> 00:11:23,280 So this would essentially instead of rendering a string with essentially render a view for you that 131 00:11:23,280 --> 00:11:28,860 you could customize it with having different objects in it or showing different values. 132 00:11:28,860 --> 00:11:35,100 So that is two different ways for displaying things on a header or a footer of a table view. 133 00:11:35,130 --> 00:11:41,610 I'm not I go through the details of this one you can simply initialize and allocate a new UI view and 134 00:11:41,610 --> 00:11:46,920 in that you I view you can have it as a label or you could have it as a UI image of you or any object 135 00:11:46,920 --> 00:11:47,620 that you want. 136 00:11:47,890 --> 00:11:56,250 So when it gets rid of that and that's just about having a table view within any view controller you 137 00:11:56,250 --> 00:12:01,890 make sure that you have your delegate and data source taking care of properly these two methods are 138 00:12:01,980 --> 00:12:09,510 a mandatory method they both have to be the number of rows and sell for row if you want to know which 139 00:12:09,510 --> 00:12:15,420 one we selected we use that did select row out and of course we can use the title for header and title 140 00:12:15,420 --> 00:12:16,280 for footer. 141 00:12:16,590 --> 00:12:19,400 Let's keep it up to here and move on to our next lesson.