1 00:00:00,450 --> 00:00:01,200 Welcome back. 2 00:00:01,200 --> 00:00:03,690 Table view are actually quite complicated. 3 00:00:03,690 --> 00:00:08,550 They do a lot of different things and they benefit from so many different outlets. 4 00:00:08,640 --> 00:00:14,460 So to get us started I'm actually going to show you how to use a table view controller which minimizes 5 00:00:14,460 --> 00:00:20,430 the amount of code I have to program and that allows me to show you the visual aspects of a table view 6 00:00:20,520 --> 00:00:21,000 easier. 7 00:00:21,450 --> 00:00:26,370 So let's going to export an index score I'm going to start a new application. 8 00:00:26,370 --> 00:00:29,760 It is off to type single view as usually it is. 9 00:00:29,760 --> 00:00:38,940 And I'm gonna call this one table view controller table view controller app and then once that's safe 10 00:00:39,060 --> 00:00:43,860 I'm going to head into my application and go to the storyboard and in this story but I don't want to 11 00:00:43,860 --> 00:00:46,950 have the normal regular view controller. 12 00:00:46,950 --> 00:00:48,090 I want to delete that. 13 00:00:48,150 --> 00:00:53,460 Instead I want to have a table view controller which is this guy up here. 14 00:00:53,460 --> 00:00:59,520 And if you show it with the text because he has called a table view controller so what a table of your 15 00:00:59,520 --> 00:01:06,270 countries is it especially kind of view controller that built into it has a table view that is that 16 00:01:06,270 --> 00:01:13,290 object in here a table view and then between the table view it has a set which is called a table view 17 00:01:13,290 --> 00:01:17,160 set and we'll get to see how to build these things on our own. 18 00:01:17,190 --> 00:01:18,230 Really really soon. 19 00:01:18,240 --> 00:01:23,490 But for now because I want to speed up the process we're going to use a table view controller that built 20 00:01:23,490 --> 00:01:26,280 into it has the table view and the set. 21 00:01:26,280 --> 00:01:32,040 So the first thing I have to do in here I have to select my table view controller and say it is my initial 22 00:01:32,040 --> 00:01:37,800 view controller so select not appear I'm going to say it is the initial view controller. 23 00:01:37,870 --> 00:01:44,040 So the little arrow here shows up and shows me that when the applauds we will see this view controller 24 00:01:44,260 --> 00:01:44,890 now. 25 00:01:45,180 --> 00:01:50,610 The next thing I have to do is I have to assign a class for this table view controller and if I go up 26 00:01:50,610 --> 00:01:57,420 there in the classes it says you have to give me a class of the type you a table view controller and 27 00:01:57,420 --> 00:01:59,130 that's something I still don't have. 28 00:01:59,130 --> 00:02:04,890 So let's go ahead in here I'm going to delete the view controller because we don't need that anymore. 29 00:02:04,890 --> 00:02:11,680 We don't have a view controller anyway and I'm going to stay command and make a new fighter. 30 00:02:11,730 --> 00:02:17,780 It's a quote each class and this type is UI table view controller. 31 00:02:17,790 --> 00:02:28,360 I'm going to call it my table view controller next when I save it created and now we have a new table 32 00:02:28,360 --> 00:02:34,690 view controller class that they can go to my storyboard and introduce it as the class for my table view 33 00:02:34,690 --> 00:02:41,090 controller outlet someone going here and say it's class is my table view controller. 34 00:02:41,200 --> 00:02:45,940 Now the next thing I want to do is I want to go into the table if you to and explain to you what these 35 00:02:45,940 --> 00:02:46,980 different things are. 36 00:02:46,990 --> 00:02:51,920 There is so much code in here already and most of it we don't just need yet. 37 00:02:51,970 --> 00:02:59,640 So the teacher they do need all these and they get rid of all the comments I don't need a view did Lord. 38 00:02:59,760 --> 00:03:05,970 So I'm going to get rid of that there's is a method here that decides about the number of the sections 39 00:03:06,000 --> 00:03:07,100 in my table view. 40 00:03:07,110 --> 00:03:10,860 That's an optional one because the default value for it is 1. 41 00:03:10,890 --> 00:03:12,540 So I'm going to get rid of that as well. 42 00:03:14,200 --> 00:03:19,120 There is a function here called number of rows in section. 43 00:03:19,120 --> 00:03:22,210 That's actually an important one that we have to maintain. 44 00:03:22,450 --> 00:03:24,630 So I'm gonna keep that one and we'll talk about it. 45 00:03:24,630 --> 00:03:26,650 Wait it's gonna do for us. 46 00:03:26,650 --> 00:03:31,720 Then there is another function here called the cell left for a row at. 47 00:03:31,720 --> 00:03:33,070 That's a very important one. 48 00:03:33,070 --> 00:03:36,510 We have to maintain it someone on comment it. 49 00:03:37,230 --> 00:03:41,380 And that's almost all we have to do for this very first example. 50 00:03:41,440 --> 00:03:42,790 Everything else can go. 51 00:03:42,820 --> 00:03:44,860 So I'm going to delete everybody else. 52 00:03:45,070 --> 00:03:49,840 We really get back to them at some point and I will show you what do they mean and where do we use them. 53 00:03:49,840 --> 00:03:52,620 But for now let's simplify our process. 54 00:03:52,660 --> 00:03:55,120 These are the two functions I keep. 55 00:03:55,210 --> 00:03:57,440 One of them says how many rows. 56 00:03:57,460 --> 00:03:59,210 Do you have in this table view. 57 00:03:59,380 --> 00:04:05,460 The other one says so what are you going to show me in this different rows for each row. 58 00:04:05,470 --> 00:04:08,020 What is the cell that you want to see. 59 00:04:08,020 --> 00:04:11,550 So let's go back in here to what storyboard in the storyboard. 60 00:04:11,560 --> 00:04:17,050 I only have one prototype said let's see what our cells actually have. 61 00:04:17,110 --> 00:04:22,780 I want to change two things in here as we go through the lessons we'll get to know more about these 62 00:04:22,960 --> 00:04:24,580 details on set things in here. 63 00:04:24,600 --> 00:04:27,880 But for now the only two things I want to change are these. 64 00:04:27,880 --> 00:04:32,530 One of them is I want to change the style of this safe table view a cell. 65 00:04:32,530 --> 00:04:33,820 I want to make it basic. 66 00:04:33,820 --> 00:04:36,990 That shows me a title in there that I can change. 67 00:04:37,100 --> 00:04:41,610 And I also like give it an identifier which is something that we must to do. 68 00:04:41,650 --> 00:04:47,710 So I'm going to give an identifier called Cell I.D. you can call it essentially anything as long as 69 00:04:47,800 --> 00:04:49,470 you remember it later on. 70 00:04:49,480 --> 00:04:55,990 The reason there needs to be an identifier is because these are prototype cells and you may not necessarily 71 00:04:55,990 --> 00:04:58,210 have only one type of them. 72 00:04:58,210 --> 00:05:01,950 Imagine you're developing an app similar to a Twitter application. 73 00:05:01,990 --> 00:05:03,310 Some of your cells. 74 00:05:03,310 --> 00:05:06,790 They have images and that the text and the tweet. 75 00:05:06,790 --> 00:05:09,650 Some of your cells they only have the tweet. 76 00:05:09,670 --> 00:05:16,000 So these are two different types of cells but they're all living inside the same table view. 77 00:05:16,030 --> 00:05:20,070 So because of that you have to name your cells or prototype cells. 78 00:05:20,230 --> 00:05:21,350 If you have only one. 79 00:05:21,370 --> 00:05:22,800 It doesn't matter what you call it. 80 00:05:22,810 --> 00:05:28,300 I'm going to call it Cell I.D. but if you have more than one then you have to properly name them to 81 00:05:28,330 --> 00:05:29,190 whatever you need them. 82 00:05:30,100 --> 00:05:34,240 So let's go back to our view controller or table view controller. 83 00:05:34,750 --> 00:05:36,900 And in here I have to decide the mod Hall. 84 00:05:36,910 --> 00:05:42,250 My cell is going I look like so we could do a lot of different set things in here but they want to go 85 00:05:42,400 --> 00:05:44,930 really slow and I want to go one step at a time. 86 00:05:44,980 --> 00:05:50,080 The first thing I'm going to do is I'm going to say the number of the rows in this section of this table 87 00:05:50,080 --> 00:05:51,470 view is five. 88 00:05:51,470 --> 00:05:53,160 So there are five rows. 89 00:05:53,350 --> 00:05:59,650 Then in this cell for each of these rows how that cell is going to look like I'm going to say make a 90 00:05:59,650 --> 00:06:00,230 cell. 91 00:06:00,310 --> 00:06:07,660 This is the cueing the reusable cell with identifier that is called The Cell I.D. because that's the 92 00:06:07,660 --> 00:06:11,260 identifier I made myself in my a storyboard. 93 00:06:11,260 --> 00:06:17,710 If you remember hearing this storyboard that cell is as essentially called on and selected again it's 94 00:06:17,710 --> 00:06:19,710 called The Cell I.D.. 95 00:06:19,780 --> 00:06:21,310 So that's one thing. 96 00:06:21,310 --> 00:06:24,790 So I have this set I found this cell for each of the rows. 97 00:06:24,910 --> 00:06:31,750 And the only thing I'm going to do for this starting point I'm going to say Sen. Dodd bygone color becomes 98 00:06:31,750 --> 00:06:34,500 you eye color dark red. 99 00:06:34,510 --> 00:06:42,160 So all that should happen is that we have to see a table view with five cells that each cell is essentially 100 00:06:42,250 --> 00:06:42,890 red. 101 00:06:43,090 --> 00:06:45,370 And if that works it means you're on the right track. 102 00:06:45,520 --> 00:06:47,080 And that's exactly what happened. 103 00:06:47,080 --> 00:06:48,730 We have five cells. 104 00:06:48,730 --> 00:06:51,090 Each cell has a default title. 105 00:06:51,250 --> 00:06:53,470 And then there is a little separator between them. 106 00:06:53,470 --> 00:06:58,260 I don't know if you can't see them in here but you definitely can't see them on your own simulators. 107 00:06:58,300 --> 00:07:04,300 So now that we managed to have five says let's go ahead and have them a little bit more organized and 108 00:07:04,300 --> 00:07:06,940 a better way of doing things essentially. 109 00:07:07,070 --> 00:07:13,370 Going to come up here in my class and I'm going to go ahead and say I have a let let's call it set his 110 00:07:13,960 --> 00:07:29,110 array which is going to be Vancouver New York real New Delhi and Washington if that's how you say it 111 00:07:29,140 --> 00:07:36,900 I'm hoping so then I'm going to say for the table views the number of heroes are actually citizenry 112 00:07:37,920 --> 00:07:44,960 does count and then I'm going to go ahead and say I want to see each of these names somebody in the 113 00:07:44,960 --> 00:07:45,750 set. 114 00:07:45,770 --> 00:07:52,850 Now the default says they have a text label built into them simply because we can see that little thing 115 00:07:52,850 --> 00:07:55,900 that says title so I could actually use that. 116 00:07:55,910 --> 00:08:02,050 I'm going to go ahead and say Sell dot text label obviously that say you a label. 117 00:08:02,060 --> 00:08:10,130 As it says in here you own label dot text the value of it is City's array and I have to find the right 118 00:08:10,220 --> 00:08:16,220 index from my array and the index pretty much depends on the location of the cell. 119 00:08:16,220 --> 00:08:21,920 So for instance if the cell is here in the very first one we have to find Vancouver the second one we 120 00:08:21,920 --> 00:08:23,030 have to find new york. 121 00:08:23,240 --> 00:08:26,120 So we have to find the varied this cell is. 122 00:08:26,330 --> 00:08:33,350 And those information are here within an index part an index part is essentially a type of value that 123 00:08:33,350 --> 00:08:42,080 provides us the location of a cell in terms of both the location in the role which are or is it. 124 00:08:42,080 --> 00:08:48,590 Currently this is rule one or two or three or four or five as well as of each section it is. 125 00:08:48,590 --> 00:08:52,490 I currently only have one section so they're all on Section Zero. 126 00:08:52,610 --> 00:08:57,760 But if you had more than that and you will see that in the future then index it will know that you are 127 00:08:57,760 --> 00:08:59,360 in a different section. 128 00:08:59,360 --> 00:09:04,650 So for now I'm going to say citizenry index part doctor. 129 00:09:05,810 --> 00:09:13,310 So I'm going to say find a value from the city's array based on the role of the cell you are trying 130 00:09:13,310 --> 00:09:17,580 to produce and place it in the label of that cell. 131 00:09:17,780 --> 00:09:22,490 Let's go ahead and run this application and see if we get that if it all works we should be able to 132 00:09:22,490 --> 00:09:28,820 see are the names of the five cities appear on five different sounds and it's happening exactly the 133 00:09:28,820 --> 00:09:35,150 way we were hoping it will happen now I want to do one more test in here really quickly let me fix that 134 00:09:35,180 --> 00:09:41,390 there's a little space before the name of the real I want to do this I want to say every cell not background 135 00:09:41,390 --> 00:09:46,590 color becomes UI color dot on light gray. 136 00:09:46,940 --> 00:09:56,250 So that's one thing they all become light gray if index paths dot roll modulus two is zero. 137 00:09:56,300 --> 00:10:06,170 So essentially that even numbers do this cell that background color becomes you eye color to white. 138 00:10:06,170 --> 00:10:10,480 So essentially I'm saying that even colors make them white. 139 00:10:10,530 --> 00:10:13,280 Yeah all the numbers make them light gray. 140 00:10:13,310 --> 00:10:18,710 You could of course write them if else but I find this an easier way to set everyone to something and 141 00:10:18,710 --> 00:10:20,360 then change the others. 142 00:10:20,360 --> 00:10:23,840 Now let's go ahead and run the application again. 143 00:10:23,980 --> 00:10:26,140 So what's the application load this time. 144 00:10:26,140 --> 00:10:32,690 Now we have all the cells some cells are being shown in a white back on some in a light gray back on 145 00:10:32,710 --> 00:10:34,850 which is exactly what you were hoping for. 146 00:10:35,200 --> 00:10:37,990 Let's quickly recap everything we did in this lesson. 147 00:10:37,990 --> 00:10:41,050 This was an introduction to a table view controller. 148 00:10:41,050 --> 00:10:45,400 We made a table to view controller in the storyboard for its prototype cell. 149 00:10:45,400 --> 00:10:50,930 If we made sure that it has an I.D. and identifying and features a set and a state for it. 150 00:10:50,950 --> 00:10:57,310 Put this side to be basic and then we went into our table view controller class and we said we need 151 00:10:57,310 --> 00:11:04,600 only two functions number of rows in section and sell for row at index spot for the number of rows. 152 00:11:04,630 --> 00:11:08,150 We said they are there as many as we have objects in our array. 153 00:11:08,380 --> 00:11:15,430 And for the Center for right index math we introduce a new value called cell which is of the type cell 154 00:11:15,430 --> 00:11:19,310 I.D. and then we customize it's different you know attributes. 155 00:11:19,330 --> 00:11:23,010 We gave it a text label changes make on color. 156 00:11:23,080 --> 00:11:27,400 The only thing that might be a little bit difficult is this one method. 157 00:11:27,400 --> 00:11:30,590 What is the Q reusable cell. 158 00:11:30,640 --> 00:11:38,110 So these cells in here essentially are called reusable simply because if they go outside the screen 159 00:11:38,230 --> 00:11:41,500 they get reallocated to the bottom of the table view. 160 00:11:41,500 --> 00:11:47,200 And if you're scrolling in the opposite direction if they go outside at the bottom of the screen they 161 00:11:47,200 --> 00:11:51,060 get reallocated to be used somewhere on top of the table view. 162 00:11:51,100 --> 00:11:59,470 This is all a table view deep cues or gets rid of its different cells and is able to use the reusable 163 00:11:59,470 --> 00:12:04,110 says veto out having to allocate so many many cents. 164 00:12:04,180 --> 00:12:10,090 In other words if you had this array to be every city on the planet that would be hundreds of thousands 165 00:12:10,090 --> 00:12:16,040 of defend you know entries in the array but your table view would only show you a handful of them that 166 00:12:16,080 --> 00:12:22,210 the amount that can actually fit within this table view a screen and the rest of them wouldn't allocate 167 00:12:22,300 --> 00:12:28,300 unless they're being viewed you can try to make a table of you using a school view on your own you can 168 00:12:28,300 --> 00:12:34,660 add a label continuously to a scroll view and you will see that as soon as you had a few thousand cells 169 00:12:34,780 --> 00:12:39,940 it actually tries to slow down and perhaps it's going to even crash your application simply because 170 00:12:39,980 --> 00:12:46,830 is going to maintain all of them in its memory which is not a very good idea but table views they manage 171 00:12:46,850 --> 00:12:51,940 that they simplify that process and that's the power of them and the advantage of them. 172 00:12:52,000 --> 00:12:58,930 So that's about how to use a basic table view controller let's keep it up to here and move on to our 173 00:12:58,930 --> 00:12:59,490 next lesson.