1 00:00:02,750 --> 00:00:09,230 It is what's up everyone right here at deps dot com. 2 00:00:09,230 --> 00:00:14,240 And in this video we are going to start our swoosh app and we're going to learn a little bit about user 3 00:00:14,240 --> 00:00:19,460 interface and Interface Builder some of the caveats that come with that and how you should overall set 4 00:00:19,460 --> 00:00:21,050 up your project for user interface. 5 00:00:21,050 --> 00:00:23,280 And we're going to build a custom control. 6 00:00:23,630 --> 00:00:32,810 So we got some designs here as you can see and the idea behind this app is it's a an app where you can 7 00:00:32,810 --> 00:00:35,970 get with other people and play basketball games pickup games. 8 00:00:35,990 --> 00:00:40,150 And so we're going to build out all the features and location and things like that. 9 00:00:40,160 --> 00:00:45,740 But it's always important at least for me and in teaching to see real world apps and how you might actually 10 00:00:45,740 --> 00:00:48,080 build things for a consumer facing application. 11 00:00:48,090 --> 00:00:53,180 So we're going to do everything for this app and of course in this course as you might do professionally 12 00:00:53,180 --> 00:00:54,860 we're not going to cut any corners. 13 00:00:54,890 --> 00:00:56,870 So let's go ahead and get started. 14 00:00:56,870 --> 00:01:03,500 First things first is as always we want to create a repository for this you'll want to do the same here 15 00:01:04,070 --> 00:01:10,060 and I'm going to create one for my course iOS 11 here and I'm going to create a repository and call 16 00:01:10,100 --> 00:01:14,210 this app dash swoosh. 17 00:01:14,640 --> 00:01:15,240 OK. 18 00:01:15,680 --> 00:01:21,770 Great repository and all I'm going to do here is grab this S-sh key to get this here. 19 00:01:21,790 --> 00:01:27,360 Now of course you can download the source code and check out different branches for the final code. 20 00:01:27,530 --> 00:01:30,520 But it's good for you to follow along and create your own branches on your own. 21 00:01:30,520 --> 00:01:32,910 Get help or bit bucket repository. 22 00:01:32,930 --> 00:01:40,660 And so what I'm going to do now is make sure I'm in my apps directory so present working directory. 23 00:01:40,690 --> 00:01:45,850 I am in the Swiss directory are all going to do is say get clone and I'm going to clone the repo 24 00:01:48,780 --> 00:01:51,170 and I've Colona empty repository which is fine. 25 00:01:51,180 --> 00:01:54,300 I'm going to CD into the app swoosh and there we go. 26 00:01:54,450 --> 00:01:58,980 So what I'm going to do now is I'm going to create an empty X code project here or a default X code 27 00:01:58,980 --> 00:02:02,850 project so I'm going to open the X code beta for the X. 28 00:02:02,880 --> 00:02:06,300 If x is released of course use the published version. 29 00:02:06,630 --> 00:02:11,870 And what we'll do is we'll create a new project single view application is what we want it's just going 30 00:02:11,880 --> 00:02:20,370 to have one view that gets other views click next and we're going to call this app swoosh and you can 31 00:02:20,370 --> 00:02:23,610 fill in in your own information here which is fine if you have a team that's great you may not have 32 00:02:23,610 --> 00:02:27,270 a team which is fine and of course Swift is very important. 33 00:02:27,270 --> 00:02:28,150 Click next. 34 00:02:28,260 --> 00:02:34,200 And what I'm going to do is I'm going to put this in its proper folder so courses and lessons and you 35 00:02:34,200 --> 00:02:39,630 can put yours wherever you want swoosh swoosh and I'm going to put it in right here. 36 00:02:40,900 --> 00:02:41,320 Perfect. 37 00:02:41,320 --> 00:02:42,310 So here's my project. 38 00:02:42,310 --> 00:02:43,460 Ready to go. 39 00:02:44,530 --> 00:02:47,110 Here we have the default project information here. 40 00:02:47,110 --> 00:02:50,470 Nothing is overly important to play with at this point in time. 41 00:02:50,590 --> 00:02:54,850 But there are some things that you can do YOU CAN MAKE IT sport upside down or turn off landscape or 42 00:02:54,850 --> 00:02:58,910 turn you know turn it on and we're just gonna leave all these things as default here. 43 00:02:58,990 --> 00:03:01,410 And so you're going to notice a few files here in your project. 44 00:03:01,450 --> 00:03:05,340 The app delegate which of course is the starting point for your application. 45 00:03:05,350 --> 00:03:10,000 We aren't going to touch that we'll leave that as is and it's giving us a default view controller does 46 00:03:10,000 --> 00:03:10,550 Swift. 47 00:03:10,660 --> 00:03:13,840 This is the code for the default view controller that your app loads with. 48 00:03:13,870 --> 00:03:17,720 And of course all apps have a default view controller. 49 00:03:18,110 --> 00:03:20,900 OK so that's there and that's important to understand. 50 00:03:20,980 --> 00:03:25,930 And then we've got our main story board and this is where the default view controller has been placed 51 00:03:25,930 --> 00:03:26,660 for us. 52 00:03:26,740 --> 00:03:31,900 OK we let that happen automatically and we could have created all this from scratch included a storyboard 53 00:03:31,900 --> 00:03:34,170 and all those different things and dragged a view controller on here. 54 00:03:34,180 --> 00:03:37,740 But the defaults are all fine for now because we want to get up and going. 55 00:03:37,740 --> 00:03:39,090 Building and. 56 00:03:39,670 --> 00:03:44,560 And so we get a view here which is the main view and that's where we're going to drag and drop other 57 00:03:44,560 --> 00:03:45,150 views on. 58 00:03:45,280 --> 00:03:48,190 And you can hover over this little icon here at the bottom right. 59 00:03:48,190 --> 00:03:49,920 This is the object library. 60 00:03:50,230 --> 00:03:53,400 And this is where we're actually drags some views onto the screen. 61 00:03:53,590 --> 00:03:58,690 OK but before we can drag views we got to look at the layout design here and see what we're actually 62 00:03:58,690 --> 00:03:59,660 supposed to build. 63 00:03:59,820 --> 00:04:01,710 And so we're going to build this first screen here. 64 00:04:01,780 --> 00:04:03,060 It's the welcome screen. 65 00:04:03,430 --> 00:04:05,210 And notice how there's a logo. 66 00:04:05,260 --> 00:04:06,760 There's some text here. 67 00:04:06,760 --> 00:04:08,160 There's a background image. 68 00:04:08,200 --> 00:04:09,960 There's more text here and there's a button. 69 00:04:09,970 --> 00:04:15,200 So I'd say one two three four five six six elements on the screen. 70 00:04:15,220 --> 00:04:17,240 Probably that we need to build. 71 00:04:17,410 --> 00:04:22,290 And of course we don't have the assets in our project get for the swish logo or for the background. 72 00:04:22,390 --> 00:04:25,030 So we're going to need to grab those now as well. 73 00:04:25,390 --> 00:04:33,230 So what I want to do is I'm going to go into my Dropbox folder here and we're going to go into courses 74 00:04:33,250 --> 00:04:40,180 and lessons Iowa 11 app designs and here's the swooshed designs and the assets have been exported for 75 00:04:40,180 --> 00:04:41,110 us already. 76 00:04:41,260 --> 00:04:41,850 Okay. 77 00:04:42,070 --> 00:04:48,790 And one thing I want to point out here is that we've exported these assets within at 2 x 3 x although 78 00:04:48,790 --> 00:04:53,060 it looks like we missed it for the logo here which I'll add that as well too. 79 00:04:53,200 --> 00:04:59,380 But basically when it comes to graphics and I always development if you just implement one graphic it's 80 00:04:59,380 --> 00:05:01,330 going to be used for all screen densities. 81 00:05:01,330 --> 00:05:05,950 And so the non 2 x and non 3x that's your lowest resolution file. 82 00:05:06,030 --> 00:05:06,330 Okay. 83 00:05:06,340 --> 00:05:11,860 And those are use on older phones like the iPhone 4 and for us but as phones have gained more resolution 84 00:05:11,890 --> 00:05:17,740 the bigger images are necessary to always no matter what happen at 2 x at least which is usually double 85 00:05:17,740 --> 00:05:19,300 the size of the at one X.. 86 00:05:19,390 --> 00:05:23,890 It doesn't have to be you can just make it bigger and it will use it automatically but it's good for 87 00:05:23,890 --> 00:05:25,760 you to make it double and at 3 x. 88 00:05:25,760 --> 00:05:31,150 As far as brand new devices like the iPhone 7 plus which have ultra resolutions and that's important 89 00:05:31,150 --> 00:05:33,790 as well to providing all three graphics files. 90 00:05:33,790 --> 00:05:39,250 And if you don't what you'll notice is you'll notice some blurriness on the images if you don't which 91 00:05:39,250 --> 00:05:42,750 is which will make your projects not look so nice. 92 00:05:42,780 --> 00:05:43,820 Your apps. 93 00:05:43,870 --> 00:05:48,070 So what we're going to do here is we're going to in our code project here in ex-coach we're going to 94 00:05:48,070 --> 00:05:49,780 click the assets folder. 95 00:05:49,900 --> 00:05:53,530 And what I'm going to do is just select all these things here command a. 96 00:05:53,640 --> 00:05:56,860 I'm just going to drag them over here OK. 97 00:05:57,190 --> 00:06:00,060 Notice how it didn't Adul the at 2 x 3 x on here. 98 00:06:00,050 --> 00:06:02,040 It just it dragged in the names the files. 99 00:06:02,060 --> 00:06:07,150 Well it's because it recognizes that file format and places them in the appropriate spots and that's 100 00:06:07,150 --> 00:06:11,740 all you have to do if you want to support a really high resolution device like the iPhone 7 plus all 101 00:06:11,740 --> 00:06:17,110 you had to do was the at 3 x 2 x and it put it into the slots automatically and at runtime it will choose 102 00:06:17,110 --> 00:06:18,110 the appropriate image. 103 00:06:18,130 --> 00:06:20,890 No code is necessary which is really awesome. 104 00:06:20,890 --> 00:06:25,690 So again you do the at 2 x 3 x and then the file name. 105 00:06:25,690 --> 00:06:26,710 OK file type. 106 00:06:26,710 --> 00:06:27,490 Excuse me. 107 00:06:27,490 --> 00:06:32,410 So looks like we're good to go there and the next thing we want to do is start building out our user 108 00:06:32,410 --> 00:06:32,970 interface. 109 00:06:32,980 --> 00:06:39,560 So let's go to the main storyboard and to build out a graphic on the background we need to use an image. 110 00:06:39,970 --> 00:06:44,120 So I'm going to type an image here at the bottom and this is called an image view or image view. 111 00:06:44,500 --> 00:06:47,350 And what we're going to do is drag it onto the screen. 112 00:06:48,340 --> 00:06:54,920 Like so OK and there's an image of you and then what I'm going to do is hover over this icon right here 113 00:06:54,920 --> 00:06:55,340 in the middle. 114 00:06:55,340 --> 00:06:59,870 This is the attributes inspector and we're just going to select an image. 115 00:07:00,140 --> 00:07:00,900 OK. 116 00:07:01,610 --> 00:07:04,830 And welcome screen Biji. 117 00:07:04,850 --> 00:07:06,810 Now here's our image. 118 00:07:06,920 --> 00:07:09,250 And notice how we're viewing currently as an iPhone 7. 119 00:07:09,260 --> 00:07:11,030 At least mine is yours may be different. 120 00:07:11,060 --> 00:07:16,910 So if we wanted to see how it looks in different devices we can click that and it will change the device 121 00:07:16,910 --> 00:07:17,960 that you're viewing it on. 122 00:07:18,020 --> 00:07:20,900 And notice here on the seven plus it's not going the full screen. 123 00:07:20,900 --> 00:07:22,830 We're going to have to address that later on. 124 00:07:23,090 --> 00:07:26,300 So we're going to work out the iPhone 7 right now so it looks nice. 125 00:07:26,300 --> 00:07:30,740 So what we're going to do is use the iPhone 7 we're going to build all of our interface elements and 126 00:07:30,740 --> 00:07:34,790 then in the subsequent video we'll actually go and figure out how to get it working on all the screen 127 00:07:35,150 --> 00:07:37,270 sizes so cool. 128 00:07:37,430 --> 00:07:38,600 So we got the image here. 129 00:07:38,600 --> 00:07:39,590 We've selected the image. 130 00:07:39,590 --> 00:07:45,030 One thing I do want to say is on this content mode scale to fill is not ever. 131 00:07:45,050 --> 00:07:48,770 Usually what you want whether it's going to do is it's going to scale your images to fill up the space 132 00:07:49,040 --> 00:07:50,230 but it may stretch them. 133 00:07:50,300 --> 00:07:55,240 And as we know stretched images never look good on apps ever ever ever. 134 00:07:55,250 --> 00:08:01,160 And so what we really want to do is aspect feel like it'll keep the aspect ratio and fill it up in the 135 00:08:01,160 --> 00:08:02,120 entire screen. 136 00:08:02,360 --> 00:08:04,520 And so that's what we're looking for here. 137 00:08:04,550 --> 00:08:05,180 Cool. 138 00:08:05,210 --> 00:08:07,850 And so I just say my project I do that very often. 139 00:08:07,850 --> 00:08:12,650 And so the next thing I want to do is this probably get some of the the rest of the controls on here 140 00:08:12,650 --> 00:08:15,350 so the image this is swooshing and these here. 141 00:08:15,350 --> 00:08:21,590 And so what I'm actually going to do is I'm going to keep it side by side with my project kind of like 142 00:08:21,590 --> 00:08:26,780 this so I can just so I can kind of look at it while I'm working on it. 143 00:08:26,790 --> 00:08:32,050 So what I'm going to do is these controls up here I'm going to go ahead and hide or show the navigator 144 00:08:32,090 --> 00:08:33,990 someone I'm going to hide. 145 00:08:34,000 --> 00:08:39,610 The navigator here so I have more space on my screen and I'm to work with it like this right now OK. 146 00:08:39,630 --> 00:08:43,230 So first things first is I want to throw another image of you on here. 147 00:08:43,290 --> 00:08:46,500 So right at the top and this will be our swoosh. 148 00:08:46,560 --> 00:08:50,350 So I'm going to select the image here and do swoosh logo as you can see. 149 00:08:50,490 --> 00:08:54,480 Right now it's scaled to feel it's smashing the image which of course doesn't look right. 150 00:08:54,540 --> 00:08:58,080 And so even if you eyeball it like this you know like OK that looks good. 151 00:08:58,140 --> 00:09:05,040 You still want to do aspect fit because or aspect feel because you know it'll be perfect then. 152 00:09:05,110 --> 00:09:07,280 So let's play with aspect fit for a second. 153 00:09:07,290 --> 00:09:10,810 So notice how aspect fit it stays there aspect ratio. 154 00:09:10,830 --> 00:09:14,470 But it gets bigger or smaller depending on the size of my box. 155 00:09:14,610 --> 00:09:21,630 If I go to Aspect feel OK you can see that it's it's keeping a massive aspect ratio here in my app and 156 00:09:21,630 --> 00:09:24,590 filling up the entire space which is not what I want. 157 00:09:24,660 --> 00:09:29,480 So in this case I want aspect fit so it fits within the bounding box. 158 00:09:29,610 --> 00:09:29,980 OK. 159 00:09:30,000 --> 00:09:34,170 And right now we're just going to kind of eyeball it and here's what I was telling you about earlier 160 00:09:34,170 --> 00:09:35,830 and I'm glad we pointed this out here. 161 00:09:36,030 --> 00:09:42,990 By not having the other 2 x 3 x images since we don't have at 2 x 3 x images we're using the default 162 00:09:43,050 --> 00:09:43,990 low resolution one. 163 00:09:44,010 --> 00:09:45,440 And it's kind of blurry. 164 00:09:45,450 --> 00:09:51,000 So if we want that to look really nice we're going to need the 2x and 3x images that will add to the 165 00:09:51,000 --> 00:09:51,630 project here. 166 00:09:51,630 --> 00:09:57,050 So let's go ahead and put this right here OK. 167 00:09:58,060 --> 00:10:01,060 So swoosh it looks ok looks good enough for now. 168 00:10:01,530 --> 00:10:03,440 And the next thing we want to do is add some text. 169 00:10:03,500 --> 00:10:07,050 And so Alexa shut up. 170 00:10:07,430 --> 00:10:07,820 OK. 171 00:10:07,830 --> 00:10:13,920 So the next thing we want to do is she's not sure about iOS development that's because she's made by 172 00:10:13,950 --> 00:10:15,510 Amazon. 173 00:10:15,810 --> 00:10:18,270 We're going to do a label here. 174 00:10:19,420 --> 00:10:19,920 OK. 175 00:10:20,850 --> 00:10:23,150 And of course ours doesn't look anything like that. 176 00:10:23,190 --> 00:10:25,730 So I'm just going to make it bigger and kind of eyeball it for now. 177 00:10:26,610 --> 00:10:27,280 OK. 178 00:10:27,640 --> 00:10:30,680 And I'm going to center it so a minute with this label selected. 179 00:10:30,700 --> 00:10:33,690 I'm going to hover over the center icon here and center the text. 180 00:10:34,060 --> 00:10:37,000 And the next thing I'm going to do is I'm going to change the font. 181 00:10:37,030 --> 00:10:39,870 I never ever use the system font because it's just ugly. 182 00:10:39,880 --> 00:10:45,670 And so we're going to go to Kustom and we're going to use the Avenir now Avenir is actually a font that 183 00:10:45,670 --> 00:10:51,410 Apple uses for most of all their marketing material and it looks really nice and the style. 184 00:10:51,640 --> 00:10:58,100 I just want a regular medium style K so that's good for now and what we'll do is we'll increase the 185 00:10:58,100 --> 00:11:01,960 size until it gets about the size that we want. 186 00:11:02,030 --> 00:11:04,510 I made just this in just a minute here and want to change the color. 187 00:11:04,520 --> 00:11:05,580 Click on color here. 188 00:11:05,930 --> 00:11:09,240 And what I'm going to do is I'm going to change the color to white. 189 00:11:09,480 --> 00:11:11,400 OK you can put any of these controls to get white. 190 00:11:11,400 --> 00:11:14,280 I just click the sliding icon here and drag that over. 191 00:11:14,610 --> 00:11:18,840 And so what I want to do is mimic what's on the screen so go all in. 192 00:11:19,250 --> 00:11:20,080 OK. 193 00:11:20,120 --> 00:11:23,530 And in the image to the left now OK. 194 00:11:23,540 --> 00:11:27,220 It's kind of at the bottom of the basketball player. 195 00:11:28,070 --> 00:11:30,890 Like right there on the left hand side and this one's about right there. 196 00:11:30,900 --> 00:11:35,290 And I'm all I'm ok eyeballing it it's it's fine for now it doesn't have to be pixel perfect. 197 00:11:35,480 --> 00:11:38,010 And in fact here's a protip. 198 00:11:38,150 --> 00:11:42,380 OK this is a very important protip that you should let your designers know if you're ever working with 199 00:11:42,380 --> 00:11:43,340 designers. 200 00:11:43,340 --> 00:11:48,080 It is not ideal practice to have pixel perfect designs in Iowa development. 201 00:11:48,080 --> 00:11:51,530 So if you have a designer come out you say I want these pixel perfect and he makes the little markers 202 00:11:51,530 --> 00:11:53,330 of 16 pixels things like that. 203 00:11:53,420 --> 00:11:59,270 That's not ideal because when I was development what you want to do is work with auto layout which gets 204 00:11:59,460 --> 00:12:03,830 about near perfect what you want but never quite there because it needs to adjust for different screen 205 00:12:03,830 --> 00:12:06,060 sizes so you should always let your designer know. 206 00:12:06,260 --> 00:12:10,390 I will make it look really nice and based on your designs but I cannot guarantee pixel perfect. 207 00:12:10,580 --> 00:12:14,770 One is it might be two times the work to do that and you have to write custom code to get there. 208 00:12:14,870 --> 00:12:16,230 And so theyre going to pay a lot more money. 209 00:12:16,250 --> 00:12:16,460 OK. 210 00:12:16,460 --> 00:12:24,370 Don't ever commit to pick pixel perfect on a pre-contract project and two is it will take a lot of time. 211 00:12:24,510 --> 00:12:24,830 OK. 212 00:12:24,860 --> 00:12:26,030 And it's often not worth it. 213 00:12:26,030 --> 00:12:27,870 So just let your designer know explain it to them. 214 00:12:27,870 --> 00:12:31,060 But there's your protip So go all in. 215 00:12:31,220 --> 00:12:36,300 OK so what next thing I can do is make sure it's selected and I'm going to Kamandi to duplicate. 216 00:12:36,320 --> 00:12:39,820 You could also commands command c command V to paste. 217 00:12:39,860 --> 00:12:44,140 And what I'm going to do here is we're going to write the text that we need. 218 00:12:44,210 --> 00:12:50,150 So on going all out ok cool little catch phrase that Evan created for us. 219 00:12:50,720 --> 00:12:54,830 And we're going to make a smaller so ongoing all out. 220 00:12:54,830 --> 00:12:57,450 Now what's interesting is the image over here. 221 00:12:57,650 --> 00:12:58,670 OK. 222 00:12:58,790 --> 00:13:00,620 It's lined up completely. 223 00:13:00,710 --> 00:13:04,820 So the O is over here and the. 224 00:13:05,300 --> 00:13:09,460 Yes so we need to make this a little bit longer and bigger. 225 00:13:09,500 --> 00:13:16,700 So what I might do is just increase the font size until it's about right and. 226 00:13:16,730 --> 00:13:25,810 Make sure it's centered which it is and it's a little bit too big say twenty three is too small. 227 00:13:26,540 --> 00:13:32,360 Well like I said it's going to be picture perfect but it will be close enough and I'm OK with that. 228 00:13:32,360 --> 00:13:37,430 So we'll put it right about here and we'll make the bounding box a little bit smaller so we don't have 229 00:13:37,430 --> 00:13:38,920 extra wasted space. 230 00:13:39,310 --> 00:13:39,690 OK. 231 00:13:39,710 --> 00:13:44,840 So go all in on going all out and do what we could possibly do is just make this bold and that might 232 00:13:44,840 --> 00:13:49,950 actually that might actually be yeah. 233 00:13:50,060 --> 00:13:53,450 That almost made it quite perfect there on the edges there. 234 00:13:53,640 --> 00:13:53,930 OK. 235 00:13:53,940 --> 00:13:56,050 So go all in on going all out. 236 00:13:56,220 --> 00:13:57,440 Sounds so inspirational. 237 00:13:57,480 --> 00:13:59,490 And I can also use the arrow keys. 238 00:13:59,930 --> 00:14:00,910 OK. 239 00:14:00,990 --> 00:14:07,650 On the keyboard to move things around and then move it up there's a slight bit more and I'm liking that. 240 00:14:07,650 --> 00:14:10,800 So next thing I want to do is get this text here in the middle. 241 00:14:10,800 --> 00:14:13,050 So again Kamandi to duplicate. 242 00:14:13,350 --> 00:14:16,500 And I'm just eyeballing it again not doing pixel perfect here. 243 00:14:16,650 --> 00:14:25,510 And what we're going to do is type in the words so find a team in your city and dominate the league. 244 00:14:25,830 --> 00:14:26,890 OK. 245 00:14:26,910 --> 00:14:30,960 And the reason why I type the words first before I change the sizing and things is so I can actually 246 00:14:31,080 --> 00:14:34,850 size it up and it'll fall into place a little bit easier. 247 00:14:35,070 --> 00:14:39,490 And so changes back to from heavy to medium. 248 00:14:39,690 --> 00:14:42,450 And then we're just going to reduce the font size. 249 00:14:42,540 --> 00:14:46,110 One of the things we're going to need to do is have two lines here so see where those lines. 250 00:14:46,260 --> 00:14:48,860 Just click it up by one until it has two on there. 251 00:14:49,050 --> 00:14:50,070 OK. 252 00:14:50,190 --> 00:14:51,860 And where to put that right there. 253 00:14:52,140 --> 00:14:57,810 And I'm going to now you know we need to make it larger so it shows two lines. 254 00:14:57,810 --> 00:14:58,400 There we go. 255 00:14:58,500 --> 00:14:58,790 OK. 256 00:14:58,800 --> 00:15:03,240 It wasn't showing two lines because my level was not large enough as you can see it is now large enough 257 00:15:03,930 --> 00:15:05,530 and notice how there's too many words. 258 00:15:05,530 --> 00:15:07,220 So we need to get rid of dominate. 259 00:15:07,470 --> 00:15:08,190 OK. 260 00:15:08,250 --> 00:15:11,450 And also the words need to kind of stretch out across the whole thing. 261 00:15:11,460 --> 00:15:12,970 So let's make the font bigger. 262 00:15:13,870 --> 00:15:14,910 It's a little too big. 263 00:15:15,020 --> 00:15:16,620 It's smaller there. 264 00:15:16,900 --> 00:15:17,530 Let's see if we 265 00:15:21,100 --> 00:15:22,220 I'm just playing with things here. 266 00:15:22,240 --> 00:15:30,510 What I want to do is I want to get the league to be the only thing that's showing Raguel it's a little 267 00:15:30,510 --> 00:15:31,590 bit long. 268 00:15:31,590 --> 00:15:39,160 What happens is by so it's a little bit long but I kind of like the I like the font size. 269 00:15:39,160 --> 00:15:40,590 So maybe what I should do. 270 00:15:42,730 --> 00:15:45,440 Well maybe I should do is make these a little bit bigger. 271 00:15:45,460 --> 00:15:49,990 I'm curious now to make this a little bit bigger to get them. 272 00:15:50,900 --> 00:15:53,190 Touching the edges like so. 273 00:15:53,540 --> 00:15:57,800 And make sure this one is lined up properly. 274 00:15:57,800 --> 00:15:59,030 Make this a little bit bigger. 275 00:16:02,220 --> 00:16:03,020 There we go. 276 00:16:04,050 --> 00:16:06,760 X-Treme kind of like it. 277 00:16:07,030 --> 00:16:07,670 Good enough. 278 00:16:07,890 --> 00:16:08,180 OK. 279 00:16:08,200 --> 00:16:09,060 Perfect. 280 00:16:09,580 --> 00:16:11,000 This is looking really good. 281 00:16:11,020 --> 00:16:14,490 Now the last thing we want to do is add a custom button on here. 282 00:16:14,890 --> 00:16:15,430 OK. 283 00:16:15,570 --> 00:16:18,760 And so what we're going to do is type in beauty for button. 284 00:16:18,970 --> 00:16:21,520 And of course it doesn't look anything like we would expect. 285 00:16:21,520 --> 00:16:28,150 So it just drag it there and put it towards the bottom so obviously it's it's ugly ugly button. 286 00:16:28,540 --> 00:16:32,710 So let's go out and drag it to the left here on this side of the screen and drag it to the right and 287 00:16:32,710 --> 00:16:35,230 let's make it a little bit bigger as per the designs. 288 00:16:35,230 --> 00:16:36,910 And there's some things we can do right now. 289 00:16:37,120 --> 00:16:41,520 So what I can do is instead of saying the word button on it as you can see at the top right side get 290 00:16:41,530 --> 00:16:42,660 started. 291 00:16:43,200 --> 00:16:43,600 All right. 292 00:16:43,610 --> 00:16:49,870 And let's go ahead and changes from System font to custom and then let's go to Avenir. 293 00:16:50,310 --> 00:16:50,820 All right. 294 00:16:50,860 --> 00:16:58,040 And let's just do the medium font and change the color to white like so. 295 00:16:58,380 --> 00:16:59,270 OK. 296 00:16:59,420 --> 00:17:03,710 And then what I want to also do is scroll down a little bit on this button here and see how background 297 00:17:03,870 --> 00:17:04,840 it has a red slash. 298 00:17:04,850 --> 00:17:07,010 I mean it's clear color there's no background. 299 00:17:07,150 --> 00:17:13,440 I instead want to do is I want to make this black like so black color I just change the color to black 300 00:17:13,950 --> 00:17:21,720 and then what I would like to do is click this icon here and change the opacity just eyeball it. 301 00:17:21,730 --> 00:17:25,840 Good color there where you can kind of see the background and I just change it to 40 percent opacity 302 00:17:26,590 --> 00:17:28,920 and now starting to really look like the designs. 303 00:17:29,100 --> 00:17:31,070 OK and this is really cool. 304 00:17:31,090 --> 00:17:34,080 Now we don't have a border on here yet so we need to solve that next. 305 00:17:34,080 --> 00:17:35,770 But this is looking pretty close. 306 00:17:35,800 --> 00:17:36,620 So I mean to save it. 307 00:17:36,730 --> 00:17:39,400 And the next thing we want to do is actually create the border. 308 00:17:39,400 --> 00:17:43,680 So what we're going to do is open up our navigator with a button at the top right. 309 00:17:43,720 --> 00:17:46,480 We're going to go into our folder here. 310 00:17:46,600 --> 00:17:51,460 Wish right click and we're going to add a new group and I'm like call this group views. 311 00:17:51,470 --> 00:17:53,560 This is we're going to put custom view code. 312 00:17:53,560 --> 00:17:58,410 So it's segregated from you know different types of code like view controllers or services. 313 00:17:58,570 --> 00:18:02,610 And inside the views folder here or group right click and go to a new file. 314 00:18:03,160 --> 00:18:05,740 And what we want to do is a cocoa touch class. 315 00:18:05,800 --> 00:18:09,910 Ok cocoa touch is the framework that manages things like buttons and views. 316 00:18:10,210 --> 00:18:15,090 And we don't want to create an empty file we want to actually use the prebuilt custom cocoa touch class 317 00:18:15,700 --> 00:18:22,060 and we don't want a custom table view so what we want is a UI button we want to custom you I button 318 00:18:22,150 --> 00:18:24,370 we're going to call this border button. 319 00:18:24,700 --> 00:18:29,950 And the advantage of making this a class means that we can reuse this button over and over and over 320 00:18:29,950 --> 00:18:33,610 again and reusability is very important in programming. 321 00:18:33,950 --> 00:18:37,330 We always want to keep the dry principle. 322 00:18:37,330 --> 00:18:37,710 OK. 323 00:18:37,750 --> 00:18:39,130 I want you to burn listen to your brains right now. 324 00:18:39,130 --> 00:18:41,050 The dry principle don't repeat yourself. 325 00:18:41,290 --> 00:18:44,750 If you find yourself writing code over and over and over again the same code. 326 00:18:44,830 --> 00:18:46,310 It means there's always a better way. 327 00:18:46,330 --> 00:18:50,170 And so creating classes is one way to make reusable code. 328 00:18:50,270 --> 00:18:53,760 So less code means less bugs and less work. 329 00:18:53,830 --> 00:18:56,530 So the dry principle don't repeat yourself. 330 00:18:56,620 --> 00:19:00,270 So we've got our border button here subclass of you I button of course. 331 00:19:00,280 --> 00:19:04,720 Fill that in first automatically when we started typing and you say button is part of the code touch 332 00:19:04,810 --> 00:19:07,110 framework and a click next. 333 00:19:07,270 --> 00:19:13,380 And I'm just going to click Create and here's our border button OK. 334 00:19:13,530 --> 00:19:15,350 And it says only over a draw. 335 00:19:15,420 --> 00:19:19,980 If you perform custom drawing well we're not going to override the draw recked function because we're 336 00:19:19,980 --> 00:19:25,050 not doing custom drawing all we're going to do is add a border which is part of the default lair inside 337 00:19:25,050 --> 00:19:26,750 of any you I view. 338 00:19:26,890 --> 00:19:29,520 OK and so you would override the draw recked. 339 00:19:29,670 --> 00:19:31,500 OK this function right here. 340 00:19:31,740 --> 00:19:35,040 You would implement that function only if you had to do cousin drolling you wanted to draw a little 341 00:19:35,040 --> 00:19:39,290 stars inside your button or things like that any type of custom drawing that you might want to do. 342 00:19:39,640 --> 00:19:43,890 And so what we're going to do is we're going to use the Awake from NIB function. 343 00:19:43,970 --> 00:19:44,750 OK. 344 00:19:45,390 --> 00:19:49,550 Awake from NIB and we're also going right super awake from it. 345 00:19:49,830 --> 00:19:50,370 OK. 346 00:19:50,520 --> 00:19:51,910 And you'll learn more about this. 347 00:19:52,020 --> 00:20:00,060 But the superclass basically is or calling super is calling the parent class so it's calling you buttons 348 00:20:00,440 --> 00:20:04,890 awake from NIB function because Apple when they've written this code for us they already have an awake 349 00:20:04,890 --> 00:20:08,430 from NIB function which has lots of code in the already possibly. 350 00:20:08,430 --> 00:20:13,460 And so we want to make sure that that code is called and per the apple documentation. 351 00:20:13,500 --> 00:20:19,110 When you override the awake from NIB function they want you to call super call it first so the code 352 00:20:19,380 --> 00:20:25,140 that Apple is calling for the Apple has written in their function and all we're going to do here is 353 00:20:25,860 --> 00:20:27,590 access the Alair property. 354 00:20:27,600 --> 00:20:40,560 So Lehre dot border with K equals a 3.0 or say Lehre border color because you eye color white color 355 00:20:40,590 --> 00:20:42,670 dot C-g color. 356 00:20:43,260 --> 00:20:45,200 OK a lot going on here I know. 357 00:20:45,300 --> 00:20:47,770 But what we're doing here is every view. 358 00:20:47,790 --> 00:20:53,190 OK so every you view you eye button inherits from you eye view it gets some of the properties and features 359 00:20:53,190 --> 00:20:55,700 from a view has a Lehre property. 360 00:20:55,750 --> 00:20:55,970 OK. 361 00:20:55,980 --> 00:20:58,080 This is stuff that the Apple engineers have written for us. 362 00:20:58,080 --> 00:21:03,090 And so like a border with Unfortunately that's not available to us in the interface builder so we have 363 00:21:03,090 --> 00:21:08,080 to do it programmatically so border with and border color allows us to set a border with color. 364 00:21:08,100 --> 00:21:13,870 Any of could be an image of you could be a new eye view could be in any of those things. 365 00:21:13,890 --> 00:21:21,090 You can add borders to and because it all inherits from you I view and I mean if we command click this 366 00:21:21,090 --> 00:21:21,690 right here. 367 00:21:21,750 --> 00:21:22,270 OK. 368 00:21:23,870 --> 00:21:26,060 Pulled the documentation. 369 00:21:26,090 --> 00:21:31,460 And it talks about the different functions and things that are available to it in fact anytime you want 370 00:21:31,730 --> 00:21:38,900 to look at the code underneath you can command click and go on and go look at all the code underneath 371 00:21:38,900 --> 00:21:40,280 is available for you to look at. 372 00:21:40,280 --> 00:21:46,100 So if you ever want to see what functions are available to you you can command click and go to the jump 373 00:21:46,100 --> 00:21:46,830 to the definition. 374 00:21:46,830 --> 00:21:47,520 OK. 375 00:21:47,900 --> 00:21:49,050 Pretty cool stuff. 376 00:21:49,400 --> 00:21:51,100 Anyway so we've got what we need here. 377 00:21:51,260 --> 00:21:51,650 All right. 378 00:21:51,680 --> 00:21:56,000 We've created a custom button called Border button and in the Awake from NIB function which is going 379 00:21:56,000 --> 00:22:01,090 to be called the moment that your interface builder you control it comes to life onto the screen. 380 00:22:01,110 --> 00:22:06,320 OK this is going to be called right from the beginning and then we need to do one more thing is go back 381 00:22:06,320 --> 00:22:07,690 to our main story board. 382 00:22:08,160 --> 00:22:08,480 OK. 383 00:22:08,480 --> 00:22:13,400 And on this button here instead of it being a regular UI button we want to click this icon right up 384 00:22:13,400 --> 00:22:13,700 here. 385 00:22:13,730 --> 00:22:19,160 The identity inspector and we want to change the class from UI button to border button I just type in 386 00:22:19,160 --> 00:22:21,660 the letter B and it appears right there. 387 00:22:21,740 --> 00:22:24,410 Now you're not going to see anything here in the interface builder. 388 00:22:24,560 --> 00:22:24,870 OK. 389 00:22:24,890 --> 00:22:28,640 But when we run this project we should see a white outline on this. 390 00:22:28,640 --> 00:22:33,170 So what I'm going to do is from my devices here I want to choose an iPhone 7 since that's what we're 391 00:22:33,170 --> 00:22:35,150 working with here and the Interface Builder. 392 00:22:35,300 --> 00:22:35,870 And we're going to run it 393 00:22:39,340 --> 00:22:40,280 and here it is on my screen. 394 00:22:40,300 --> 00:22:43,670 It's a little bit big if you want to change the size of the Interface Builder here. 395 00:22:43,720 --> 00:22:48,450 You can type press command one or command two or command three to make it different sizes. 396 00:22:48,460 --> 00:22:49,160 OK. 397 00:22:49,780 --> 00:22:52,060 And cool. 398 00:22:52,060 --> 00:22:56,230 So you know what I think our our borders have probably a little bit thick. 399 00:22:56,230 --> 00:22:58,280 I probably should have done it two instead of three. 400 00:22:58,390 --> 00:23:02,980 And I think maybe there are buttons a little thin but as you can see it looks pretty close to the Zeins 401 00:23:03,070 --> 00:23:04,540 which I think is pretty cool. 402 00:23:04,750 --> 00:23:06,880 So let's make those few minor adjustments real quick. 403 00:23:06,880 --> 00:23:09,670 Again we're eyeballing all this which is fine. 404 00:23:10,150 --> 00:23:15,750 And so make it a little bit larger there and then the code the border button realises that this two 405 00:23:15,750 --> 00:23:16,730 are two. 406 00:23:17,200 --> 00:23:17,900 OK. 407 00:23:18,160 --> 00:23:19,540 Now let's try something different. 408 00:23:19,660 --> 00:23:23,780 OK let's run this on an iPhone 7 plus and see what happens. 409 00:23:31,500 --> 00:23:33,010 OK as you can see it's now loaded. 410 00:23:33,030 --> 00:23:34,730 A second simulator here. 411 00:23:34,740 --> 00:23:35,760 All right. 412 00:23:35,760 --> 00:23:38,850 And we're going to keep this one on this side because it's really massive. 413 00:23:38,850 --> 00:23:44,050 I'm sure if I make it bigger it doesn't if on the whole screen which it doesn't know. 414 00:23:44,430 --> 00:23:46,180 So here's something interesting. 415 00:23:46,350 --> 00:23:47,720 Let's move this one off the screen. 416 00:23:48,060 --> 00:23:52,040 Look at this on the iPhone 7 plus we got this big white space here. 417 00:23:52,200 --> 00:23:53,000 OK. 418 00:23:53,420 --> 00:23:54,720 That's not good at all right. 419 00:23:54,720 --> 00:23:57,410 So you actually can't ship an app this way the way we just built the interface. 420 00:23:57,410 --> 00:24:00,670 It's not complete because it only works on one type of device screen. 421 00:24:00,870 --> 00:24:02,890 And we could have easily seen the problem. 422 00:24:03,060 --> 00:24:04,770 Let's go back to our story board here. 423 00:24:04,800 --> 00:24:09,240 If I had clicked on this device down here for the iPhone 7 plus you can see that there's a white space 424 00:24:09,270 --> 00:24:13,320 or if I click on the iPad there's an even bigger white space. 425 00:24:13,350 --> 00:24:14,040 OK. 426 00:24:14,310 --> 00:24:17,490 And so this problem has always existed in Iowa. 427 00:24:17,520 --> 00:24:19,280 And here's the reason why. 428 00:24:19,470 --> 00:24:20,090 OK. 429 00:24:20,310 --> 00:24:23,830 Currently we're not utilizing auto layout. 430 00:24:23,980 --> 00:24:29,640 OK iOS all the way that all the apps that are laid out that seem to rotate and look good on any device 431 00:24:30,090 --> 00:24:34,650 they use something called auto lay on auto layout will allow us to pin things to the edges of the screen 432 00:24:34,680 --> 00:24:37,440 or pin things to other components on the screen. 433 00:24:37,440 --> 00:24:41,660 So it looks good on any type of screen and we haven't done any of that yet. 434 00:24:41,940 --> 00:24:44,310 So we're going to call this video done. 435 00:24:44,460 --> 00:24:49,380 What we've done so far is we've dragged some controls onto the screen we've critter own custom class 436 00:24:49,440 --> 00:24:51,250 using the Awake from NIB function. 437 00:24:51,390 --> 00:24:59,840 We have initialized code or we've set code that will change the border and the border with the button. 438 00:24:59,910 --> 00:25:04,140 And now you know things are looking pretty good but we have some we have some user interface problems 439 00:25:04,140 --> 00:25:06,920 so we're going to need to address those next so that's it for now. 440 00:25:06,930 --> 00:25:09,070 Mark Price does slopes com. 441 00:25:09,090 --> 00:25:10,200 Moving on and for.