1 00:00:08,160 --> 00:00:13,140 Hey guys what's going on this is Caleb with Dev slopes and in this video we're going to build the UI 2 00:00:13,230 --> 00:00:18,600 of our app and we're also going to create some custom view subclasses to make it look really nice and 3 00:00:18,600 --> 00:00:19,130 pretty. 4 00:00:19,320 --> 00:00:24,990 So go ahead and pull open your X code project just like you might have expected. 5 00:00:25,020 --> 00:00:31,100 And basically what we're going to do is we're going to start by dragging in a UI view. 6 00:00:31,200 --> 00:00:35,640 First of course make sure that you're in main but storyboard blah blah blah you probably know that already 7 00:00:36,420 --> 00:00:43,060 but once you're in there we're going to start by dragging on a UI view just like so. 8 00:00:43,140 --> 00:00:49,410 Go ahead and pull the corners down so that it fits the entire frame of the View Controller and then 9 00:00:49,410 --> 00:00:52,800 click the constraints button or the pin button rather. 10 00:00:53,010 --> 00:00:59,400 And we're going to pin it zero from the top right bottom and left so that it stays exactly on the screen 11 00:00:59,400 --> 00:01:02,010 and it stays exactly the size of the screen. 12 00:01:02,010 --> 00:01:08,210 Click Add for constraints and this is going to be the view that houses our camera view. 13 00:01:08,430 --> 00:01:13,320 If you think about when you go into your camera if you recorded video records the entire frame of the 14 00:01:13,320 --> 00:01:16,680 screen that's going to be basically what our app will do. 15 00:01:16,680 --> 00:01:21,600 So that's that very cool camera view is in place and you know what I'm going to add some other views 16 00:01:21,600 --> 00:01:22,340 on top of this. 17 00:01:22,350 --> 00:01:25,610 So to let us see it easier. 18 00:01:25,610 --> 00:01:30,540 I'm just going to change the color for now to kind of this green color so that we can see the other 19 00:01:30,540 --> 00:01:32,820 views that I drop on on top of it. 20 00:01:33,110 --> 00:01:33,340 OK. 21 00:01:33,360 --> 00:01:38,270 So now that use in place go ahead and drag on another view here. 22 00:01:38,420 --> 00:01:39,550 And that looks good. 23 00:01:39,560 --> 00:01:45,760 And we're going to go ahead and pull this so that it is about that wide. 24 00:01:45,780 --> 00:01:47,550 You see how it snaps there on those lines. 25 00:01:47,550 --> 00:01:48,510 That's good. 26 00:01:48,780 --> 00:01:53,050 And I'm going to make it about 60 points tall. 27 00:01:53,280 --> 00:01:53,640 Yeah. 28 00:01:53,790 --> 00:01:54,270 That looks good. 29 00:01:54,270 --> 00:01:59,400 Let's go ahead and click the pin button and we're going to actually pin this 20 from the left 20 from 30 00:01:59,400 --> 00:02:00,210 the right. 31 00:02:00,360 --> 00:02:02,310 And let's do 30 from the top. 32 00:02:02,310 --> 00:02:05,110 Just to put it a little bit below the status bar. 33 00:02:05,460 --> 00:02:10,130 I'm going to give it a fixed height of 60 and add four constraints. 34 00:02:10,140 --> 00:02:10,370 All right. 35 00:02:10,380 --> 00:02:11,370 That looks pretty good. 36 00:02:11,520 --> 00:02:15,630 That's in place next to what do we need to do. 37 00:02:15,630 --> 00:02:20,280 We're going to go ahead and we're going to add a button. 38 00:02:20,310 --> 00:02:21,090 That's right. 39 00:02:21,360 --> 00:02:27,210 Because in our app we're going to be able to turn on and off the flash at will and that's that's exactly 40 00:02:27,210 --> 00:02:28,370 what we need to do. 41 00:02:28,380 --> 00:02:31,010 So let's go ahead and put this here. 42 00:02:31,140 --> 00:02:36,670 We're going to go ahead and pin this just like we did with the view up top We're going to pin it 20 43 00:02:36,840 --> 00:02:37,600 from the left. 44 00:02:37,620 --> 00:02:40,920 We're also going to pin it 20 from the bottom. 45 00:02:40,950 --> 00:02:41,450 OK. 46 00:02:41,820 --> 00:02:43,920 And don't give it a size constraint yet. 47 00:02:43,950 --> 00:02:48,930 Just go ahead and add those two constraints and now we're going to do is we're going to change this 48 00:02:48,930 --> 00:02:54,430 font or not the font but the text rather to say flash off. 49 00:02:54,440 --> 00:02:59,220 That will be the default setting so we can go ahead and just have it say off when we first launched 50 00:02:59,220 --> 00:02:59,550 the app. 51 00:02:59,550 --> 00:03:00,670 That's fine. 52 00:03:00,690 --> 00:03:04,190 We're going to change the font because the system font is just ugly. 53 00:03:04,230 --> 00:03:07,290 Change it to Avenir next that's the font that I really like. 54 00:03:07,440 --> 00:03:10,710 If you've seen any of my other courses you know that I love Avenir next. 55 00:03:10,830 --> 00:03:14,000 And go ahead and set it to be Demy bold so we can see it. 56 00:03:14,040 --> 00:03:22,020 Nice and clear and blue is not a great color for what we're doing so I think we should set it to be. 57 00:03:22,320 --> 00:03:23,350 Yeah I really like. 58 00:03:23,400 --> 00:03:25,140 Well no I don't like that. 59 00:03:25,140 --> 00:03:26,390 What would be a better color. 60 00:03:26,730 --> 00:03:28,090 Let's do the slopes red. 61 00:03:28,110 --> 00:03:31,870 If you're wondering slopes red is the 8 4 7 1 e. 62 00:03:31,890 --> 00:03:34,190 That's the hexadecimal value. 63 00:03:34,200 --> 00:03:40,710 So with that set go ahead and scroll down in the attributes and Specter and we're going to get this 64 00:03:40,710 --> 00:03:46,260 button a white background and then we're going to stretch it out a little bit so that there's a little 65 00:03:46,260 --> 00:03:48,430 bit of cushioning on the left and right side. 66 00:03:48,740 --> 00:03:49,340 Whoops. 67 00:03:49,630 --> 00:03:53,760 And I just messed that up there but we're going to go ahead and click this button which updates the 68 00:03:53,760 --> 00:03:55,060 frames and. 69 00:03:55,080 --> 00:03:55,830 Oh right. 70 00:03:55,830 --> 00:03:56,190 Sorry. 71 00:03:56,190 --> 00:03:57,690 No wonder it's not staying in place. 72 00:03:57,690 --> 00:04:00,870 Let's go ahead and give it a fixed width but let's make it. 73 00:04:00,870 --> 00:04:03,610 Maybe not. 74 00:04:03,930 --> 00:04:09,240 Let's give it five on either side so let's give it a width of 85. 75 00:04:09,240 --> 00:04:09,660 There we go. 76 00:04:09,660 --> 00:04:10,440 That looks pretty good. 77 00:04:10,450 --> 00:04:14,640 So now we have a little bit of cushioning on the left and right side and it will also stay in place 78 00:04:14,640 --> 00:04:16,610 which That's what we want right. 79 00:04:16,620 --> 00:04:17,470 Very cool. 80 00:04:17,760 --> 00:04:25,020 So next let's go ahead and let's drag on a UI image view and we're going to put it in this position 81 00:04:25,080 --> 00:04:26,580 right here. 82 00:04:26,580 --> 00:04:33,780 And you know what we're going to actually want it to be about the same size or I guess orientation as 83 00:04:33,780 --> 00:04:34,640 our screen. 84 00:04:34,650 --> 00:04:37,520 So I'm just going to go ahead and eyeball it there. 85 00:04:37,950 --> 00:04:38,550 That's fine. 86 00:04:38,550 --> 00:04:39,410 That looks pretty good. 87 00:04:39,420 --> 00:04:43,550 And we're going to set it to be aspect Phil. Anyway so it doesn't really matter. 88 00:04:43,650 --> 00:04:45,800 So go ahead and let's give it some constraints now. 89 00:04:45,960 --> 00:04:52,860 So select the image click the pin button and we're going to make it 20 from the bottom and 20 from the 90 00:04:52,860 --> 00:04:53,340 left. 91 00:04:53,340 --> 00:04:57,920 Let's give it a fixed width and height and add four constraints. 92 00:04:57,930 --> 00:04:59,000 Very cool. 93 00:04:59,070 --> 00:05:02,020 You know what guys are UI is pretty much done. 94 00:05:02,190 --> 00:05:09,200 Now we're going to do is we're going to connect it all connect all the elements to our view controller 95 00:05:09,200 --> 00:05:11,340 so that we can interact with them and use them. 96 00:05:11,340 --> 00:05:16,160 But we actually forgot one little thing we need to UI labels. 97 00:05:16,290 --> 00:05:22,370 Of course this bar up here is going to display what item our app thinks that it took a picture of. 98 00:05:22,590 --> 00:05:26,920 So we need to actually add the label so we can have that text it's kind of important. 99 00:05:26,940 --> 00:05:34,110 So let's go ahead and drag on to UI labels the top label is going to be changed of course to Avenir 100 00:05:34,140 --> 00:05:35,950 next my favorite font. 101 00:05:36,390 --> 00:05:41,370 And let's go ahead and set that to be demi bold so it stands out a little bit and a size 18 is pretty 102 00:05:41,370 --> 00:05:42,040 good. 103 00:05:42,420 --> 00:05:49,890 Let's change the font color to be deaf slopes red and let's make it a little whoops little bit wider 104 00:05:50,370 --> 00:05:52,710 and let's center it. 105 00:05:53,260 --> 00:05:58,360 Now in the yet center of the text. 106 00:05:58,360 --> 00:05:59,190 Very good. 107 00:05:59,530 --> 00:06:00,170 All right. 108 00:06:00,220 --> 00:06:05,520 Next we're going to go ahead and we are going to make this a little bit bigger. 109 00:06:05,590 --> 00:06:06,560 We're going to center it. 110 00:06:06,580 --> 00:06:12,160 We're going to change the font to a custom font and select Avenir next. 111 00:06:12,160 --> 00:06:15,090 And let's make it smaller Let's make size 12. 112 00:06:15,090 --> 00:06:17,610 And we're also going to make this Demi bold. 113 00:06:18,010 --> 00:06:18,660 OK. 114 00:06:19,000 --> 00:06:23,050 Now if you're wondering about the lining up of all of these don't worry we're going to put them in a 115 00:06:23,050 --> 00:06:25,140 stacked view in just a moment. 116 00:06:25,410 --> 00:06:31,800 But for now let's go ahead and let's select both of these and let's let's put them in a stack. 117 00:06:31,840 --> 00:06:32,870 All right. 118 00:06:33,050 --> 00:06:34,830 So yeah I clicked the stack. 119 00:06:34,870 --> 00:06:38,950 Button Down at the bottom and put them into a nice little stack view of course. 120 00:06:38,950 --> 00:06:40,950 This is inside of this view. 121 00:06:41,050 --> 00:06:44,960 And so we're going to go ahead and drag it to the sides so that it snaps. 122 00:06:44,970 --> 00:06:46,750 Do you see those little grids. 123 00:06:46,750 --> 00:06:47,560 Lovely. 124 00:06:47,890 --> 00:06:51,640 And what we're going to do is we're going to pin it and we're going to actually make it. 125 00:06:51,790 --> 00:06:53,940 Let's let's go ahead and do eight. 126 00:06:53,950 --> 00:06:54,420 All around. 127 00:06:54,430 --> 00:07:02,260 So eight from the top eight from the left from the right and eight from the bottom nice case. 128 00:07:02,260 --> 00:07:08,710 So let's go ahead and let's set a default message for when the app loads and what I think sounds good 129 00:07:08,710 --> 00:07:12,250 is maybe the names of items 130 00:07:14,680 --> 00:07:18,470 captured will appear here. 131 00:07:18,580 --> 00:07:23,370 Now you notice that's a little too big and sometimes you get more than just one word return. 132 00:07:23,380 --> 00:07:28,990 Like for instance you might take a picture of your closet you might get wardrobe closet bureau or something 133 00:07:28,990 --> 00:07:29,750 like that. 134 00:07:29,770 --> 00:07:33,880 So if there is not enough space we need to make sure that the font can scale. 135 00:07:33,880 --> 00:07:34,970 So go ahead and click. 136 00:07:35,020 --> 00:07:36,640 Minimum font size. 137 00:07:36,640 --> 00:07:42,410 And we're going to make size 10 be the minimum font so it'll automatically scale down to fit. 138 00:07:42,520 --> 00:07:43,470 Pretty cool. 139 00:07:43,840 --> 00:07:49,000 And you know what for this label we're just going to say confidence and we're going to just leave a 140 00:07:49,000 --> 00:07:49,470 space. 141 00:07:49,470 --> 00:07:55,950 Now that will fill in automatically and we're going to actually make it hidden until we have scanned 142 00:07:55,980 --> 00:07:56,440 an image. 143 00:07:56,440 --> 00:08:00,000 But for now just go out and type confidence and you know what. 144 00:08:00,280 --> 00:08:05,890 Let's make that a little smaller maybe. 145 00:08:07,510 --> 00:08:08,510 Let's do a size 10. 146 00:08:08,590 --> 00:08:10,630 I think size 10 looks pretty good. 147 00:08:10,990 --> 00:08:11,470 And you know what. 148 00:08:11,470 --> 00:08:14,800 With that done let's go ahead and connect this to our view controller. 149 00:08:14,830 --> 00:08:19,710 So go ahead and click the assistant editor so that we can see both at the same time. 150 00:08:19,780 --> 00:08:24,420 Get rid of did receive memory warning and nobody got time for that. 151 00:08:24,430 --> 00:08:29,050 I mean seriously though and we're basically going to right click and drag from each of these elements 152 00:08:29,050 --> 00:08:31,060 and create an IP outlet. 153 00:08:31,120 --> 00:08:34,470 So go ahead and right click and drag from the image view. 154 00:08:34,600 --> 00:08:43,000 We're going to just call this maybe capture image view OK whatever we capture We'll go there. 155 00:08:43,000 --> 00:08:47,980 Let's go ahead and right click and create an outlet for this button. 156 00:08:48,280 --> 00:08:50,710 Let's call this flash button. 157 00:08:52,220 --> 00:09:05,300 Let's go ahead and right click and drag from this label Let's call this identification label because 158 00:09:05,300 --> 00:09:12,180 that's where what we identify shows up right click and drag here we'll call this confidence label. 159 00:09:13,210 --> 00:09:15,340 And of course we almost forgot. 160 00:09:15,340 --> 00:09:20,230 Right click from our green view here and we're going to call this camera view. 161 00:09:20,710 --> 00:09:25,690 All right so now we need to do is basically create some custom view subclasses so that we can round 162 00:09:25,690 --> 00:09:31,990 the edges of this nice little view around the edges of our button and image view and also add a nice 163 00:09:31,990 --> 00:09:37,830 drop shadow on it just really improves what the app looks like it makes it look a little more professional. 164 00:09:37,870 --> 00:09:41,500 So go ahead and click on your view folder here. 165 00:09:41,830 --> 00:09:47,470 Right click and we're not going to create a new group sorry but create a new file. 166 00:09:47,680 --> 00:09:48,160 OK. 167 00:09:48,220 --> 00:09:50,530 It's of course going to be a cocoa touch class. 168 00:09:50,530 --> 00:09:52,800 And let's start with you I view. 169 00:09:52,840 --> 00:10:00,640 So we're going to make it a subclass of view and I'm going to call it rounded rounded shadow view. 170 00:10:00,880 --> 00:10:01,150 OK. 171 00:10:01,150 --> 00:10:03,120 The language of course is swift. 172 00:10:03,220 --> 00:10:09,100 And once you've done that go ahead and just click Create and it'll automatically make you a nice subclass 173 00:10:09,130 --> 00:10:09,640 of you. 174 00:10:09,670 --> 00:10:13,400 You can't get rid of this boilerplate code. 175 00:10:13,540 --> 00:10:18,280 And what we're going to do is we're actually going to go ahead and call awake from NIB and we're going 176 00:10:18,280 --> 00:10:20,890 to just modify for properties. 177 00:10:20,890 --> 00:10:21,280 OK. 178 00:10:21,370 --> 00:10:25,680 Three properties to make a shadow and one property to round the corner radius. 179 00:10:25,680 --> 00:10:33,570 So to begin go ahead and type self dot layer dot shadow color and the shadow color I like to use is 180 00:10:33,640 --> 00:10:34,960 dark gray. 181 00:10:35,410 --> 00:10:39,730 And of course we need to convert that to a C.G. color and let's get this assistant editor out of the 182 00:10:39,730 --> 00:10:41,050 way so we have the full screen. 183 00:10:41,050 --> 00:10:42,120 There we go. 184 00:10:42,130 --> 00:10:42,390 All right. 185 00:10:42,400 --> 00:10:47,040 So dark grey and to use this as a color for a shadow. 186 00:10:47,050 --> 00:10:49,680 We need to convert it into a C-g color. 187 00:10:49,720 --> 00:10:49,950 All right. 188 00:10:49,960 --> 00:10:52,200 Next self top layer. 189 00:10:52,210 --> 00:10:55,690 And what we're going to modify is the shadow radius. 190 00:10:56,020 --> 00:11:01,420 You can see that here now it's the blur radius in points used to render the layers shadow. 191 00:11:01,420 --> 00:11:09,250 So if we give it a value it will blur the shadow at a certain amount so obviously a bigger number is 192 00:11:09,250 --> 00:11:12,430 more blurry less of a number is more sharp. 193 00:11:12,430 --> 00:11:14,490 The number that I like to use is 15. 194 00:11:14,680 --> 00:11:16,620 You can try anything else that you'd like. 195 00:11:16,610 --> 00:11:18,320 I just like 15. 196 00:11:18,330 --> 00:11:18,820 All right. 197 00:11:18,850 --> 00:11:21,430 So we have shadow color we have a shadow radius. 198 00:11:21,430 --> 00:11:27,660 Next we're going to move on to shadow opacity wups shadow opacity is part of the layer. 199 00:11:27,670 --> 00:11:31,650 So self-taught layer that shadow opacity. 200 00:11:31,990 --> 00:11:34,740 And we're going to set it to be 75 percent opaque. 201 00:11:34,750 --> 00:11:39,750 We don't want it to be so intense that it's what we want it to be subtle. 202 00:11:39,750 --> 00:11:44,980 You don't want it to be very intense exposed to kind of just be in the background out of the way. 203 00:11:45,250 --> 00:11:48,660 So 75 percent opacity for the shadow. 204 00:11:48,880 --> 00:11:54,940 And finally call self dot layer and this is where we're going to modify the corner radius to give it 205 00:11:55,520 --> 00:11:58,060 that nice rounded Pille shape. 206 00:11:58,060 --> 00:12:03,940 So go ahead and type self-taught Layard's corner radius and in order to do this we're going to go ahead 207 00:12:04,270 --> 00:12:11,800 and calculate the the height of the view and then from that view we're going to cut it in half and then 208 00:12:11,800 --> 00:12:13,610 round that much. 209 00:12:13,900 --> 00:12:20,410 If you think about it if we had a square and you were to start in the middle of the top of the square 210 00:12:20,620 --> 00:12:25,750 and round down to the middle of the other side and did that all the way around it would make a perfect 211 00:12:25,840 --> 00:12:26,280 circle. 212 00:12:26,280 --> 00:12:32,380 So we're basically doing that but only on the left and right sides of our rectangle view. 213 00:12:32,380 --> 00:12:38,130 So go ahead and type self la frame that height you know what. 214 00:12:38,140 --> 00:12:41,550 I don't know if I actually need the layer there. 215 00:12:41,550 --> 00:12:46,270 I might just be able to get away with self-doubt from that height yet so I could do that self-deceit 216 00:12:46,350 --> 00:12:49,870 frame height and then divide it by 2. 217 00:12:49,900 --> 00:12:53,560 Believe it or not this will round the corners to make a perfect kill shape. 218 00:12:53,560 --> 00:12:54,670 Pretty cool. 219 00:12:55,360 --> 00:13:02,080 So now we need to do is set up our storyboards so that it knows to use this class and to do that all 220 00:13:02,080 --> 00:13:09,400 we need to do is to go into maned that storyboard select the view here that white view and we are going 221 00:13:09,400 --> 00:13:16,500 to go ahead and set its identity in the identity Inspektor to be rounded shadow view. 222 00:13:16,900 --> 00:13:18,090 Okay that's easy enough. 223 00:13:18,100 --> 00:13:23,020 But there's one thing we need to do in camera AVC if we look here. 224 00:13:23,020 --> 00:13:26,700 Camera view is coming in as a view not rounded shadow view. 225 00:13:26,710 --> 00:13:28,620 So we need to change it here as well. 226 00:13:29,050 --> 00:13:33,770 So just start by typing and autocomplete will help you supercool that way. 227 00:13:33,790 --> 00:13:34,760 Now it's good to go. 228 00:13:34,960 --> 00:13:38,600 So that is now set up as rounded Shatto view. 229 00:13:38,950 --> 00:13:41,820 Although wait a minute sorry our camera view is now. 230 00:13:41,880 --> 00:13:44,160 It needs to be rounded. 231 00:13:44,680 --> 00:13:47,950 We actually never even made a connection for that view. 232 00:13:47,950 --> 00:13:48,790 Let's do that now. 233 00:13:48,790 --> 00:13:50,080 My mistake. 234 00:13:50,110 --> 00:13:53,160 So go into your view controller again. 235 00:13:53,350 --> 00:13:56,890 Sneaky little view trying to get out of doing his job. 236 00:13:56,980 --> 00:14:04,000 Right click and drag and let's create this let's just call this rounded label view. 237 00:14:04,000 --> 00:14:05,230 Very cool. 238 00:14:05,230 --> 00:14:05,470 All right. 239 00:14:05,470 --> 00:14:12,290 So going back now to our controller we can see that it is a type rounded shadow view supercool. 240 00:14:12,520 --> 00:14:13,740 OK that's great. 241 00:14:13,750 --> 00:14:18,850 There are no other views we need to round and give a shadow but we do need to round the corners of our 242 00:14:18,850 --> 00:14:20,810 button and give it the same shadow so. 243 00:14:20,830 --> 00:14:25,580 Believe it or not we're basically going to pass in the same thing in a week from Nibbe. 244 00:14:25,810 --> 00:14:26,230 OK. 245 00:14:26,380 --> 00:14:31,750 So I don't normally do this but I am going to for this case because we need to create a separate class 246 00:14:32,830 --> 00:14:33,520 for the button. 247 00:14:33,520 --> 00:14:36,420 So I'm going to copy this awake from NIB override. 248 00:14:36,490 --> 00:14:41,830 I'm going to create a new file and a new Cocco touch class but this time it's going to be a subclass 249 00:14:41,860 --> 00:14:43,340 of UI button. 250 00:14:43,600 --> 00:14:48,460 We're going to call it round it shadow button click next. 251 00:14:48,490 --> 00:14:49,700 Then click Create. 252 00:14:50,140 --> 00:14:55,810 And what we can do is we can replace this boilerplate code here with our awake from NIB function. 253 00:14:55,860 --> 00:15:01,780 And just like that we can go into our storyboard select our button and then change the class and the 254 00:15:01,780 --> 00:15:04,330 identity inspector to rounded shadow button. 255 00:15:04,490 --> 00:15:05,830 OK very cool. 256 00:15:06,310 --> 00:15:08,490 And let's think what do we need to do now. 257 00:15:09,070 --> 00:15:17,310 OK in camera AVC we need to change the button to be rounded shadow button and the last thing we need 258 00:15:17,310 --> 00:15:22,920 to do is to round the edges of our image view as well as give it a shadow so we're going to do the same 259 00:15:22,920 --> 00:15:24,210 exact thing. 260 00:15:24,330 --> 00:15:30,060 New File Cocco touch class UI image view image. 261 00:15:30,180 --> 00:15:35,470 We're going to call this rounded shadow in image view. 262 00:15:36,210 --> 00:15:37,320 OK very good. 263 00:15:37,320 --> 00:15:39,390 Create it going faster. 264 00:15:39,420 --> 00:15:40,650 We've done this already. 265 00:15:40,680 --> 00:15:46,730 Replace that boilerplate code with awake from NIB and our shadow creation and quarter radius modifications. 266 00:15:46,740 --> 00:15:54,120 Although we need to pause here for a second our image view we don't want to make it like a pill on the 267 00:15:54,120 --> 00:15:58,620 sides that'll actually kind of make it look like a football or Arnold's head if you watch Hey Arnold. 268 00:15:58,620 --> 00:16:03,240 But anyway what we want it to look like is just nicely rounded corners so I'm actually going to make 269 00:16:03,240 --> 00:16:06,630 it match the corner radius or the shadow radius of the shadow. 270 00:16:06,630 --> 00:16:12,720 So let's give it a corner radius of 15 for the image view then go back to the storyboard and we're going 271 00:16:12,720 --> 00:16:14,460 to repeat the same process we have been. 272 00:16:14,460 --> 00:16:20,920 Click the image view change the class to the one we just made rounded shadow image view go to camera 273 00:16:20,960 --> 00:16:27,240 AVC change it to rounded shadow image view and let's go see if it worked. 274 00:16:27,240 --> 00:16:33,700 Let's go ahead and build this to an iPhone 7 and let's go see how we did. 275 00:16:33,720 --> 00:16:38,770 Let's make sure that our UI is looking pretty and that'll be that will be up for this video. 276 00:16:38,910 --> 00:16:44,870 Looks like it built to pull open my sim here and I'll send it by the way. 277 00:16:44,870 --> 00:16:47,510 I just love the new simulator in code 9. 278 00:16:47,510 --> 00:16:50,090 It's super cool all these buttons actually work. 279 00:16:50,090 --> 00:16:55,670 You can see as I hover over them they move power button volume on volume if you can really do everything. 280 00:16:55,820 --> 00:16:56,890 It's very cool. 281 00:16:57,140 --> 00:16:59,320 All right so cool look at this it works. 282 00:16:59,330 --> 00:17:02,280 We have a nice rounded view with a shadow. 283 00:17:02,300 --> 00:17:04,700 We have a nice rounded button with a nice pillowy shadow. 284 00:17:04,700 --> 00:17:09,950 And of course our image view is not showing up because we don't have an image yet but the override awake 285 00:17:09,950 --> 00:17:12,030 from NIB stuff that we just did. 286 00:17:12,320 --> 00:17:14,240 It worked here and I know that it will work there. 287 00:17:14,240 --> 00:17:19,880 So let's go ahead and let's move on to the next video where we're going to be starting to make the camera 288 00:17:19,880 --> 00:17:20,700 view work. 289 00:17:20,810 --> 00:17:24,210 We're going to go ahead and add a tap gesture so that you can take a photo. 290 00:17:24,350 --> 00:17:27,690 And we're also going to display that photo in the UI image view. 291 00:17:27,710 --> 00:17:29,360 So let's go ahead and head over to the next video. 292 00:17:29,360 --> 00:17:30,620 Awesome job with this one.