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