1 00:00:08,100 --> 00:00:10,230 Hey everybody this is Caleb with slopes. 2 00:00:10,240 --> 00:00:15,250 And in this video we're going to go ahead and build out the interface of Matt Visi in our pixel city 3 00:00:15,250 --> 00:00:21,260 app and we're also going to enable it to work by setting the delegate and conforming to MKM that you 4 00:00:21,280 --> 00:00:22,160 delegate. 5 00:00:22,180 --> 00:00:27,040 So go ahead and pull open your X could project just like we left it last time and you're going to go 6 00:00:27,040 --> 00:00:34,480 ahead and open up Main storyboard let's build ourselves a user interface so to begin you know what I'm 7 00:00:34,480 --> 00:00:36,070 actually going to show you really quickly. 8 00:00:36,070 --> 00:00:44,770 I have a mockup here from our designer Evan and if you show if I can look here we have our our home 9 00:00:44,850 --> 00:00:45,640 visi. 10 00:00:45,760 --> 00:00:48,430 We have a nice view here it's orange. 11 00:00:48,460 --> 00:00:49,300 We have a label. 12 00:00:49,300 --> 00:00:51,720 We have a button and we have a map view. 13 00:00:51,940 --> 00:00:52,610 OK. 14 00:00:52,930 --> 00:00:59,380 And also if you haven't already you can download these assets to drag into the project in the source 15 00:00:59,380 --> 00:01:03,430 code from the very first video where I gave you an introduction to the app. 16 00:01:03,490 --> 00:01:09,190 So go check that out go download it to your to your Mac using either the slopes out for Mac or you can 17 00:01:09,190 --> 00:01:12,700 airdrop them from the slopes iOS app to your computer. 18 00:01:12,700 --> 00:01:13,470 Pretty cool. 19 00:01:13,720 --> 00:01:16,310 So anyway these assets are for the button. 20 00:01:16,360 --> 00:01:21,550 Ok the center map button as well as a close button which we may or may not use. 21 00:01:21,550 --> 00:01:27,090 I haven't decided yet anyway so go ahead and go into that asset Scott X-C assets folder. 22 00:01:27,280 --> 00:01:30,630 Drag those in and those are now available to us. 23 00:01:30,640 --> 00:01:31,390 Wonderful. 24 00:01:31,390 --> 00:01:38,920 So go back to your main story board and we are going to start by adding the furthest back most element 25 00:01:38,920 --> 00:01:40,480 which is going to be the map view. 26 00:01:40,510 --> 00:01:46,620 So go ahead and search for market view and drag it on. 27 00:01:46,630 --> 00:01:46,870 All right. 28 00:01:46,870 --> 00:01:51,170 So go ahead and position it like so drag the corners down to the very bottom. 29 00:01:51,220 --> 00:01:52,780 We want it to fill the hole screens. 30 00:01:52,780 --> 00:01:55,020 We get a nice beautiful map view. 31 00:01:55,130 --> 00:01:55,700 OK. 32 00:01:55,990 --> 00:02:02,910 And by the way we're using Map kit and map use just because Apple's made it really easy to show location 33 00:02:02,910 --> 00:02:09,670 to show routes and destinations and drop pins and just lots of really nice cool built in stuff that 34 00:02:09,700 --> 00:02:15,130 Apple has just made for us it's available and it's right here for us to use so why not. 35 00:02:15,130 --> 00:02:19,020 So go ahead and select that and click the pin button. 36 00:02:19,240 --> 00:02:23,970 Now we're going to pin it zero from all sides and add those four constraints. 37 00:02:24,200 --> 00:02:26,320 OK so that's good to go next. 38 00:02:26,320 --> 00:02:31,510 We're going to go ahead and add that orange banner up at the top and to do that we're going to just 39 00:02:31,510 --> 00:02:35,450 search for you I view and we're going to drag on a view. 40 00:02:35,750 --> 00:02:37,010 OK. 41 00:02:37,070 --> 00:02:44,200 Stretch it so that it fits the entire width of the screen and pull it whoops pull the bottom up here 42 00:02:44,200 --> 00:02:47,010 so that it's about 70 tall. 43 00:02:47,050 --> 00:02:48,040 That's pretty good. 44 00:02:48,040 --> 00:02:54,230 That leaves about I don't know 50 or 60 points below the status bar which is what you want. 45 00:02:54,240 --> 00:02:57,790 You want to leave a little bit of room so it doesn't seem too squishy. 46 00:02:57,790 --> 00:03:04,690 And now we're going to change the color so go into the identity inspector select background and the 47 00:03:04,690 --> 00:03:11,860 color I'm going to use is this orange color which if you want the hexadecimal value that's ef 6 AA 6 48 00:03:11,860 --> 00:03:18,400 2 3 6 6 2 3 and you can get the same color that I'm using which would be kind of cool and we can be 49 00:03:18,400 --> 00:03:19,890 like twins. 50 00:03:20,020 --> 00:03:21,220 Anyway moving on. 51 00:03:21,220 --> 00:03:23,000 So let's keep this in its place. 52 00:03:23,050 --> 00:03:25,890 Let's select the pin button. 53 00:03:26,250 --> 00:03:27,050 Oh that's weird. 54 00:03:29,780 --> 00:03:32,780 Undo that I think I bumped something that is not correct. 55 00:03:32,780 --> 00:03:33,050 All right. 56 00:03:33,050 --> 00:03:33,260 Sorry. 57 00:03:33,260 --> 00:03:34,860 So select the view. 58 00:03:35,180 --> 00:03:36,350 Select the pin button. 59 00:03:36,350 --> 00:03:42,430 We want to go zero from the left zero from the top and zero from the right as well as 70 tall. 60 00:03:42,570 --> 00:03:45,350 Add four constraints and that will stay there. 61 00:03:45,350 --> 00:03:47,400 Next we're going to add a label. 62 00:03:47,450 --> 00:03:53,110 So go ahead and search for you I label and then drag and drop that right on the view. 63 00:03:53,240 --> 00:03:56,810 Make sure it's centered like I did by using the little snap guides. 64 00:03:56,810 --> 00:04:04,130 They're very helpful and I'm going to stretch it so that it's a little bit wider so we can fit more 65 00:04:04,130 --> 00:04:09,620 text in there and we want this to give the user a clue of what they're supposed to do or not give them 66 00:04:09,620 --> 00:04:11,200 a clue but explicitly tell them. 67 00:04:11,200 --> 00:04:14,190 So I'm going to say double tap. 68 00:04:14,250 --> 00:04:25,830 Whoops double tap to double tap to drop a pen and view photos ok and it looks like we need a little 69 00:04:25,830 --> 00:04:26,880 more room. 70 00:04:27,000 --> 00:04:29,550 That's fine we can stretch it so that it fits. 71 00:04:29,850 --> 00:04:30,620 Cool. 72 00:04:31,020 --> 00:04:36,080 Let's go ahead and center this set the alignment to be centered and let's change the font system font 73 00:04:36,090 --> 00:04:36,960 is ugly. 74 00:04:37,200 --> 00:04:40,650 So let's use a font like Avenir. 75 00:04:40,650 --> 00:04:41,040 Next. 76 00:04:41,040 --> 00:04:42,780 Hey that's my favorite font. 77 00:04:42,990 --> 00:04:46,250 If you've watched any of my other courses you know that I love this font. 78 00:04:46,350 --> 00:04:47,540 It's true I do. 79 00:04:47,850 --> 00:04:48,360 OK. 80 00:04:48,390 --> 00:04:49,740 I think bald is too dark. 81 00:04:49,740 --> 00:04:51,540 I'm going to change it to be demi bold. 82 00:04:51,540 --> 00:04:55,580 I dropped the font down to size 16 and I'm actually going to make this white. 83 00:04:55,590 --> 00:04:57,910 I think it stands out nicely on the orange. 84 00:04:58,110 --> 00:05:06,570 But what we want to do is we want to center this and lock the size so that it does not ever change although 85 00:05:06,870 --> 00:05:10,710 we want to keep in mind other screen sizes as well and we'll check for that in just a second. 86 00:05:10,710 --> 00:05:14,790 But for now go ahead and give it a fixed width and height like so. 87 00:05:15,150 --> 00:05:19,560 And then we're going to go ahead and click on the alignment button and we're going to align it horizontally 88 00:05:19,590 --> 00:05:23,870 and vertically in container which for this label is our orange view. 89 00:05:24,210 --> 00:05:27,320 OK add those constraints and that should be good to go. 90 00:05:27,360 --> 00:05:35,960 But let's check to make sure that this looks OK on an iPhone 7 plus OK great and an iPhone 6. 91 00:05:36,290 --> 00:05:37,610 It looks like it looks all right. 92 00:05:37,610 --> 00:05:38,210 It's pretty good. 93 00:05:38,210 --> 00:05:41,300 It's not squished it's not cut off. 94 00:05:41,540 --> 00:05:48,500 Obviously the s e is going to be the next iPhone to go so it is important to keep the members in mind 95 00:05:48,500 --> 00:05:49,590 when designing. 96 00:05:49,790 --> 00:05:56,450 But remember that most of your users are going to be using iPhone 7 or iPhone 7 plus or iPhone 6 iPhone 97 00:05:56,450 --> 00:05:57,760 6 x whatever. 98 00:05:57,920 --> 00:06:03,320 But those two screen sizes are going to be much much more common than the iPhone s e. 99 00:06:03,550 --> 00:06:05,680 OK that will be the next iPhone to go. 100 00:06:05,690 --> 00:06:06,830 So it is important. 101 00:06:06,830 --> 00:06:09,860 But just bear in mind that it's not going to be around forever. 102 00:06:10,400 --> 00:06:15,860 So I like to design on the iPhone 7 just because it gives me kind of a good intermediate screen size 103 00:06:16,010 --> 00:06:22,490 so I can design with both smaller and larger 7 plus in mind. 104 00:06:22,870 --> 00:06:24,130 Ok cool. 105 00:06:24,560 --> 00:06:27,080 The last thing we need to add is a UI button. 106 00:06:27,140 --> 00:06:31,580 This app is pretty simple The interface is pretty easy to design. 107 00:06:31,880 --> 00:06:32,760 So there's a button. 108 00:06:32,780 --> 00:06:33,970 We dragged it on there. 109 00:06:33,980 --> 00:06:35,930 Let's get rid of that label. 110 00:06:35,960 --> 00:06:43,820 Press enter and the image we're going to set to be location button right on that's obviously way too 111 00:06:43,820 --> 00:06:44,440 small. 112 00:06:44,480 --> 00:06:49,190 So let's fix that by going in and we're going to pin this zero from the right. 113 00:06:49,190 --> 00:06:51,060 Of course it's constraining to margins. 114 00:06:51,230 --> 00:06:54,890 And then 20 from the bottom but we want to make the size a bit bigger. 115 00:06:54,890 --> 00:06:57,210 So let's try 50 by 50. 116 00:06:57,230 --> 00:06:58,950 Let's see how that looks. 117 00:06:59,660 --> 00:06:59,910 Yeah. 118 00:06:59,920 --> 00:07:00,250 You know what. 119 00:07:00,260 --> 00:07:01,320 That looks great. 120 00:07:01,340 --> 00:07:02,540 I think that'll work. 121 00:07:02,540 --> 00:07:06,930 So now we have a view we have a label a button and a map view. 122 00:07:07,040 --> 00:07:10,620 OK that's pretty much all we need for our user interface. 123 00:07:10,850 --> 00:07:11,350 But you know what. 124 00:07:11,360 --> 00:07:18,200 There is one more thing that we need to do now when we are in our map view later in this app and we 125 00:07:18,200 --> 00:07:23,360 double tap it's going to drop a pin and then what it's going to do is it's going to animate up a nice 126 00:07:23,360 --> 00:07:28,310 view that holds a collection view and we're going to download all of our images into that collection 127 00:07:28,310 --> 00:07:28,480 view. 128 00:07:28,490 --> 00:07:35,240 So we actually do need to add a little hidden view down here that's going to be animated by us changing 129 00:07:35,240 --> 00:07:37,410 the bottom constraint of this map view. 130 00:07:37,460 --> 00:07:41,210 Now that might be confusing don't worry we're going to take it slow. 131 00:07:41,300 --> 00:07:43,660 So I'm going to go ahead and just drag this up for now. 132 00:07:43,700 --> 00:07:50,570 Bearing in mind that that constraint is there I'm going to add in a UI view and I'm going to actually 133 00:07:50,570 --> 00:07:52,820 drop it in right here. 134 00:07:53,150 --> 00:07:54,300 OK. 135 00:07:54,350 --> 00:08:01,190 Drag it down and just follow me here I'm going to make it fit in the bottom of this view. 136 00:08:01,350 --> 00:08:02,550 All right. 137 00:08:02,750 --> 00:08:06,840 And I'm going to go ahead and just make this one pixel high. 138 00:08:06,890 --> 00:08:13,400 It's selected but I'm actually you don't know let's make it zero so it's not showing up at all but we're 139 00:08:13,400 --> 00:08:18,770 going to go ahead and pin this zere from the bottom zero from the start zero from the left zero from 140 00:08:18,770 --> 00:08:20,710 the bottom and zero from the Right. 141 00:08:21,350 --> 00:08:25,910 Now I'm not going to give it a height constraint but I am going to go ahead and just pin that to the 142 00:08:25,910 --> 00:08:26,500 bottom. 143 00:08:26,660 --> 00:08:27,530 OK. 144 00:08:27,560 --> 00:08:31,790 Now this is actually still constrained to the bottom of the Super Bowl. 145 00:08:32,180 --> 00:08:39,410 But what we're going to do is with our view here we're going to pin this to the bottom of the view and 146 00:08:39,410 --> 00:08:43,100 you know what we might actually need to make it one pixel high to do that. 147 00:08:44,020 --> 00:08:44,750 So let's see 148 00:08:48,050 --> 00:08:53,700 well OK so let's try removing the bottom view constraint from the map view. 149 00:08:53,720 --> 00:08:56,330 I just clicked on my map view and I clicked on the bottom view constraint. 150 00:08:56,330 --> 00:08:57,470 I deleted it. 151 00:08:57,800 --> 00:09:05,040 And now with our hidden view here I should be able to pin it but I'm still having trouble let's see. 152 00:09:05,040 --> 00:09:05,780 OK. 153 00:09:05,910 --> 00:09:09,820 Find that view top space leading space trailing space. 154 00:09:09,820 --> 00:09:11,360 It's one pixel high. 155 00:09:12,730 --> 00:09:13,920 That looks good. 156 00:09:18,020 --> 00:09:22,310 Hey I should be able to pin this oh you know what it looks like I was off of the view. 157 00:09:22,320 --> 00:09:24,050 I was not able to be seen. 158 00:09:24,210 --> 00:09:28,860 So let's go ahead if you have that same problem just bump it up a little bit on the y axis and we can 159 00:09:28,860 --> 00:09:30,660 always fix it later. 160 00:09:30,660 --> 00:09:37,350 But go ahead and click the pin button and we're going to actually pin it zero to the bottom of this 161 00:09:37,350 --> 00:09:38,220 map view. 162 00:09:38,640 --> 00:09:38,940 OK. 163 00:09:38,970 --> 00:09:41,540 And you'll see that pulls it down nicely. 164 00:09:41,580 --> 00:09:48,450 But what we need to do is we actually need to put this back down to where it was case 667 and we can 165 00:09:48,450 --> 00:09:50,280 actually make this have a height of zero. 166 00:09:50,280 --> 00:09:54,220 So it is there but it's not really there. 167 00:09:54,270 --> 00:09:58,410 I'll show you why in a second it's just going to make it really easy to animate that view up and hide 168 00:09:58,410 --> 00:10:01,470 it at will which is what we want to do in this app. 169 00:10:01,470 --> 00:10:04,240 So now that that's done we're looking good. 170 00:10:04,470 --> 00:10:10,260 We're going to go ahead and we're going to make some outlets in our application so that we can communicate 171 00:10:10,260 --> 00:10:13,860 with our Matthew Kaye as well as other components. 172 00:10:13,890 --> 00:10:18,980 So go ahead and click the assistant editor and get rid of did receive memory warning. 173 00:10:18,980 --> 00:10:21,260 We're not going to need it. 174 00:10:21,300 --> 00:10:25,760 So next let's go ahead and do some Iby actions for the button. 175 00:10:25,800 --> 00:10:26,090 OK. 176 00:10:26,100 --> 00:10:27,930 So right click on the button. 177 00:10:28,850 --> 00:10:30,100 Drag and drop. 178 00:10:30,100 --> 00:10:31,060 Choose action. 179 00:10:31,060 --> 00:10:37,030 And we're going to call this center map button was pressed. 180 00:10:37,030 --> 00:10:40,900 OK that's this button will center the map on our users location. 181 00:10:40,930 --> 00:10:42,950 We don't need to do anything in it yet. 182 00:10:42,970 --> 00:10:44,070 That's cool. 183 00:10:44,200 --> 00:10:49,200 But what we do need to do is we need to create an IP outlet for our map view. 184 00:10:49,510 --> 00:10:55,080 OK so right click the map view and drag into the view controller and call this map view. 185 00:10:55,090 --> 00:11:01,380 Believe it or not connect it with an enter or by clicking the enter button or sorry the connect button. 186 00:11:01,600 --> 00:11:03,490 And you'll notice there's some problems. 187 00:11:03,490 --> 00:11:04,870 Check it out. 188 00:11:04,930 --> 00:11:11,770 It says use of undeclared type M-K map view and that is because folks we have not yet imported the map 189 00:11:11,770 --> 00:11:12,830 kit framework. 190 00:11:13,070 --> 00:11:20,870 So man I wish I could type import map kit and let's see or we could go. 191 00:11:21,640 --> 00:11:23,030 Let's take a look. 192 00:11:23,200 --> 00:11:24,910 OK it looks like we're good to go. 193 00:11:25,120 --> 00:11:30,270 Let's build it to an iPhone 7 plus And let's see what happens. 194 00:11:30,420 --> 00:11:34,700 There it is our beautiful simulator awesome. 195 00:11:34,700 --> 00:11:40,550 So as this is loading I just want to remind you we just added our nice user interface we just added 196 00:11:40,550 --> 00:11:44,850 a map view you view some buttons et cetera et cetera. 197 00:11:45,190 --> 00:11:45,960 OK. 198 00:11:46,010 --> 00:11:47,100 Very cool. 199 00:11:47,120 --> 00:11:49,380 So it looks like we have a map view. 200 00:11:49,530 --> 00:11:49,800 OK. 201 00:11:49,820 --> 00:11:52,320 We have imported the map kit framework. 202 00:11:52,430 --> 00:11:58,790 We have a map view that is showing the map but we are not yet able to use this map view because we actually 203 00:11:58,790 --> 00:12:06,410 need to conform to the M.K. map view delegate that's going to allow us to use all of the functions so 204 00:12:06,410 --> 00:12:09,500 we can monitor a user's location. 205 00:12:09,500 --> 00:12:11,870 We can set the delegate. 206 00:12:11,870 --> 00:12:16,770 We can set all of the maps related information that's really really important. 207 00:12:16,850 --> 00:12:22,310 And so to do that we're not going to go ahead and inherit up here we're going to actually create an 208 00:12:22,310 --> 00:12:25,850 extension of this view controller and inherit that way. 209 00:12:25,850 --> 00:12:35,450 So go ahead and type extension that PC and type M-K map view delegate give us some curly braces and 210 00:12:35,540 --> 00:12:37,180 that's going to be good for now. 211 00:12:37,250 --> 00:12:38,470 We're going to come back to it later. 212 00:12:38,480 --> 00:12:44,630 But what we do need to do is we need to set this view controller Matt VC to be the delegate of our map 213 00:12:44,630 --> 00:12:45,160 view. 214 00:12:45,320 --> 00:12:52,370 So get rid of that comment and go ahead and type map view delegate and just make that equal to self. 215 00:12:52,460 --> 00:12:58,220 This enables us to be able to use our map view on this view controller. 216 00:12:58,360 --> 00:12:59,090 OK. 217 00:12:59,600 --> 00:13:02,170 So there are a couple more things we need to do. 218 00:13:02,270 --> 00:13:08,530 Go back to your project here click maynt storyboard and we need to disable a few things on our map view. 219 00:13:08,750 --> 00:13:12,220 So click open the assistant not the assistant. 220 00:13:12,220 --> 00:13:17,640 Sorry the utilities panel and click on the attributes inspector. 221 00:13:17,660 --> 00:13:24,380 Now what we want to disable is rotating 3D view of the compass. 222 00:13:24,380 --> 00:13:25,340 We don't need to see. 223 00:13:25,370 --> 00:13:28,570 We also don't know which is show points of interest that's cool. 224 00:13:28,940 --> 00:13:30,280 Scrolling is a must. 225 00:13:30,280 --> 00:13:35,870 But zooming we need to disable because if you think about it if you use the maps app on iOS If you double 226 00:13:35,870 --> 00:13:37,580 tap it zooms in. 227 00:13:37,580 --> 00:13:42,650 But we're going to be using a double tap to drop a pin so to make it easier on us I just disabled zooming 228 00:13:42,650 --> 00:13:48,200 on the map and we'll set it so that you can see everything nicely but zooming needs to be disabled for 229 00:13:48,200 --> 00:13:49,090 this to work. 230 00:13:49,280 --> 00:13:52,050 So let's go ahead and build and run it one last time. 231 00:13:52,100 --> 00:13:56,210 Let's just double check to make sure everything's looking really good. 232 00:13:56,210 --> 00:13:57,880 It's going to build and run. 233 00:13:58,430 --> 00:14:00,240 And there we go. 234 00:14:00,260 --> 00:14:02,900 OK we forgot one thing. 235 00:14:02,920 --> 00:14:04,120 Use your location. 236 00:14:04,130 --> 00:14:05,930 We want to show that of course. 237 00:14:05,930 --> 00:14:09,140 So let's go ahead and try it one last time 238 00:14:13,310 --> 00:14:14,010 OK. 239 00:14:14,320 --> 00:14:18,510 You'll notice it's not showing up but there there's a reason for that. 240 00:14:18,550 --> 00:14:22,910 We have not yet requested location services and we're going to do that in the next video so. 241 00:14:23,110 --> 00:14:25,300 Awesome job building out the user interface. 242 00:14:25,360 --> 00:14:26,690 Pretty easy right. 243 00:14:26,740 --> 00:14:30,250 In the next video you're going to go ahead and request location services. 244 00:14:30,250 --> 00:14:35,200 I'm going to show you some changes to Iowa 11 specifically and we're going to write a function that 245 00:14:35,200 --> 00:14:41,170 we can center the map on the user's location and do a really cool zoom in animation similar to Google 246 00:14:41,170 --> 00:14:41,890 Earth. 247 00:14:41,890 --> 00:14:42,150 All right. 248 00:14:42,160 --> 00:14:43,750 So we'll see in the next video. 249 00:14:43,750 --> 00:14:45,030 Great job with this one. 250 00:14:45,040 --> 00:14:45,550 Head on over.