1 00:00:05,030 --> 00:00:06,230 You know what's up everyone. 2 00:00:06,230 --> 00:00:11,570 Mark Price you're at DEF slopes dot com and we're going to continue on in our coater swag application 3 00:00:11,600 --> 00:00:12,620 and we've made great progress. 4 00:00:12,620 --> 00:00:18,140 We've built a table view with images and titles and now what we want to do is we want to build the rest 5 00:00:18,140 --> 00:00:22,370 of the app where you click one of the categories and then it takes you into another view controller 6 00:00:22,880 --> 00:00:26,500 that shows a list of products for that specific category. 7 00:00:26,510 --> 00:00:33,080 So the first thing first is let's just do the user interface and open up my object library to close 8 00:00:33,080 --> 00:00:35,220 out the left hand side here. 9 00:00:35,330 --> 00:00:41,230 And I'm going to rearrange some things so we can see what it looks like on the mockup right here. 10 00:00:41,780 --> 00:00:46,080 So it looks somewhat like this. 11 00:00:46,080 --> 00:00:51,520 And notice how the items are there's two items in each row. 12 00:00:51,520 --> 00:00:53,230 One two one two one two. 13 00:00:53,230 --> 00:00:56,460 This cannot be achieved properly with a table. 14 00:00:56,460 --> 00:01:00,350 Use what we need to use is a collection view and so in Iowa. 15 00:01:00,430 --> 00:01:04,330 When you're working with groups of data you either can work with a table view or a collection view and 16 00:01:04,330 --> 00:01:07,310 the differences table you can only go up and down. 17 00:01:07,330 --> 00:01:12,480 OK and it has a list of items like a table OK a collection view. 18 00:01:12,630 --> 00:01:13,130 OK. 19 00:01:13,150 --> 00:01:17,200 It can go horizontally or vertically so you can swipe from left to right or up and down. 20 00:01:17,200 --> 00:01:20,410 It can have one item in a row that can have multiple items in a row. 21 00:01:20,460 --> 00:01:22,000 It's much more flexible. 22 00:01:22,000 --> 00:01:27,040 And so some examples of collection of views are like on the iPhone app photos where you're actually 23 00:01:27,040 --> 00:01:31,620 looking through your collections are your memories and you can see a group of photos in a grid. 24 00:01:31,630 --> 00:01:34,090 So collection view is a great choice for that. 25 00:01:34,210 --> 00:01:37,810 If you're just going to do straight line items one after the other use a table view. 26 00:01:38,170 --> 00:01:41,810 So let's go ahead and create a new View Controller drag it onto the screen. 27 00:01:42,130 --> 00:01:44,180 We're going to move it over a little bit here. 28 00:01:44,200 --> 00:01:44,530 All right. 29 00:01:44,530 --> 00:01:49,480 And it's white completely white and so we need to do to get it to connect to our navigation controller 30 00:01:49,870 --> 00:01:51,960 is simply create a Segway. 31 00:01:51,970 --> 00:01:57,100 So with this view controller select the coater SWAK I'm going to control drag from this icon over here 32 00:01:57,100 --> 00:02:01,450 on the left hand side over to The View Controller and we're going to create a Segway and it's going 33 00:02:01,450 --> 00:02:03,170 to be show. 34 00:02:03,220 --> 00:02:09,700 So just by putting the Segway on here it has now embedded this controller in the chain of navigation 35 00:02:09,880 --> 00:02:11,150 the navigation controller. 36 00:02:11,360 --> 00:02:12,160 OK. 37 00:02:12,310 --> 00:02:15,390 And so it's already saying hey this is going to go back to the main coater swag page. 38 00:02:15,390 --> 00:02:20,170 It will change the color of this and everything here shortly in the title when we're actually coating 39 00:02:21,030 --> 00:02:21,590 what we can change. 40 00:02:21,590 --> 00:02:28,180 Cornell let's go to our let's go back to our main view controller or navigation controller here and 41 00:02:28,660 --> 00:02:33,140 click the navigation bar and then you're going to scroll down you can see this thing called tint. 42 00:02:33,340 --> 00:02:41,110 Just change the tint here at the bottom to white and then when you go back OK click around it to update 43 00:02:41,120 --> 00:02:43,520 there is no way so perfect. 44 00:02:43,540 --> 00:02:43,840 All right. 45 00:02:43,840 --> 00:02:49,100 And then on the title I'm sure there's a title here if we click this. 46 00:02:49,380 --> 00:02:54,480 Actually it's not showing up on here which is ok will change in code anyway which is what we have to 47 00:02:54,480 --> 00:02:54,630 do. 48 00:02:54,630 --> 00:02:56,940 So this looks good. 49 00:02:57,330 --> 00:02:59,340 Let's go ahead and make it look like the image. 50 00:02:59,350 --> 00:03:02,120 There's a there's a b label right there. 51 00:03:02,130 --> 00:03:05,440 OK so let's look at what we have here is kind of similar thing here. 52 00:03:05,450 --> 00:03:09,900 Set up shop by category. 53 00:03:11,000 --> 00:03:15,210 You know our designer I think left the same text on there and both these shot by category which doesn't 54 00:03:15,210 --> 00:03:15,830 make sense. 55 00:03:15,840 --> 00:03:19,410 So what we'll do here is we'll call this products. 56 00:03:19,480 --> 00:03:21,450 It's all going to copy this label. 57 00:03:21,520 --> 00:03:24,300 Let's look let's first look at how high it is from the top. 58 00:03:24,300 --> 00:03:25,770 It is 30 from the top. 59 00:03:25,770 --> 00:03:32,790 So what I'm going to do is command C to copy and then over here I'm going to command V to paste and 60 00:03:32,850 --> 00:03:34,380 I'm going to set some constraints on it. 61 00:03:34,380 --> 00:03:38,380 We're going to say 30 from the top and zero from the left margin. 62 00:03:38,420 --> 00:03:39,060 OK. 63 00:03:39,510 --> 00:03:41,940 And that's good. 64 00:03:41,940 --> 00:03:44,540 Let's give it a fixed height as well. 65 00:03:45,770 --> 00:03:51,030 And get a fixed with because we'll just make sure all the corners are accounted for here. 66 00:03:51,110 --> 00:03:52,190 Cool shot by category. 67 00:03:52,190 --> 00:03:57,000 The next thing we want to do is just put our collection V on here and that's the simplest typing in 68 00:03:57,020 --> 00:04:01,850 collection view in the object library and dragging it in over here. 69 00:04:01,850 --> 00:04:05,990 And I want to do something similar I to make sure it's the proper distance from the shot by category 70 00:04:05,990 --> 00:04:10,880 so I'm clicking the table view on the previous view controller and click the ruler over here. 71 00:04:10,910 --> 00:04:17,050 And we know it's it's approximately 16 16 pixels from the shot by category. 72 00:04:17,150 --> 00:04:20,570 And so over here on our collection view let's bring it up. 73 00:04:20,580 --> 00:04:26,330 And what I want to do is are the exact same thing so 16 from the top zero from the left margin analyses 74 00:04:26,720 --> 00:04:28,310 are not the margin margins are turned off. 75 00:04:28,300 --> 00:04:34,660 So you're from the left you're from the right or is your from the bottom it's now fully expanded. 76 00:04:34,980 --> 00:04:35,320 Cool. 77 00:04:35,340 --> 00:04:36,920 And this is shot by category. 78 00:04:37,200 --> 00:04:43,930 Let's just call this products. 79 00:04:44,890 --> 00:04:49,030 Now what's interesting is this is just like the Table of you we dragged a tape of you on and there's 80 00:04:49,030 --> 00:04:50,170 this little icon here. 81 00:04:50,290 --> 00:04:50,560 OK. 82 00:04:50,560 --> 00:04:56,690 Now with the with the table view we had to drag the collection view cell onto the table. 83 00:04:56,740 --> 00:04:59,170 The prototype here with the collection view. 84 00:04:59,170 --> 00:05:00,230 It's already in there. 85 00:05:00,300 --> 00:05:04,150 So all we have to do is drag it out make a little bit bigger here. 86 00:05:04,290 --> 00:05:04,800 OK. 87 00:05:04,870 --> 00:05:06,630 I'm just eyeballing it a little bit. 88 00:05:06,670 --> 00:05:10,360 So remember we're trying to make it look like the image and it looks like it's a rectangle of some kind. 89 00:05:10,360 --> 00:05:13,570 So it's definitely taller than it is wider. 90 00:05:13,750 --> 00:05:17,770 And we need to fit two on here so just eyeballing it a little bit. 91 00:05:17,800 --> 00:05:20,530 That's too much 92 00:05:23,570 --> 00:05:27,000 go right about there and we can change this if we need to. 93 00:05:27,080 --> 00:05:30,420 OK so I'm just eyeballing it here and we know we're going to need an image. 94 00:05:30,620 --> 00:05:32,450 Let's drag an image view on here. 95 00:05:36,420 --> 00:05:39,590 Like so and like so. 96 00:05:39,750 --> 00:05:41,510 And I want this to be a square. 97 00:05:41,930 --> 00:05:47,940 So let's go to the ruler and the width has to say the same so the height is going to be 178 to match 98 00:05:47,940 --> 00:05:48,950 the width. 99 00:05:49,560 --> 00:05:56,140 And let's go ahead and pin it from the top left and the right and give it a fixed height of 178. 100 00:05:56,460 --> 00:05:57,390 Perfect. 101 00:05:57,390 --> 00:06:02,220 Now what I want to do is put a label here because you know the depth slopes logo graphic T-shirt. 102 00:06:02,260 --> 00:06:05,010 We need to have what what the title is of the product. 103 00:06:05,150 --> 00:06:11,550 So let's put a label in and I'm just going to move it over a little bit. 104 00:06:11,640 --> 00:06:17,220 It's not going to be on the the guidelines here and I'm going to move it down like so we're going to 105 00:06:17,220 --> 00:06:23,040 change the text here when you change it from system to custom. 106 00:06:23,040 --> 00:06:26,120 And we're going to do Avenir. 107 00:06:26,650 --> 00:06:33,030 And I think the book is fine and I'll leave that sighs for now. 108 00:06:33,090 --> 00:06:40,620 And we're going to type in depth slopes logo graphic tee shirt just to make sure it fits on two lines 109 00:06:40,650 --> 00:06:46,530 which it doesn't because it's only one line high so on the lines here click that to two def soap's logo 110 00:06:46,530 --> 00:06:47,370 graphic t shirt. 111 00:06:47,370 --> 00:06:49,560 Now the whole word graphic is supposed to be on there. 112 00:06:49,570 --> 00:06:54,760 So let's reduce the font until it fits like so yeah. 113 00:06:54,990 --> 00:07:00,270 And instead of black it's more of a dark gray font so I'm going to change the font to it dark and it's 114 00:07:00,270 --> 00:07:01,000 not dark enough. 115 00:07:01,010 --> 00:07:02,800 Let's make it a little bit darker. 116 00:07:05,550 --> 00:07:11,900 Right about there aka dove slopes logo graphic T-shirt. 117 00:07:12,010 --> 00:07:16,060 And the last thing is it needs a price someone make this a little bit taller and then I'm just going 118 00:07:16,060 --> 00:07:17,680 to copy this here. 119 00:07:17,700 --> 00:07:22,550 It's a command to duplicate and drag it down a little bit. 120 00:07:22,690 --> 00:07:24,270 It's change the price in here. 121 00:07:24,680 --> 00:07:25,990 2005 like so 122 00:07:29,000 --> 00:07:30,180 with this label selected. 123 00:07:30,200 --> 00:07:31,880 I'm going make it a little bit smaller. 124 00:07:32,000 --> 00:07:33,620 We don't need to as big as the other one. 125 00:07:33,860 --> 00:07:38,480 And then I'm going to change this from two lines back to one. 126 00:07:38,540 --> 00:07:38,920 Yeah. 127 00:07:38,930 --> 00:07:43,160 And the fun this is a little bit lighter so let's change this one to the dark gray color and see if 128 00:07:43,910 --> 00:07:45,710 that makes it a little bit lighter. 129 00:07:45,710 --> 00:07:48,760 It does yeah. 130 00:07:49,340 --> 00:07:49,620 OK. 131 00:07:49,640 --> 00:07:51,670 I'm liking this so this is looking good here. 132 00:07:51,950 --> 00:07:53,480 Good enough. 133 00:07:53,480 --> 00:08:00,770 And let's go ahead and pin these guys now so let's pan the steps slopes label here. 134 00:08:00,870 --> 00:08:05,510 Let's pin nine from the top and we'll say yeah one from the left and one from the right is fine in this 135 00:08:05,510 --> 00:08:09,220 case let's say 0 to the margins that works. 136 00:08:09,230 --> 00:08:11,860 And then let's give it a fixed height 48. 137 00:08:12,050 --> 00:08:13,190 And these are just arbitrary numbers. 138 00:08:13,190 --> 00:08:14,040 It just looks good. 139 00:08:14,120 --> 00:08:15,550 And I like how it looks. 140 00:08:15,690 --> 00:08:17,950 And so notice how cesspits is six from the top. 141 00:08:17,970 --> 00:08:21,850 It's saying that because it's overlapping our label here. 142 00:08:21,860 --> 00:08:27,620 So when you just need to bring it down a little bit and bring this up now. 143 00:08:27,620 --> 00:08:29,380 And I'm going to go ahead and pin it up now. 144 00:08:29,570 --> 00:08:29,770 OK. 145 00:08:29,780 --> 00:08:30,310 So good. 146 00:08:30,470 --> 00:08:38,000 Five lemons say three from the top and let's say let's turn on the margins here and this is zero from 147 00:08:38,000 --> 00:08:40,390 the left margin zero from the right margin. 148 00:08:40,460 --> 00:08:45,820 And in this case we'll just pin it to the bottom here as well to say five from the bottom that's good 149 00:08:50,150 --> 00:08:51,490 so these look like their pen. 150 00:08:51,500 --> 00:08:53,990 I don't have any red lines yelling at me or anything. 151 00:08:53,990 --> 00:09:00,870 So it's like the image of you know let's just put a product on here to do a shirt so shirt 0 1 and 2 152 00:09:00,920 --> 00:09:01,980 aspect fit. 153 00:09:02,060 --> 00:09:05,150 And the reason why you want to do aspect fit is because when you're selling a product you don't want 154 00:09:05,150 --> 00:09:09,620 to cut off the image so even aspect film might not be what you want because it could cut off the image 155 00:09:09,620 --> 00:09:11,100 we want aspect fit. 156 00:09:11,460 --> 00:09:12,020 OK. 157 00:09:12,320 --> 00:09:15,180 So it's kind of looking like the image but we've got white here. 158 00:09:15,230 --> 00:09:20,100 When I said this should be this great color and also the background here is also this great color. 159 00:09:20,120 --> 00:09:27,420 So let's open up our handy dandy digital color meter and it's 2:43 2:43 2:43. 160 00:09:27,450 --> 00:09:35,680 That's easy so we're going to do this on the main view let's change the background to 2:43 to 43. 161 00:09:35,840 --> 00:09:39,730 Forty three to 43 and to 43. 162 00:09:40,180 --> 00:09:41,660 So we've changed that. 163 00:09:41,660 --> 00:09:45,370 And then what we want to do is change the background of the cell itself. 164 00:09:45,530 --> 00:09:50,170 So the collection view cell let's change this background to that same color. 165 00:09:50,330 --> 00:09:56,240 So when you use the recently used colors and then on the collection view let's set that background color 166 00:09:56,270 --> 00:10:01,030 as well to to that same recently use color. 167 00:10:01,040 --> 00:10:04,050 And then what will happen is it'll look just like the image here. 168 00:10:05,030 --> 00:10:06,910 OK this is looking really nice. 169 00:10:09,000 --> 00:10:13,260 So we've got our our image here and our label and our price. 170 00:10:13,380 --> 00:10:19,920 And I think the next thing to do is just quickly create a actual collection of B-cell with Iby outlets 171 00:10:19,950 --> 00:10:24,180 and we'll connect them and then we'll call this video done and get all the UI hooked up here so we can 172 00:10:24,180 --> 00:10:32,370 open up the navigator here and in the view folder I'm going to create a new file Cocco touch class and 173 00:10:32,690 --> 00:10:37,850 it's a subclass of UI collection of useful and we're going to call this product cell 174 00:10:40,680 --> 00:10:44,300 and click Create perfect. 175 00:10:44,460 --> 00:10:52,470 And let's just create some outlets and outlet and we're going to say we are and this is going to be 176 00:10:52,470 --> 00:10:53,820 the there's three items right. 177 00:10:53,810 --> 00:11:00,920 So there's the image name so image name of type string or not image name image view. 178 00:11:01,020 --> 00:11:06,260 This would be the product image of type you image. 179 00:11:06,270 --> 00:11:07,170 There you go. 180 00:11:07,480 --> 00:11:15,160 And the other ones we've got to label so this one is going to be product title type label. 181 00:11:15,660 --> 00:11:22,200 And at the outlet we have our product price of type I label. 182 00:11:22,500 --> 00:11:23,730 There we go. 183 00:11:24,480 --> 00:11:31,000 Let's go back to our story board and go over to the new controller here. 184 00:11:31,210 --> 00:11:32,590 Could you control our icon here. 185 00:11:32,590 --> 00:11:41,030 The orange icon go to the identity inspector and let's change the class to a product Oops wrong one 186 00:11:41,840 --> 00:11:44,930 not the view control or the cells what we want to change. 187 00:11:44,930 --> 00:11:47,220 My bad collection and view cell right here. 188 00:11:47,480 --> 00:11:49,590 Let's change that to the product cell. 189 00:11:50,920 --> 00:11:56,440 So now if the DO is right click the product cell and you're going to see your new outlets here. 190 00:11:56,440 --> 00:11:58,830 So product image is dragged here. 191 00:11:59,140 --> 00:12:04,450 Product price drag it to the price one and product title drag it to the title. 192 00:12:04,450 --> 00:12:05,590 And those are now connected. 193 00:12:05,700 --> 00:12:06,340 And this looks good. 194 00:12:06,340 --> 00:12:12,140 So if we run the app nothing is going to happen really it's just emptiness. 195 00:12:12,280 --> 00:12:13,750 We can't even get to the screen yet. 196 00:12:14,030 --> 00:12:18,730 But we made progress we built out the we've designed a custom UI collection view cell just like we did 197 00:12:18,730 --> 00:12:22,450 with the table view so we said I'd be outlet's on it and we're ready to start writing some code. 198 00:12:22,450 --> 00:12:23,540 So that's it for now. 199 00:12:23,710 --> 00:12:25,980 Let's move on to Ford more price at depth slopes. 200 00:12:26,000 --> 00:12:26,560 Dot.com. 201 00:12:26,560 --> 00:12:27,580 See you soon.