1 00:00:06,010 --> 00:00:14,920 What's up guys I'm Jacob Bledsoe it slopes dot com and hopefully you guys dove in and started working 2 00:00:14,920 --> 00:00:16,950 on this PC. 3 00:00:17,050 --> 00:00:22,420 All we're doing in this lesson is just setting this all up and we'll do will be done. 4 00:00:22,420 --> 00:00:30,010 This is the last UI thing we're going to be adding before we jump into code when the exciting stuff 5 00:00:30,010 --> 00:00:31,150 begins. 6 00:00:31,150 --> 00:00:37,240 So go ahead and open your project up and let's pull up our terminal and the way I got the spotlight 7 00:00:37,240 --> 00:00:39,440 up like that was just command space bar. 8 00:00:39,880 --> 00:00:45,320 And I'm going to create my new branch called lesson Re. 9 00:00:45,850 --> 00:00:46,480 So good. 10 00:00:46,480 --> 00:00:53,950 Check out Dasch be less than three and it's OK if you're not changing branches between all these lessons. 11 00:00:53,950 --> 00:00:55,150 You don't have to. 12 00:00:55,150 --> 00:01:02,550 It's just always very important to commit and make sure your work is saved in between major features. 13 00:01:02,590 --> 00:01:07,750 I'm just doing one for every lesson so you can get my work at any point. 14 00:01:08,690 --> 00:01:10,770 So that is done. 15 00:01:10,940 --> 00:01:17,740 Now let's go back to our storyboard and we need a third view controller now. 16 00:01:19,020 --> 00:01:24,000 And you know what I just realized we need to fix this. 17 00:01:24,060 --> 00:01:31,630 I never really named our second view controller so you guys are probably yelling at me in the last video. 18 00:01:32,040 --> 00:01:36,390 Let's go ahead and just make sure this files renamed to run log. 19 00:01:36,390 --> 00:01:42,590 VC I might not have done it I can't remember now and then go back to your storyboard. 20 00:01:42,660 --> 00:01:50,010 And with that view controller selected go to your identity inspector and run log VCs there. 21 00:01:50,010 --> 00:01:53,250 Strange I guess weird things have happened. 22 00:01:56,440 --> 00:01:58,910 All right I'm glad that's fixed. 23 00:01:59,900 --> 00:02:05,720 I musta just forgot to change the file name and now that I'm looking at it let's go ahead and drag our 24 00:02:05,720 --> 00:02:09,270 view controllers into our controller folder. 25 00:02:09,470 --> 00:02:11,330 So it's a little more organized. 26 00:02:11,630 --> 00:02:12,560 OK. 27 00:02:12,620 --> 00:02:14,860 Back to our third VC. 28 00:02:15,050 --> 00:02:21,050 So when we hit the start the start run button right here. 29 00:02:21,320 --> 00:02:24,020 It's going to go into the current run screen. 30 00:02:24,020 --> 00:02:32,900 So this view controller with the map view is going to segue to our current run visi. 31 00:02:33,140 --> 00:02:34,030 So go ahead. 32 00:02:34,040 --> 00:02:41,750 And in the object library down here type in the view controller and now we want the top one we want 33 00:02:41,750 --> 00:02:43,400 a full view controller. 34 00:02:43,490 --> 00:02:46,790 So go ahead a click and drag this to the storyboard. 35 00:02:46,790 --> 00:02:48,450 Just like that. 36 00:02:48,590 --> 00:02:54,090 And now we have our third storyboard and what's really cool. 37 00:02:54,110 --> 00:03:01,130 Let's go ahead and click on this start run button and if we just hit Control drag from it and select 38 00:03:01,130 --> 00:03:03,240 this view controller we can say. 39 00:03:03,250 --> 00:03:04,500 Show. 40 00:03:04,790 --> 00:03:11,470 And now just pressing that start button will segue to this PC and that's exactly what we want. 41 00:03:11,480 --> 00:03:15,290 One thing we don't want is this tab bar down here right. 42 00:03:15,500 --> 00:03:17,060 Let's just go to our. 43 00:03:17,090 --> 00:03:18,880 So select the view controller. 44 00:03:18,920 --> 00:03:22,690 Oh here we go in the attributes inspector just bottom. 45 00:03:22,700 --> 00:03:24,880 We don't want to hit none. 46 00:03:24,950 --> 00:03:31,900 So it's not there that will get in the way of our designs and your designer will come looking for you. 47 00:03:32,480 --> 00:03:34,370 So let's go ahead and look at that design again. 48 00:03:34,370 --> 00:03:36,860 So same as the other two view controllers. 49 00:03:36,860 --> 00:03:40,190 We need another UI image for the background. 50 00:03:40,190 --> 00:03:47,600 And then it looks like we just need another label at the top just like the log and start run Visi and 51 00:03:47,600 --> 00:03:53,980 then we need a label for a duration label for pace and a label for distance. 52 00:03:54,020 --> 00:03:56,930 So we need everything we put in our log. 53 00:03:56,930 --> 00:03:58,700 VC basically. 54 00:03:58,770 --> 00:04:00,460 So let's go ahead and get started. 55 00:04:00,470 --> 00:04:08,420 And then we need another view here just to show some opacity to make the screen prettier and then our 56 00:04:08,420 --> 00:04:12,080 cool slider buttons of course. 57 00:04:12,090 --> 00:04:12,520 All right. 58 00:04:12,570 --> 00:04:14,360 So back to this let's go ahead. 59 00:04:14,370 --> 00:04:21,660 In the object library search for you I image and drag that onto the storyboard and make sure you drag 60 00:04:21,660 --> 00:04:30,700 it all the way across the storyboard so we can make sure we pin it to the edges and not the margins. 61 00:04:30,780 --> 00:04:36,940 And if you do accidentally have it you know before the margin you can just make sure constrain the margins 62 00:04:36,940 --> 00:04:37,920 is unchecked. 63 00:04:37,980 --> 00:04:45,210 And it should go all the way forward so add those four constraints and in the attributes Inspektor find 64 00:04:45,330 --> 00:04:52,300 image and click on background and then content mode we want aspect fill. 65 00:04:52,650 --> 00:04:53,410 All right cool. 66 00:04:53,430 --> 00:04:55,400 So that is done. 67 00:04:55,950 --> 00:04:58,360 Now we need labels. 68 00:04:59,170 --> 00:05:05,020 So we need one that says On run and I'm just going to copy and paste the run here and make sure it's 69 00:05:05,170 --> 00:05:12,090 eight points from the top so the so it doesn't look weird when you're moving between VCs. 70 00:05:12,580 --> 00:05:20,580 So I'm going to go ahead and just center it there and double click on it and say on the run and let's 71 00:05:20,580 --> 00:05:29,500 go ahead and pinnate eight from the top and then we also want it horizontally center in the container. 72 00:05:30,000 --> 00:05:31,750 And that one is done. 73 00:05:31,770 --> 00:05:32,810 Perfect. 74 00:05:34,950 --> 00:05:35,510 OK. 75 00:05:35,520 --> 00:05:40,030 Now we need a label for the duration. 76 00:05:40,140 --> 00:05:46,710 So let's go ahead and I'm going to copy and paste again because I don't like setting up the UI or the 77 00:05:46,740 --> 00:05:47,700 changing the font. 78 00:05:47,700 --> 00:05:49,110 And since you already changed it. 79 00:05:49,160 --> 00:05:49,940 We're good. 80 00:05:50,190 --> 00:05:54,240 So copy control C Control V. 81 00:05:55,500 --> 00:05:56,960 There we go. 82 00:05:57,300 --> 00:06:02,710 Drag it to about there and this just needs to be a duration so we need hours. 83 00:06:02,760 --> 00:06:08,760 I have to stop holding Shift when I do that hours minutes and seconds. 84 00:06:08,940 --> 00:06:09,280 Right. 85 00:06:09,300 --> 00:06:12,020 And that looks like it's bold. 86 00:06:12,030 --> 00:06:19,630 So let's go ahead and change the font to semi bold and let's make it bigger since the screen this is 87 00:06:19,630 --> 00:06:25,700 the only in my text box is stopping me from making a bigger. 88 00:06:25,880 --> 00:06:26,650 Let's see. 89 00:06:26,660 --> 00:06:28,720 I think that looks about right. 90 00:06:28,730 --> 00:06:30,300 I think that's good. 91 00:06:30,710 --> 00:06:32,980 So we'll shrink that text box down. 92 00:06:35,570 --> 00:06:35,880 All right. 93 00:06:35,920 --> 00:06:37,510 That looks good. 94 00:06:37,510 --> 00:06:43,900 And now let's go ahead and just copy and paste this two more times. 95 00:06:43,900 --> 00:06:48,660 This will be our pace and then copy and paste and this will be our distance. 96 00:06:50,340 --> 00:06:50,810 OK. 97 00:06:50,810 --> 00:06:54,770 So our pace is just going to look like 0. 98 00:06:54,770 --> 00:06:58,290 Just you know minutes and seconds. 99 00:06:58,400 --> 00:07:03,380 Obviously if you're going slower than that and you have a high pace it will display it. 100 00:07:03,680 --> 00:07:07,400 But just for now default text is just fine. 101 00:07:08,440 --> 00:07:08,940 All right. 102 00:07:08,950 --> 00:07:15,340 And then I'm going to copy and paste the on run again because I want unbolted versions and right above 103 00:07:15,580 --> 00:07:22,030 the pace in the middle it needs to say pace and I think we should have it say average pace. 104 00:07:22,060 --> 00:07:23,470 So that isn't confusing. 105 00:07:23,470 --> 00:07:36,670 So I'm just in a avi G dot pace and then go ahead and copy and paste this again command c command V 106 00:07:38,290 --> 00:07:39,570 drag it down. 107 00:07:39,580 --> 00:07:42,310 Don't accidentally drag the paste. 108 00:07:42,370 --> 00:07:46,660 And this needs to say forward slash Mighell 109 00:07:49,650 --> 00:07:53,450 or forwards slash kilometers. 110 00:07:53,610 --> 00:07:58,460 But since I'm in the United States I'm going to stick with our our Miles. 111 00:07:58,800 --> 00:07:59,430 OK. 112 00:07:59,430 --> 00:08:04,080 And then go ahead and copy and paste this label one more time and drag it right above. 113 00:08:04,080 --> 00:08:05,330 Duration. 114 00:08:05,580 --> 00:08:13,950 Or I'm sorry distance and let's just call this distance and distance needs to be displayed as zero point 115 00:08:13,950 --> 00:08:14,720 zero. 116 00:08:16,040 --> 00:08:20,780 And the miles is actually smaller and not as bold. 117 00:08:21,020 --> 00:08:30,890 So we need to copy and paste another nonbelief label and we will just whoops zoom way out apparently. 118 00:08:31,280 --> 00:08:34,690 So go ahead and click on your miles I think. 119 00:08:34,790 --> 00:08:35,630 There we go. 120 00:08:35,640 --> 00:08:37,430 I actually dragged it behind. 121 00:08:37,430 --> 00:08:39,420 The other one. 122 00:08:39,530 --> 00:08:46,670 So go ahead and just put my am I there for miles or K.M. if you're doing kilometers and we need to just 123 00:08:46,970 --> 00:09:00,690 change the size keep drag in this go change the size of this a little smaller from 18 to probably 14. 124 00:09:01,010 --> 00:09:01,740 Yeah. 125 00:09:01,940 --> 00:09:05,950 And I think our overall distance numbers should be bigger. 126 00:09:05,960 --> 00:09:06,710 There are 25. 127 00:09:06,710 --> 00:09:11,020 Now let's make them 30 looks good. 128 00:09:11,230 --> 00:09:21,780 And then our average pace is the biggest So let's go ahead and up that let's try 40 yeah that's probably 129 00:09:21,780 --> 00:09:22,360 good. 130 00:09:23,200 --> 00:09:24,240 Done. 131 00:09:24,660 --> 00:09:28,120 And I think that looks pretty good. 132 00:09:29,820 --> 00:09:30,290 All right. 133 00:09:30,300 --> 00:09:36,680 So now we can go ahead and make some stack views so I'm going to go ahead. 134 00:09:36,790 --> 00:09:37,600 Control z. 135 00:09:37,620 --> 00:09:38,720 Don't do that. 136 00:09:38,730 --> 00:09:45,720 I mean a command selects and then command select miles down here and embed in stacked view. 137 00:09:46,230 --> 00:09:50,930 And as you can see the design has it aligned at the bottom. 138 00:09:51,060 --> 00:09:59,430 This is center so we can just go ahead and say alignment bottom but that's too far down the out went 139 00:09:59,430 --> 00:10:00,490 way below. 140 00:10:00,750 --> 00:10:02,350 So let's change the alignment. 141 00:10:02,350 --> 00:10:04,420 It's in the attribute inspector by the way. 142 00:10:04,770 --> 00:10:08,400 And let's change it to first base line. 143 00:10:08,400 --> 00:10:09,090 There we go. 144 00:10:09,090 --> 00:10:13,000 And that brings it to the bottom of the zeros there. 145 00:10:13,140 --> 00:10:21,140 And it's a little closer so let's also add some space in I think three points looks good. 146 00:10:21,140 --> 00:10:27,980 All right with this stacked view selected go ahead hit command click distance and let's embed these 147 00:10:27,980 --> 00:10:29,590 two now in a stack of you. 148 00:10:30,110 --> 00:10:31,210 And there we go. 149 00:10:31,250 --> 00:10:33,070 That looks good to me. 150 00:10:33,170 --> 00:10:36,810 It looks like they're spaced a little more so we'll add some space in the attributes. 151 00:10:36,810 --> 00:10:40,120 Inspector that's probably good. 152 00:10:40,430 --> 00:10:44,410 And now let's go ahead and do the same thing for average pasear command click. 153 00:10:44,510 --> 00:10:52,650 All three of these labels and embed and stack view and spacing is a little greater than this. 154 00:10:52,680 --> 00:10:54,640 Let's go ahead and space it out. 155 00:10:54,650 --> 00:10:56,850 I think three looks good. 156 00:10:57,850 --> 00:10:58,780 All right. 157 00:10:58,900 --> 00:11:00,670 I think that is done for now. 158 00:11:00,670 --> 00:11:11,190 Now we need our little slightly you know slightly transparent white view. 159 00:11:11,510 --> 00:11:17,450 So let's go ahead and the object library search for you I view and you don't want a view controller. 160 00:11:17,460 --> 00:11:24,960 Make sure you just grab view and drag that onto the screen onto the storyboard or view controller. 161 00:11:24,970 --> 00:11:27,490 I mean now since we did this last. 162 00:11:27,510 --> 00:11:30,550 This actually moved it in front of everything. 163 00:11:31,380 --> 00:11:34,170 And we don't want that. 164 00:11:34,250 --> 00:11:38,540 So go ahead and just drag this to kind of where we want it. 165 00:11:38,570 --> 00:11:41,850 I think that looks pretty good actually. 166 00:11:43,960 --> 00:11:49,720 We'll do that and just we're just eyeballing for now always we can always do two weeks later and see 167 00:11:49,720 --> 00:11:50,650 that the view is in front. 168 00:11:50,670 --> 00:11:55,940 And like I said the lower on this list that is where it goes so we want to actually drag this up to 169 00:11:55,950 --> 00:11:58,290 right above background. 170 00:11:58,300 --> 00:12:01,050 And you just can't see our labels because they're white. 171 00:12:01,330 --> 00:12:08,240 So now with the view selected Let's go ahead and find the background and the attribute inspector. 172 00:12:08,620 --> 00:12:14,880 And we probably want to make this like I don't know of oh it's two point three. 173 00:12:15,190 --> 00:12:16,840 Yeah that looks really good. 174 00:12:17,870 --> 00:12:21,800 All right so now with that done we can. 175 00:12:21,800 --> 00:12:23,480 Now this is the same situation. 176 00:12:23,480 --> 00:12:31,400 We don't want these this deck view to enter this view because the opacity will transfer to our labels 177 00:12:31,670 --> 00:12:32,800 and they won't look crisp. 178 00:12:32,810 --> 00:12:34,240 They'll have the same point too. 179 00:12:34,250 --> 00:12:36,070 So they'll be slightly transparent. 180 00:12:36,250 --> 00:12:39,300 So we had to be very careful with moving these around. 181 00:12:39,770 --> 00:12:47,750 But thankfully it's going to be super easy because all we want to do is center it to this view. 182 00:12:47,750 --> 00:12:54,480 So with the stacked view selected hit command and also select this other others that or this other view 183 00:12:54,530 --> 00:13:02,210 we just added and then over here in our A-line at the bottom we want horizontal centers and vertical 184 00:13:02,230 --> 00:13:09,190 centers and that will align them and you don't want it to container because this is an inside of this 185 00:13:09,200 --> 00:13:09,500 view. 186 00:13:09,500 --> 00:13:14,720 We just want these centers to match each other and add that. 187 00:13:14,840 --> 00:13:15,250 All right. 188 00:13:15,290 --> 00:13:20,720 Now we're getting a bunch of crazy red lines because this view that we just added doesn't know where 189 00:13:20,720 --> 00:13:29,730 to be so we need to pinnate zero from the right zero on the left add that. 190 00:13:29,810 --> 00:13:37,880 And then we also need to start a line aligning these guys click on the duration label and let's make 191 00:13:37,880 --> 00:13:40,670 sure that is horizontally center in container. 192 00:13:41,880 --> 00:13:49,860 And let's see I want to pin it off the run label and I think I think that is good. 193 00:13:49,860 --> 00:13:53,900 Thirty six is fine for now if we have to change it we will. 194 00:13:54,210 --> 00:13:56,250 OK that's fine. 195 00:13:56,250 --> 00:13:59,430 And then let's go ahead and 196 00:14:03,210 --> 00:14:07,590 pin this off of valuable. 197 00:14:07,860 --> 00:14:09,820 We'll just do the forty two point five. 198 00:14:09,820 --> 00:14:10,680 That's cool. 199 00:14:14,960 --> 00:14:18,400 And let's see if we can't really finish this yet. 200 00:14:18,500 --> 00:14:25,760 OK so now we just have to we have all the labels done now we need to work on our our slider our slider 201 00:14:25,760 --> 00:14:26,480 view here. 202 00:14:26,720 --> 00:14:29,220 So let's go ahead we need a image view. 203 00:14:29,240 --> 00:14:36,890 So down here in the object library go ahead and search for a UI image view and drag that out here and 204 00:14:36,950 --> 00:14:43,490 now in the attributes Inspektor you want to select the image and let's find the 205 00:14:47,270 --> 00:14:57,080 it's called something outline or run and run outline and there we go. 206 00:14:57,330 --> 00:15:02,040 And then we also want to make sure this is aspect fit right. 207 00:15:02,220 --> 00:15:06,080 And I think this is pretty good. 208 00:15:06,090 --> 00:15:08,340 We want to make sure the box stays 209 00:15:10,840 --> 00:15:12,850 really close to its edges though. 210 00:15:14,950 --> 00:15:23,840 Okay I think I want to make it just a hair smaller think something like that is good but we just want 211 00:15:23,840 --> 00:15:31,560 to make sure the image is as close to the edge as possible because we actually use the edge of this 212 00:15:31,590 --> 00:15:36,140 view for knowing where the slider should be. 213 00:15:36,480 --> 00:15:38,550 So I think that's good. 214 00:15:38,940 --> 00:15:44,450 Let's go ahead and pin this right away or I want it horizontally center in the container. 215 00:15:44,580 --> 00:15:49,230 And I know you're thinking that's weird it's going to be off like the button. 216 00:15:49,440 --> 00:15:54,030 Basically the the pause button and this should be center together. 217 00:15:54,030 --> 00:16:00,990 And what we'll do is just set the offset for this will we will click on this constraint later and we 218 00:16:00,990 --> 00:16:06,000 can actually just slide it over and we'll do that right now. 219 00:16:06,100 --> 00:16:10,090 So let's just make it like negative 25 for now. 220 00:16:10,330 --> 00:16:11,770 And I think that's good. 221 00:16:11,770 --> 00:16:20,710 And then as far as the C is yelling at us because it wants probably to know its position and down here 222 00:16:20,800 --> 00:16:22,550 it definitely needs to move down. 223 00:16:22,570 --> 00:16:24,120 So let's move this down. 224 00:16:25,820 --> 00:16:30,830 All right and we should probably I don't want it that close. 225 00:16:30,850 --> 00:16:32,700 Let's pin it here. 226 00:16:32,710 --> 00:16:39,450 Let's pinnate 40 from the bottom 40 from pinnate 40 from the margin that's fine. 227 00:16:39,820 --> 00:16:40,540 Yeah that looks good. 228 00:16:40,540 --> 00:16:42,700 We're not getting yelled at anymore. 229 00:16:43,300 --> 00:16:45,850 And so now we need to add that pause button. 230 00:16:45,850 --> 00:16:51,500 So go ahead and search for button in the object library. 231 00:16:51,580 --> 00:16:58,170 Drag that out here and in the attributes inspector just delete the label button. 232 00:16:58,330 --> 00:17:04,260 And then let's find the image called pause button and that's done. 233 00:17:04,600 --> 00:17:08,880 And I think we actually are good with this size let's just move it closer. 234 00:17:10,010 --> 00:17:11,900 Make sure it's center. 235 00:17:11,900 --> 00:17:13,600 I think that looks really good. 236 00:17:13,790 --> 00:17:14,240 Yeah. 237 00:17:14,240 --> 00:17:18,140 I mean maybe a little closer but I think we're good there. 238 00:17:18,590 --> 00:17:26,430 So let's go ahead and select this and then do a controlled drag to this outline and say horizontal spacing. 239 00:17:26,670 --> 00:17:29,000 And that's what we want that's perfect. 240 00:17:29,070 --> 00:17:33,850 And then go ahead and with that selected hit command again and select that view. 241 00:17:33,990 --> 00:17:39,870 And we want to make sure that are vertical centers are aligned with each other and we have that that's 242 00:17:39,870 --> 00:17:40,850 perfect. 243 00:17:40,860 --> 00:17:43,690 This is exactly where we want it. 244 00:17:43,840 --> 00:17:47,120 And both sides look pretty close. 245 00:17:47,250 --> 00:17:54,780 And like I said if it's not perfectly center we can just mess with this constraint to offset it however 246 00:17:54,780 --> 00:17:57,170 we want but I think that's good for now. 247 00:17:57,750 --> 00:18:05,100 OK so now we need one we need first we need a label for it says and run on there and then we also need 248 00:18:05,100 --> 00:18:10,170 another UI image view to bring that slider image in. 249 00:18:10,170 --> 00:18:11,940 So do you I image view 250 00:18:15,220 --> 00:18:18,430 drag that this can now let's see. 251 00:18:18,430 --> 00:18:19,780 I don't know if it will. 252 00:18:19,870 --> 00:18:22,160 We don't want this to be on this view. 253 00:18:22,360 --> 00:18:23,790 Whoops. 254 00:18:23,980 --> 00:18:30,650 So with this imagery you selected go to the attribute inspector and then let's find our end run button. 255 00:18:30,940 --> 00:18:31,910 There we go. 256 00:18:32,080 --> 00:18:36,640 And we want it to be aspect fit Co. 257 00:18:36,720 --> 00:18:46,540 And let's just go ahead and make the smaller we want to fit inside of this. 258 00:18:46,760 --> 00:18:50,180 I would say it's pretty good. 259 00:18:51,130 --> 00:18:54,440 Maybe like now we're just doing this by we're not. 260 00:18:54,440 --> 00:18:59,810 There's nothing precise right or wrong it's just how we want it to look. 261 00:18:59,810 --> 00:19:02,080 And I would say that's that's really good. 262 00:19:02,120 --> 00:19:07,790 Maybe it's a little further from the edge let's make it a little smaller I guess. 263 00:19:09,970 --> 00:19:10,650 OK. 264 00:19:11,390 --> 00:19:14,260 So that looks good but looks like that perfect. 265 00:19:14,540 --> 00:19:24,080 So let's go ahead and what we want to do is select that view and then hold command and select the background 266 00:19:24,080 --> 00:19:33,560 view and we want these horizontal the vertical centers as well are right and now we want to do is make 267 00:19:33,560 --> 00:19:40,250 sure the backgrounds is not selected anymore and select this button and do a controlled drag to the 268 00:19:40,250 --> 00:19:45,610 left and just to the background we don't want to accidentally go to the background here. 269 00:19:45,770 --> 00:19:53,010 You want the horizontal space into the the end run outline and do horizontal spacing and there we go. 270 00:19:53,010 --> 00:19:55,930 And it kind of moved it over which we don't want. 271 00:19:56,220 --> 00:19:59,410 So if it did that to you we're just going to find this constraint. 272 00:19:59,430 --> 00:20:01,320 And if you hover over it it will highlight. 273 00:20:01,320 --> 00:20:05,640 You can click on it and the constraint is negative 73. 274 00:20:05,640 --> 00:20:10,930 So if we keep going negative it moves it because it pinned it from the right side for whatever reason. 275 00:20:11,130 --> 00:20:14,480 But that doesn't matter too much in this case. 276 00:20:14,520 --> 00:20:20,440 So we can just go ahead and up this number and move it so it's exactly what we want it again. 277 00:20:20,640 --> 00:20:23,100 And I think that's good. 278 00:20:23,100 --> 00:20:24,880 There we go. 279 00:20:24,900 --> 00:20:28,200 So now we need our end run label. 280 00:20:28,200 --> 00:20:29,870 So go ahead and object. 281 00:20:30,120 --> 00:20:35,990 Actually we're going to just copy and paste copy and paste the distance label here. 282 00:20:36,000 --> 00:20:43,350 Copy and then right here paste. 283 00:20:43,420 --> 00:20:44,570 All right. 284 00:20:44,710 --> 00:20:53,610 And we want to make sure that this label in the scene over here in the seen tree is behind. 285 00:20:54,010 --> 00:20:57,730 So on top of the end button so it slides over it. 286 00:20:57,850 --> 00:20:58,780 All right. 287 00:20:58,780 --> 00:21:04,990 So let's go ahead and just click on that and this will be called and run. 288 00:21:05,200 --> 00:21:06,850 And I think that looks pretty good. 289 00:21:06,850 --> 00:21:11,400 Maybe it's a little smaller let's just change the font to 16. 290 00:21:11,410 --> 00:21:12,660 That's great. 291 00:21:12,940 --> 00:21:21,340 And now we want this to be censure. 292 00:21:21,960 --> 00:21:26,890 We don't want it center to the background view but we also don't want it referencing the whole visi. 293 00:21:27,150 --> 00:21:33,660 So I'm going to select this label and then select the background view and I'm going to go ahead and 294 00:21:33,660 --> 00:21:36,290 say vertical and horizontal centers. 295 00:21:36,690 --> 00:21:38,140 And it's going to move it over. 296 00:21:38,490 --> 00:21:45,510 But then with the label selected just select this horizontal constraint and let's just go ahead and 297 00:21:45,540 --> 00:21:56,150 increase it and it'll offset it to where we want it and we'll just eyeball it to almost looks center. 298 00:21:56,260 --> 00:21:57,660 And I think that looks good. 299 00:21:59,540 --> 00:22:01,050 Maybe a little too much. 300 00:22:01,070 --> 00:22:02,910 Make it like 28 points. 301 00:22:03,170 --> 00:22:04,420 So I think that's good. 302 00:22:07,340 --> 00:22:11,290 And now we just have to worry about where our stack views are. 303 00:22:11,300 --> 00:22:12,910 No just this view. 304 00:22:12,920 --> 00:22:15,320 All right so this view right here. 305 00:22:15,320 --> 00:22:24,360 Now we need to let's see we need to just pin this to the label or to the stack be below it. 306 00:22:24,360 --> 00:22:34,110 So with this view if you have trouble clicking on it you should just pin it 41 below it's fine and it's 307 00:22:34,110 --> 00:22:37,320 all still red because this label also doesn't know where to be. 308 00:22:37,680 --> 00:22:39,300 So select that. 309 00:22:39,330 --> 00:22:46,590 And let's just pin that now to the slider switch which is 1 0 9 right. 310 00:22:47,120 --> 00:22:52,150 And let's see it looks like this deck view isn't happy. 311 00:22:52,320 --> 00:22:55,720 Oh we need to make sure it's Center in. 312 00:22:55,730 --> 00:23:00,740 So go ahead and do the alignment constraints and we want to horizontal in container. 313 00:23:00,770 --> 00:23:01,750 There we go. 314 00:23:01,760 --> 00:23:09,210 Now let's just do a quick run through make sure everything is happy nothing's yelling at us. 315 00:23:09,330 --> 00:23:09,740 All right. 316 00:23:09,760 --> 00:23:10,250 Sweet. 317 00:23:10,290 --> 00:23:12,840 So that is this video. 318 00:23:12,840 --> 00:23:15,250 Before we wrap things up let's go ahead and pull up. 319 00:23:15,250 --> 00:23:27,510 Terminal do a get ad period get commit dash em and we will call this the current run we see you. 320 00:23:27,500 --> 00:23:31,510 I set up and that is good. 321 00:23:32,000 --> 00:23:34,060 And we will call is video done. 322 00:23:34,070 --> 00:23:43,210 And if you want to jump ahead you guys should set up the the actual VC and connected to this storyboard. 323 00:23:43,610 --> 00:23:47,270 We didn't actually create the file yet so you should create the VC. 324 00:23:47,270 --> 00:23:51,340 And what will what I'm going to call it is current run visi. 325 00:23:51,350 --> 00:23:57,530 So if you want to keep your naming conventions the same as me it will be current run Visi and I will 326 00:23:57,530 --> 00:23:58,440 see you in the next lesson.