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