1 00:00:07,960 --> 00:00:13,110 Hey everybody this is Caleb with slopes dot com and in this video we're going to build out create gold 2 00:00:13,130 --> 00:00:18,660 Visi which is the first view controller that's presented when we want to start creating a goal that's 3 00:00:18,670 --> 00:00:23,320 where we're going to give it a description and where we're going to set the gold type short term or 4 00:00:23,320 --> 00:00:24,090 long term. 5 00:00:24,850 --> 00:00:25,390 Let's build it. 6 00:00:25,390 --> 00:00:28,090 Now it's pretty easy so let's just do it now. 7 00:00:28,090 --> 00:00:33,590 Open up your X code project and go into main dot storyboard. 8 00:00:33,610 --> 00:00:39,060 Now of course as you may be expecting we are going to drag in a UI View Controller. 9 00:00:39,280 --> 00:00:42,850 So go ahead and search for that and pull one in here. 10 00:00:42,850 --> 00:00:43,990 There we go. 11 00:00:43,990 --> 00:00:44,580 Looks good. 12 00:00:44,590 --> 00:00:50,290 And what we're going to do is we're going to first copy this goalpost banner select our table view and 13 00:00:50,290 --> 00:00:56,590 paste it then we're going to drag it up to the top and we're going to pin it from the left top and right 14 00:00:56,770 --> 00:00:58,170 0 OK. 15 00:00:58,390 --> 00:01:03,600 It already has a height constraint of 70 so just tap add three constraints and you're good to go. 16 00:01:03,910 --> 00:01:10,420 Now I normally would not do this copying and pasting but it's just easier and faster for the intents 17 00:01:10,420 --> 00:01:11,900 and purposes of this app. 18 00:01:12,160 --> 00:01:17,800 But the only thing we need to think about is that we have set up some IP outlets one especially on this 19 00:01:17,800 --> 00:01:18,260 button. 20 00:01:18,280 --> 00:01:21,110 And if you right click you'll see that this is still linked to goals. 21 00:01:21,110 --> 00:01:22,500 VC we don't want that. 22 00:01:22,510 --> 00:01:28,230 So click on the X to remove it and it's now no longer associated with any view controller. 23 00:01:28,270 --> 00:01:33,030 This button is going to be actually used as a back button on the left side of the screen over here. 24 00:01:33,030 --> 00:01:35,590 So we need to move it and then set up its constraints again. 25 00:01:35,590 --> 00:01:39,780 But I want it to basically be in the same place just mirrored on the other side. 26 00:01:39,790 --> 00:01:45,100 So to do that what we're going to do is we're going to pay attention to the trailing space constraint 27 00:01:45,430 --> 00:01:47,980 and replicate it with the leading space constraint. 28 00:01:47,980 --> 00:01:54,010 So get rid of that delete it and then we're going to go ahead and just pin it like so Fifteen from the 29 00:01:54,010 --> 00:01:55,430 leading edge. 30 00:01:56,200 --> 00:01:57,660 Oh you know what that's not right. 31 00:01:57,700 --> 00:01:58,450 Silly me. 32 00:01:58,450 --> 00:01:59,700 That's not going to work. 33 00:01:59,710 --> 00:02:04,780 So we're going to actually get rid of that and we need to physically move it first then we can set it 34 00:02:04,780 --> 00:02:11,560 to be 15 from the leading edge so select it now that you've moved to the left side and make it 15 from 35 00:02:11,560 --> 00:02:12,770 the leading edge. 36 00:02:12,820 --> 00:02:13,310 Awesome. 37 00:02:13,330 --> 00:02:14,310 That looks great. 38 00:02:14,380 --> 00:02:18,930 And of course it's still aligned to the stack view which is aligned in the center. 39 00:02:19,000 --> 00:02:21,800 And then about 15 from the bottom. 40 00:02:21,820 --> 00:02:22,830 So that's great. 41 00:02:22,840 --> 00:02:26,560 But now we need to fix the the image to actually show a back button. 42 00:02:26,590 --> 00:02:32,330 So select the attributes inspector and change the image from ADD goal to back. 43 00:02:32,530 --> 00:02:36,880 And now we have a cool back button we can use to go back to this view controller. 44 00:02:36,900 --> 00:02:38,040 OK we can dismiss. 45 00:02:38,050 --> 00:02:40,960 We decided that we want to cancel for some reason. 46 00:02:40,960 --> 00:02:47,530 OK so next we're going to go ahead and put in a text view here which is going to show us or allow us 47 00:02:47,530 --> 00:02:49,300 rather to type. 48 00:02:49,840 --> 00:02:50,500 Our goal. 49 00:02:50,550 --> 00:02:52,230 The what we want for the description. 50 00:02:52,510 --> 00:02:59,830 So go ahead and type UI text view and drag one in like so can we're just going to scale it to be about 51 00:02:59,890 --> 00:03:03,800 Yea big doesn't have to be exact but that's pretty good. 52 00:03:04,150 --> 00:03:11,220 And we're going to get rid of this Latin boilerplate text and delete it and we're going to just type. 53 00:03:11,590 --> 00:03:13,520 What is your goal. 54 00:03:14,290 --> 00:03:14,650 OK. 55 00:03:14,680 --> 00:03:15,920 And press Enter now. 56 00:03:15,940 --> 00:03:21,550 This is going to be our placeholder because a text view actually doesn't have an inherent placeholder 57 00:03:21,550 --> 00:03:25,270 that we can get to unless we make it attributed K like so. 58 00:03:25,480 --> 00:03:30,580 But even then it's not truly a placeholder so we're going to just create a plain one and we're going 59 00:03:30,580 --> 00:03:33,660 to change the font K so choose Custom. 60 00:03:33,730 --> 00:03:37,080 And sometimes if you do that it won't let you choose one but looks like. 61 00:03:37,090 --> 00:03:37,600 OK good. 62 00:03:37,610 --> 00:03:38,860 No it's going to let us. 63 00:03:39,130 --> 00:03:42,440 And instead of regular Let's actually make it medium. 64 00:03:42,520 --> 00:03:47,550 So it's a little bit beefier and we're going to change the font size up to about 18 or so. 65 00:03:47,640 --> 00:03:47,840 OK. 66 00:03:47,860 --> 00:03:49,500 That looks awesome. 67 00:03:49,510 --> 00:03:54,000 And now since this is placeholder text we're going to make it light gray. 68 00:03:54,260 --> 00:03:56,280 So it's kind of hovering in the background. 69 00:03:56,290 --> 00:04:01,090 And then when we are editing it later we're going to change the font color to black OK and I will clear 70 00:04:01,090 --> 00:04:02,060 this out as well. 71 00:04:02,380 --> 00:04:03,940 So that looks good. 72 00:04:03,940 --> 00:04:10,430 And now we need to basically create two buttons one for short term goal and one for a long term goal. 73 00:04:10,450 --> 00:04:16,760 So go ahead and type you button whips and drag one on like so. 74 00:04:17,090 --> 00:04:17,610 OK. 75 00:04:17,830 --> 00:04:19,830 And we're going to go ahead and duplicate it. 76 00:04:19,840 --> 00:04:21,060 We have to. 77 00:04:21,340 --> 00:04:28,880 Like I said go ahead and double click one is for short term goals and the other is for long term goals. 78 00:04:28,880 --> 00:04:30,150 All righty. 79 00:04:30,370 --> 00:04:36,010 And let's think we want these to match our themes so let's change the font of both of these like so 80 00:04:36,280 --> 00:04:39,490 by going to custom Avenir next. 81 00:04:39,550 --> 00:04:48,010 And let's make these both Demy bold maybe even fully bold fully bold looks cool and let's lower the 82 00:04:48,010 --> 00:04:51,190 font size to maybe 14. 83 00:04:51,190 --> 00:04:59,020 All right let's change the background to match our green border bar here and blue font on green looks 84 00:04:59,020 --> 00:04:59,860 real bad. 85 00:04:59,890 --> 00:05:02,190 So we're going to change that to white. 86 00:05:02,220 --> 00:05:02,760 All right. 87 00:05:02,770 --> 00:05:04,390 That looks pretty cool. 88 00:05:04,420 --> 00:05:09,650 Now we need to go ahead and these into a stack view so that we can keep them together and space them 89 00:05:09,680 --> 00:05:12,150 equally and set their height equally. 90 00:05:12,170 --> 00:05:14,580 So go ahead and stack view them stack. 91 00:05:14,600 --> 00:05:15,850 You ify. 92 00:05:15,950 --> 00:05:16,850 Very cool. 93 00:05:16,850 --> 00:05:21,020 And we're going to go ahead and actually just drag this stack if you like. 94 00:05:21,010 --> 00:05:26,140 So up to about here and then we're going to go ahead and just. 95 00:05:26,510 --> 00:05:27,740 Well not yet. 96 00:05:27,740 --> 00:05:31,130 We're not going to give it constraint yet because we need to put a label here that basically just says 97 00:05:31,130 --> 00:05:34,600 Choose one that allows the user to know what they should do. 98 00:05:34,910 --> 00:05:45,770 So type label and drag on a label and let's just say select one can stretch it to fit and then we're 99 00:05:45,770 --> 00:05:48,760 going to change the font also so choose kust. 100 00:05:49,010 --> 00:05:50,880 You know the drill Avenir next. 101 00:05:50,900 --> 00:05:59,920 And you know what let's make it medium and let's lower it to size 10 that's too small maybe 12 or 14 102 00:06:01,280 --> 00:06:02,510 14 is good. 103 00:06:02,510 --> 00:06:08,180 And sometimes black is just a little bit too intense and too dark so we're actually going to choose 104 00:06:08,180 --> 00:06:11,590 dark gray color which can just sometimes look a little better. 105 00:06:11,690 --> 00:06:19,520 So let's go ahead and let's put all of these into a stack view OK so select all three and choose stack. 106 00:06:19,780 --> 00:06:20,540 OK. 107 00:06:20,570 --> 00:06:25,200 Now we're going to go ahead and fill so that it fills the entire width of the screen. 108 00:06:25,640 --> 00:06:30,470 But for this stack view our bottom most stack view we want these to be filling equally. 109 00:06:30,470 --> 00:06:31,090 Right. 110 00:06:31,400 --> 00:06:36,020 So what we're going to do is we're going to choose fill equally and then they're the same size. 111 00:06:36,020 --> 00:06:38,270 K very cool. 112 00:06:38,460 --> 00:06:43,100 Now we want there to be space in between them so let's give them maybe 20 points of space in the middle 113 00:06:43,730 --> 00:06:45,440 and then for our stack view. 114 00:06:45,860 --> 00:06:50,330 The big one with the text view in the label we're going to give 20 points of space as well. 115 00:06:50,570 --> 00:06:51,240 OK. 116 00:06:51,620 --> 00:06:53,240 Although you know what. 117 00:06:53,630 --> 00:06:55,670 This is kind of floating way out in space there. 118 00:06:55,670 --> 00:06:56,480 That doesn't look so good. 119 00:06:56,480 --> 00:06:59,250 So maybe 10 points of space would be better. 120 00:06:59,270 --> 00:07:00,650 That looks a lot better. 121 00:07:00,770 --> 00:07:06,350 And for this stack view these buttons I think should be kind of around the same thickness as our border 122 00:07:06,790 --> 00:07:09,240 are or are not our border but our navigation bar. 123 00:07:09,260 --> 00:07:15,710 So let's go ahead and let's set a height constraint for this one to be maybe 50 and let's see how that 124 00:07:15,710 --> 00:07:17,450 looks. 125 00:07:17,450 --> 00:07:18,020 Yeah. 126 00:07:18,350 --> 00:07:20,470 You know what I think I like that that looks pretty good. 127 00:07:20,810 --> 00:07:23,460 Now what we're going to do for selection. 128 00:07:23,480 --> 00:07:29,630 For instance if I tap on short term it's going to be green like this but if I have not yet selected 129 00:07:29,630 --> 00:07:33,860 long term it's going to have kind of a de-selected color like it's sort of faded. 130 00:07:34,010 --> 00:07:39,060 And then if I tap on long term it'll turn this bright green and short term will turn the faded green. 131 00:07:39,170 --> 00:07:45,790 So change the background color of long term initially to be this color which is like a faded green. 132 00:07:45,800 --> 00:07:50,110 And if you're interested that is B to D da f and. 133 00:07:50,120 --> 00:07:50,420 Yeah. 134 00:07:50,430 --> 00:07:54,860 So now that appears to be de-selected and we'll write an extension in the next video that will allow 135 00:07:54,860 --> 00:07:58,110 us to tap on the button and change its background color. 136 00:07:58,220 --> 00:07:59,360 Really cool. 137 00:07:59,360 --> 00:08:00,940 So this looks awesome. 138 00:08:00,950 --> 00:08:06,200 Now the only thing that we have left to do is to add the next button and the next button is what is 139 00:08:06,200 --> 00:08:09,770 going to allow us to move next to the next you view controller. 140 00:08:09,770 --> 00:08:15,550 So go ahead and type UI button and we're going to drag on one more k and it's going to go here. 141 00:08:15,680 --> 00:08:20,060 Now we're going to go ahead and put this on the very bottom of our view and we're going to stretch it 142 00:08:20,420 --> 00:08:24,710 until it is about let's see where this button is is how high. 143 00:08:24,710 --> 00:08:26,870 I can't remember it is 50 high. 144 00:08:26,870 --> 00:08:29,470 So let's make this button 50 as well. 145 00:08:29,990 --> 00:08:30,260 OK. 146 00:08:30,260 --> 00:08:31,190 That looks great. 147 00:08:31,430 --> 00:08:33,890 And let's go ahead and keep it at the bottom. 148 00:08:33,890 --> 00:08:39,590 Let's pin it from the bottom and left and right 0 and let's give it a fixed height of 50 is that it 149 00:08:39,590 --> 00:08:40,640 stays there. 150 00:08:41,060 --> 00:08:42,140 Add those four constraints. 151 00:08:42,140 --> 00:08:47,960 And now let's go ahead and set up the color font text color and background color. 152 00:08:47,960 --> 00:08:57,140 So choose fonts change it from custom and go ahead and type Avenir next set it to be bold like are other 153 00:08:57,140 --> 00:08:57,810 buttons. 154 00:08:58,130 --> 00:09:01,460 And I think size 20 is probably good. 155 00:09:01,550 --> 00:09:02,150 Go ahead and type. 156 00:09:02,150 --> 00:09:04,620 Next in all caps and press enter. 157 00:09:04,670 --> 00:09:10,900 And now we can set the background color to be this yellow color which if you're interested is either 158 00:09:10,910 --> 00:09:12,930 a 9 4 or 4. 159 00:09:12,950 --> 00:09:14,750 Now that blue text is giving me a headache. 160 00:09:14,750 --> 00:09:18,950 So change it to white because that just looks much better and awesome. 161 00:09:18,950 --> 00:09:20,350 Guys this is really cool. 162 00:09:20,390 --> 00:09:22,880 This is really coming together. 163 00:09:23,000 --> 00:09:27,050 But you know what we have not set constraints for this stack for you so it's just kind of floating out 164 00:09:27,050 --> 00:09:28,320 in outer space. 165 00:09:28,670 --> 00:09:28,950 Yeah. 166 00:09:28,970 --> 00:09:29,540 No we haven't. 167 00:09:29,540 --> 00:09:34,100 So go ahead and select the pin button with the stack you selected. 168 00:09:34,100 --> 00:09:40,690 And we're going to pin it let's do 20 from the top 20 from the right and 20 from the left or right to 169 00:09:40,880 --> 00:09:46,640 the left and 20 from the right add three constraints and you'll see it gets pinched in nicely and it's 170 00:09:46,640 --> 00:09:52,520 going to go ahead and stay there but we should also set an explicit height just so that it's not stretched 171 00:09:52,580 --> 00:09:57,110 or modified in any way because we actually this is a good height for everything. 172 00:09:57,110 --> 00:10:05,000 So let's give it a height of let's do two hundred sixty and press add one constraint just like that. 173 00:10:05,030 --> 00:10:06,290 Very very cool. 174 00:10:06,730 --> 00:10:09,750 OK so I think we should go ahead and test out this view controller. 175 00:10:09,760 --> 00:10:11,110 Let's see if we can present it. 176 00:10:11,140 --> 00:10:15,820 And to do that I'm just going to go ahead and right click and drag to create an interface builder segue 177 00:10:16,090 --> 00:10:20,530 and we're going to present it modals So it just pops up over the top of our view controller and we will 178 00:10:20,530 --> 00:10:24,800 delete this in just a moment because we're going to be presenting these in a different way. 179 00:10:24,910 --> 00:10:28,630 But for now this will be a great way to just test if our UI looks good. 180 00:10:28,630 --> 00:10:33,760 So let's go ahead and build and run and when it loads and pops up we're going to be able to see whether 181 00:10:33,760 --> 00:10:36,940 our our interface that we've built looks nice. 182 00:10:36,940 --> 00:10:41,350 So click on the Add button and you know what guys. 183 00:10:41,350 --> 00:10:42,370 That looks pretty darn good. 184 00:10:42,370 --> 00:10:45,370 I really like that super smooth. 185 00:10:45,370 --> 00:10:49,420 We're going to modify it in a little bit so that these buttons can actually change color and we can 186 00:10:49,420 --> 00:10:51,130 change the selection type. 187 00:10:51,130 --> 00:10:52,750 But our textfield looks good. 188 00:10:52,750 --> 00:10:56,580 We're going to set it up later so that we can actually as soon as we tap on it. 189 00:10:56,590 --> 00:11:01,900 What is your goal goes way and we're also set up so that this view controller when we tap this button 190 00:11:01,960 --> 00:11:04,660 it dismisses from the right instead of popping down. 191 00:11:04,870 --> 00:11:08,060 OK supercool So this is great we're super close. 192 00:11:08,080 --> 00:11:12,820 Let's go ahead and let's set up the Iby outlets and the actions that we're going to need in order to 193 00:11:12,820 --> 00:11:14,180 use this view controller. 194 00:11:14,470 --> 00:11:18,430 And we also need to create the control of file we haven't created that yet. 195 00:11:18,430 --> 00:11:24,260 So right click on controller click new file and select Cocco touch class. 196 00:11:24,310 --> 00:11:29,810 We're going to be subclassing you Ibu controller and let's go ahead and call it create goal visi. 197 00:11:29,890 --> 00:11:35,950 Because this is where we start creating the goal press create and we can get rid of this stuff here 198 00:11:35,950 --> 00:11:39,800 we don't need it but we do need you to load. 199 00:11:39,850 --> 00:11:42,260 Ok so just get rid of the comment there. 200 00:11:42,280 --> 00:11:48,160 And now in storyboard we're going to go ahead and select this controller and set its identity to be 201 00:11:48,160 --> 00:11:49,590 create gold visi. 202 00:11:49,870 --> 00:11:52,750 So do that now and press enter. 203 00:11:52,920 --> 00:11:57,070 OK now we can connect these with outlets to our view controller file. 204 00:11:57,070 --> 00:12:03,850 So open the assistant editor and make sure that you have this controller selected and you should be 205 00:12:03,850 --> 00:12:05,340 able to find it in automatic. 206 00:12:05,340 --> 00:12:06,490 Like I can. 207 00:12:07,060 --> 00:12:12,160 Next we're going to go ahead and create outlets for the text you for both of these buttons because we're 208 00:12:12,160 --> 00:12:16,930 going to need to modify the background color property and we're also going to create one for the next 209 00:12:16,930 --> 00:12:20,630 button because we're going to modify that as well so that it can slide up with the keyboard. 210 00:12:20,680 --> 00:12:25,810 So right click and drag from the text view make sure it's actually the text view and we're going to 211 00:12:25,810 --> 00:12:34,150 call this goal text view and press create a supercooled make some space here. 212 00:12:34,300 --> 00:12:40,630 Next right click from the short term button and call it short term button could do the same thing for 213 00:12:40,630 --> 00:12:44,620 the long term button long term button. 214 00:12:44,620 --> 00:12:45,860 Awesome. 215 00:12:45,910 --> 00:12:50,560 And from the next button can create one for that as well. 216 00:12:50,560 --> 00:12:51,060 Awesome. 217 00:12:51,070 --> 00:12:52,390 So that's great. 218 00:12:52,390 --> 00:12:53,860 Get rid of that unneeded space. 219 00:12:53,890 --> 00:12:57,420 And below you did load We're going to create some Iby actions. 220 00:12:57,430 --> 00:12:58,240 OK. 221 00:12:58,360 --> 00:13:03,220 Now one of the Iby actions is going to be for the next button of course because when we press that we're 222 00:13:03,220 --> 00:13:06,370 going to need to use it to move on to the next few controller. 223 00:13:06,370 --> 00:13:14,000 So right click from the next button change it to action and call next button was pressed. 224 00:13:14,180 --> 00:13:18,360 OK press connect and you'll get a little function here you can put stuff in. 225 00:13:18,370 --> 00:13:19,780 Very cool. 226 00:13:19,780 --> 00:13:28,240 Go ahead and create another one for the short term button called a short term button was pressed press 227 00:13:28,240 --> 00:13:32,150 connect do one for the long term button as well. 228 00:13:32,350 --> 00:13:35,510 Long term button was pressed. 229 00:13:35,650 --> 00:13:39,480 Make sure that it's an action don't make that mistake and connect it. 230 00:13:39,550 --> 00:13:41,190 All right supercool. 231 00:13:41,530 --> 00:13:43,790 And you know what I think that that is good. 232 00:13:43,810 --> 00:13:47,620 Oh you know you know what we have a back button here that needs to dismiss our view controller. 233 00:13:47,620 --> 00:13:54,610 So right click and we're going to put this down underneath long term and next button make it an action 234 00:13:54,970 --> 00:13:59,290 and go ahead and type back button was pressed. 235 00:13:59,290 --> 00:13:59,750 Awesome. 236 00:13:59,770 --> 00:14:01,550 And you know what we can set this up right now. 237 00:14:01,630 --> 00:14:03,920 We can just call dismiss. 238 00:14:03,970 --> 00:14:06,490 Animated is true and completion is nil. 239 00:14:06,490 --> 00:14:07,930 We don't care about what happens at the end. 240 00:14:07,930 --> 00:14:09,550 We just want it to dismiss. 241 00:14:09,550 --> 00:14:10,600 So that's awesome. 242 00:14:10,930 --> 00:14:12,400 We we should go test this out. 243 00:14:12,400 --> 00:14:18,170 We should make sure this works and that are dismissed button works as well so go ahead and press BuildOn 244 00:14:18,220 --> 00:14:20,920 run and pull open the simulator. 245 00:14:20,920 --> 00:14:26,590 We're going to check to see if our back button works and if we've properly set up our Iby outlets and 246 00:14:26,590 --> 00:14:29,170 actions so press the add button. 247 00:14:29,170 --> 00:14:30,380 This looks good. 248 00:14:30,500 --> 00:14:31,990 OK we can select all of these. 249 00:14:31,990 --> 00:14:32,830 These are all here. 250 00:14:32,860 --> 00:14:34,140 Nothing is crashing. 251 00:14:34,240 --> 00:14:41,380 And when we press our back button it properly dismisses super super cool amazing work guys in the next 252 00:14:41,380 --> 00:14:46,900 video we're going to write an extension of you view controller that's going to allow us to present this 253 00:14:46,900 --> 00:14:52,600 view controller from the left and right instead of from top to bottom so that it looks like a UI navigation 254 00:14:52,600 --> 00:14:53,360 controller. 255 00:14:53,380 --> 00:14:54,640 It's pretty cool. 256 00:14:54,640 --> 00:14:58,900 And you're going to learn some fun stuff about C-A animations and all kinds of stuff like that. 257 00:14:58,900 --> 00:15:02,280 So let's go ahead and let's head over to that video right now.