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