1 00:00:07,980 --> 00:00:12,150 Hey everybody what's going on this is Caleb with Debb slopes dot com and in this video we're going to 2 00:00:12,150 --> 00:00:14,770 build the search cell in Interface Builder. 3 00:00:14,880 --> 00:00:18,930 We're also going to create its subclass and we're going to wire up all the Iby outlets so that we can 4 00:00:18,930 --> 00:00:21,870 work with it and configure it properly to begin. 5 00:00:21,870 --> 00:00:27,720 I want to pull open the simulator here and I want to show you what a search cell looks like in the completed 6 00:00:27,720 --> 00:00:30,050 version of the app this is the one I've already built. 7 00:00:30,060 --> 00:00:34,880 And let's go to the search section and we're going to go ahead and search for a repo here. 8 00:00:34,890 --> 00:00:38,240 So I'm going to say are x Swift. 9 00:00:38,340 --> 00:00:39,420 And there we go. 10 00:00:39,420 --> 00:00:40,560 That's what it looks like. 11 00:00:40,560 --> 00:00:43,370 Now I use the get hub logo. 12 00:00:43,380 --> 00:00:45,150 We're not going to use that in this app. 13 00:00:45,150 --> 00:00:49,680 We're not allowed to use it of course because it is a for pay company. 14 00:00:49,890 --> 00:00:55,230 So we're going to just use our search cell there because it's a search result or our search search icon. 15 00:00:55,230 --> 00:00:56,850 I mean so let's take a look. 16 00:00:56,850 --> 00:00:59,200 We have a title a description. 17 00:00:59,280 --> 00:01:06,830 We have the fork count as well as the programming language so let's go ahead and let's go set this up. 18 00:01:06,830 --> 00:01:12,330 OK let's minimize that and pull open your X code project and let's do this. 19 00:01:12,330 --> 00:01:13,700 This is so exciting. 20 00:01:13,710 --> 00:01:19,740 So basically what we're going to do is we're going to begin by dropping in a view very similarly to 21 00:01:19,740 --> 00:01:24,280 what we did in the trending feed we see. 22 00:01:24,300 --> 00:01:24,780 All right. 23 00:01:24,780 --> 00:01:28,560 And we're going to go ahead and positioned this so that it is like. 24 00:01:28,560 --> 00:01:32,690 So we're going to fill most of the cell but not all of it. 25 00:01:32,970 --> 00:01:38,150 And we're going to set the background to be our dark blue color just like that. 26 00:01:38,160 --> 00:01:43,160 Now let's go ahead and let's set some constraints here by pinning it to all four sides. 27 00:01:43,200 --> 00:01:44,030 Zero. 28 00:01:44,280 --> 00:01:45,790 So it'll stay in place. 29 00:01:45,870 --> 00:01:46,880 That looks great. 30 00:01:46,920 --> 00:01:50,010 And now let's think what do we need to do. 31 00:01:50,190 --> 00:01:54,690 We need to set up well let's look at our simulator. 32 00:01:54,780 --> 00:01:56,720 We need to set up some labels I believe. 33 00:01:56,730 --> 00:02:02,080 Yeah an image view labels the description cool. 34 00:02:02,090 --> 00:02:02,740 Let's do that. 35 00:02:02,780 --> 00:02:03,830 So let's drag on. 36 00:02:03,830 --> 00:02:07,640 AUI label like so. 37 00:02:07,870 --> 00:02:08,500 There we go. 38 00:02:08,650 --> 00:02:09,400 And you know what. 39 00:02:09,400 --> 00:02:13,680 This cell is actually starting to look a little bit too short. 40 00:02:13,690 --> 00:02:16,490 So let's go ahead and pull it down. 41 00:02:16,820 --> 00:02:21,230 And you know what that looks too big now so let's try one hundred instead of 80. 42 00:02:21,340 --> 00:02:27,600 And then the table view we've got a set to also be 100 so that the table you respect's are change. 43 00:02:27,800 --> 00:02:30,150 And let's go ahead and let's set this up. 44 00:02:30,190 --> 00:02:36,210 We're going to make this a little bigger like so we're going to change the fun to be ave next. 45 00:02:36,220 --> 00:02:43,170 Just as you may have expected let's change it to be demi bold Whoops not italic and let's set it to 46 00:02:43,170 --> 00:02:44,590 be size 20. 47 00:02:45,510 --> 00:02:53,250 Make it white and we're going to stretch it to go way out here like so then let's just call this repo 48 00:02:53,250 --> 00:03:00,390 name beautiful and I'm going to copy and paste it like so by clicking on it like this and copying and 49 00:03:00,390 --> 00:03:06,540 pasting and then beneath it I'm going to go ahead and change this down to maybe size. 50 00:03:06,570 --> 00:03:08,060 What is this 14. 51 00:03:08,160 --> 00:03:13,000 And let's change it to be medium width or I guess thickness. 52 00:03:13,170 --> 00:03:16,730 That's going to be repo description. 53 00:03:17,430 --> 00:03:17,890 OK. 54 00:03:17,910 --> 00:03:18,900 Very cool. 55 00:03:18,900 --> 00:03:21,210 Now we need to think what else are we missing. 56 00:03:21,210 --> 00:03:23,050 Let's pull open our simulator. 57 00:03:23,220 --> 00:03:27,750 We have our description and then we're going to need our forks count and our language and so you know 58 00:03:27,750 --> 00:03:33,570 what for that I'm actually going to just go ahead and select the stack view that that's from and copy 59 00:03:33,570 --> 00:03:40,900 it and then paste it to our cell just like that makes it really easy and we don't need contributors. 60 00:03:40,910 --> 00:03:42,650 We're going to go ahead and just delete that. 61 00:03:42,830 --> 00:03:45,310 And you know what let's go through and delete ones we don't need. 62 00:03:45,320 --> 00:03:50,090 I don't need that I don't need this second separator. 63 00:03:50,090 --> 00:03:52,490 Whoops that was the separator for the one above. 64 00:03:52,490 --> 00:03:54,880 Make sure you're in the right view controller. 65 00:03:54,920 --> 00:03:57,200 I don't need that separator. 66 00:03:57,350 --> 00:03:58,090 That looks pretty good. 67 00:03:58,100 --> 00:04:01,570 And you know what we also have this little view on the side here. 68 00:04:01,960 --> 00:04:03,420 OK super cool. 69 00:04:03,470 --> 00:04:09,290 So now let's just make sure that none of these are connected to the other view controller which this 70 00:04:09,290 --> 00:04:12,170 one looks fine and the language. 71 00:04:12,200 --> 00:04:14,880 Also we should check OK. 72 00:04:14,960 --> 00:04:15,830 It's good to go. 73 00:04:16,130 --> 00:04:16,670 So that's good. 74 00:04:16,670 --> 00:04:23,360 That will connect to our search cell in a little while but we need to add an R image so we need to do 75 00:04:23,420 --> 00:04:26,350 UI apps UI image view. 76 00:04:26,480 --> 00:04:28,110 Drag it on right here. 77 00:04:28,390 --> 00:04:29,150 OK. 78 00:04:29,660 --> 00:04:31,130 There we go. 79 00:04:31,130 --> 00:04:31,880 Very nice. 80 00:04:31,880 --> 00:04:37,440 Let's make it a square and let's make it Lineup exactly there. 81 00:04:37,640 --> 00:04:43,700 So it should be 68 by 68 and we can make that a little more exact this way. 82 00:04:43,700 --> 00:04:44,350 Perfect. 83 00:04:44,360 --> 00:04:45,030 OK. 84 00:04:45,240 --> 00:04:53,670 So why don't we just go ahead and fill this with our search icon large for now and then do aspect fit. 85 00:04:53,690 --> 00:04:54,340 There we go. 86 00:04:54,400 --> 00:04:55,950 Super cool. 87 00:04:56,000 --> 00:04:57,550 That looks awesome. 88 00:04:57,680 --> 00:05:00,660 And yeah let's constrain the rest of these guys. 89 00:05:00,680 --> 00:05:06,260 So let's go ahead and set this to go to the edge of that image. 90 00:05:07,130 --> 00:05:12,560 Let's constrain our image first actually from the top 10 from the right and eight from the bottom with 91 00:05:12,560 --> 00:05:16,120 a fixed width of 68 that'll do it. 92 00:05:16,340 --> 00:05:21,580 Then let's go ahead and let's set this to be 8 from the top 8 from the left from the right. 93 00:05:21,620 --> 00:05:26,690 And let's set it to have a fixed width or sorry a fixed height of 28. 94 00:05:26,820 --> 00:05:27,200 You know what. 95 00:05:27,230 --> 00:05:29,650 Let's make it 24. 96 00:05:29,660 --> 00:05:30,800 There we go. 97 00:05:31,250 --> 00:05:37,560 Then for our repo description let's go ahead and let's set that up as well. 98 00:05:37,580 --> 00:05:43,220 So it currently is 28 from the top because it's beneath our repo name label which we don't want that 99 00:05:43,700 --> 00:05:45,940 we want it to be snug right next to it. 100 00:05:45,950 --> 00:05:47,960 So go ahead and drop it down a little bit. 101 00:05:47,990 --> 00:05:52,790 And then also pull the end so that it matches where the repo name ends. 102 00:05:52,790 --> 00:06:00,600 So go ahead and let's just set this to be zero from the top 25 from the left 8 from the right. 103 00:06:00,620 --> 00:06:05,870 And let's do in two from the bottom is fine we'll give it a little bit of space. 104 00:06:05,900 --> 00:06:06,570 OK. 105 00:06:06,890 --> 00:06:07,970 Very cool. 106 00:06:08,180 --> 00:06:12,980 And last we're going to choose our stack view here which is hiding from us. 107 00:06:12,980 --> 00:06:13,650 There it is. 108 00:06:14,000 --> 00:06:19,250 And we're going to go ahead and pin this to from the top 25 from the left. 109 00:06:19,250 --> 00:06:24,080 And instead of giving it a fixed width or anything like that I'm just going to go ahead and give it 110 00:06:24,080 --> 00:06:32,300 a fixed height of 20 just like so although it's given me a problem now because I believe one of the 111 00:06:32,300 --> 00:06:37,790 height constraints carried over from when we copied it so delete that and then change the original height 112 00:06:37,790 --> 00:06:39,740 constraint to be 20. 113 00:06:39,740 --> 00:06:43,970 Basically what this is going to do is it's going to set it up so that if a long programming language 114 00:06:43,970 --> 00:06:45,800 name comes in it will be able to stretch. 115 00:06:45,830 --> 00:06:47,940 And that's why we're not giving it a fixed width. 116 00:06:48,140 --> 00:06:49,980 So this is great. 117 00:06:50,000 --> 00:06:54,350 This is in place and now we're going to go ahead and create the subclass for it. 118 00:06:54,350 --> 00:07:00,430 So go ahead and right click on view click new file and then choose Cocco touch class. 119 00:07:00,440 --> 00:07:09,590 Now it's already a subclass of your table view cell so just call it search cell and click create wonderful. 120 00:07:09,650 --> 00:07:12,620 So now that that's there go ahead and click on Main storyboard. 121 00:07:12,620 --> 00:07:18,980 Go back to your table view choose the cell and now we can go into the identity inspector and we can 122 00:07:18,980 --> 00:07:20,600 choose search cell. 123 00:07:20,990 --> 00:07:26,000 And you know what while we're at it we should set the identity as well to have a reuse identifier of 124 00:07:26,000 --> 00:07:29,000 search cell with a lower case s at the beginning. 125 00:07:29,000 --> 00:07:30,550 Very very cool. 126 00:07:30,740 --> 00:07:37,310 So now if we select the search cell we should be able to although it's not going to let us let's try 127 00:07:37,310 --> 00:07:46,910 building it let's clean it we go and build and as soon as we are done doing that we should get our cell 128 00:07:46,910 --> 00:07:51,170 to show up the way we want which is beautiful although it's going to take a while so I'm just gonna 129 00:07:51,170 --> 00:07:52,150 actually do it manually. 130 00:07:52,170 --> 00:07:53,780 We don't waste time. 131 00:07:53,790 --> 00:08:00,680 There are search cell and we can actually get rid of set selected and we can go ahead and start connecting 132 00:08:00,710 --> 00:08:01,840 our IP outlets. 133 00:08:01,850 --> 00:08:03,890 So let's go ahead and let's. 134 00:08:03,890 --> 00:08:12,380 Right click and drag from repo name to search cell and just call this repo name label. 135 00:08:12,800 --> 00:08:17,500 Right click and drag from repo description and say repo desk label. 136 00:08:17,540 --> 00:08:20,100 OK there we go our build is now finished. 137 00:08:20,120 --> 00:08:23,410 Click on the label in the stack view that's going to be fork's count. 138 00:08:23,480 --> 00:08:27,040 So let's just say fork's count label. 139 00:08:27,310 --> 00:08:29,170 This is language label 140 00:08:32,060 --> 00:08:35,930 and we're going to go ahead and leave the image you untouched for now. 141 00:08:36,140 --> 00:08:41,210 But let's go ahead and get rid of this and let's configure our cell. 142 00:08:41,690 --> 00:08:47,690 So just like you may have expected our cells are going to be accepting an instance of repo and that's 143 00:08:47,690 --> 00:08:49,130 what's going to get all of its information. 144 00:08:49,130 --> 00:08:55,640 So we're going to create a configure cell function func configure cell and we're going to pass in a 145 00:08:55,640 --> 00:08:57,660 repo of type repo. 146 00:08:58,190 --> 00:09:03,240 And now we can go ahead and type repo name label text. 147 00:09:03,380 --> 00:09:12,440 It's going to be equal to repo dot name repo description label that text is repo dot description as 148 00:09:12,440 --> 00:09:19,400 you can see this one's a little bit slimmed down forks count labeled that text is equal to repot dot 149 00:09:20,120 --> 00:09:22,740 number of forks but remember that's an integer. 150 00:09:22,760 --> 00:09:32,960 So we need to call string string and call string describing or we can just type it and then pass in 151 00:09:33,200 --> 00:09:37,600 Ribault the number of forks and it will create that into a string which is neat. 152 00:09:38,180 --> 00:09:40,390 What else we have language label. 153 00:09:40,700 --> 00:09:44,470 Whoops sorry calling the wrong stuff here. 154 00:09:44,540 --> 00:09:52,210 Language label text equals Ribault language. 155 00:09:52,370 --> 00:09:55,700 And now our cell is all configured with all the data we need. 156 00:09:55,700 --> 00:09:57,050 That is when we call that. 157 00:09:57,200 --> 00:10:02,060 But when we select a cell we're going to have it load the repository. 158 00:10:02,060 --> 00:10:07,220 So I'm going to create a variable that's going to hold the value of that Ribault you or else so go ahead 159 00:10:07,220 --> 00:10:11,860 and type private var Ribault your l of type string. 160 00:10:12,620 --> 00:10:16,460 And go ahead and make it optional because we have not yet instantiated it. 161 00:10:16,590 --> 00:10:19,330 But now go ahead and instantiate it. 162 00:10:19,420 --> 00:10:22,290 So you are all equals repo. 163 00:10:22,440 --> 00:10:23,730 You are l. 164 00:10:24,140 --> 00:10:25,270 Now it's good to go. 165 00:10:25,580 --> 00:10:33,000 So this is awesome but we're going to go ahead and just use awake from nib to round the corners of this 166 00:10:33,000 --> 00:10:39,050 cell and you know what we actually can't do that until we right click and drag from this view and set 167 00:10:39,050 --> 00:10:42,650 it to be back to you like so. 168 00:10:42,860 --> 00:10:49,820 OK so now that we can access that we can call back view dot layered dot corner radius and set it to 169 00:10:49,820 --> 00:10:51,760 be 15. 170 00:10:51,770 --> 00:10:52,920 Very cool. 171 00:10:52,970 --> 00:10:55,690 That should do exactly as we're hoping. 172 00:10:55,790 --> 00:10:58,930 And now our search cell subclass is good to go. 173 00:10:58,940 --> 00:11:05,120 We are ready to start searching in our table view and showing results. 174 00:11:05,120 --> 00:11:06,170 This is amazing. 175 00:11:06,170 --> 00:11:11,750 So let's go ahead and let's move on to the next video where we're going to set up the search the seas 176 00:11:11,930 --> 00:11:17,750 table view to actually show results and make API calls using our ICs Swift it's going to be amazing. 177 00:11:17,750 --> 00:11:20,520 So let's head over there and let's get started right now.