1 00:00:07,900 --> 00:00:12,830 Hey hey everybody what is going on this is Caleb with devah slopes and in this video we're going to 2 00:00:12,830 --> 00:00:15,880 make those custom subclasses for the textfield. 3 00:00:15,920 --> 00:00:21,650 We're also going to make a nice view subclassed to add a shadow to our log in view to look super super 4 00:00:21,650 --> 00:00:23,240 cool very pretty. 5 00:00:23,250 --> 00:00:25,030 MWAA let's do it now. 6 00:00:25,040 --> 00:00:28,000 So pull open that X code project. 7 00:00:28,190 --> 00:00:33,950 And here we go let's go ahead and set up the View Controller files for these first because without the 8 00:00:33,950 --> 00:00:38,690 proper swift file We're not going to be able to actually do anything with these controllers. 9 00:00:38,690 --> 00:00:39,830 We don't want that. 10 00:00:39,860 --> 00:00:46,340 So let's go ahead and let's right click on controller click new file and we're going to create a Cocco 11 00:00:46,340 --> 00:00:50,630 touch class that is a subclass of view controller. 12 00:00:50,630 --> 00:00:53,780 Now name one off VC will name the other one. 13 00:00:53,780 --> 00:01:00,320 Log in VC click next and we're going to save this to the controller file make sure that the target is 14 00:01:00,320 --> 00:01:01,940 properly ticked. 15 00:01:02,290 --> 00:01:03,720 OK click Create. 16 00:01:03,860 --> 00:01:05,480 And this looks awesome. 17 00:01:05,510 --> 00:01:10,520 Now go back to main storyboard select all Visi which that's this one. 18 00:01:10,730 --> 00:01:16,970 Then go into the identity inspector and we're going to type Fisi press enter and that's great. 19 00:01:16,970 --> 00:01:21,740 Now just so you know for this app we're going to be instantiating certain view controllers using the 20 00:01:21,740 --> 00:01:22,410 storyboard. 21 00:01:22,430 --> 00:01:26,340 And so in order to do that we're going to need its storyboard ID. 22 00:01:26,360 --> 00:01:32,300 So what I like to do is I just like to copy the identity name and paste that in as the storyboard ID 23 00:01:32,630 --> 00:01:36,050 so just do that when I tell you to in this in this course. 24 00:01:36,140 --> 00:01:41,840 We're not going to use it for every single view controller but for some of them we will next right click 25 00:01:41,900 --> 00:01:47,410 on controller click new file Cocco touch class and we'll name this one. 26 00:01:47,840 --> 00:01:52,760 Locknut Lufkin log in VC as a subclass of view controller. 27 00:01:52,790 --> 00:01:53,290 OK. 28 00:01:53,600 --> 00:01:54,500 Just like before. 29 00:01:54,500 --> 00:01:59,360 Click next click Create and that looks good. 30 00:01:59,670 --> 00:02:07,770 Back in main storyboard select log in VC and set its identity to log in VC and just like before copy 31 00:02:07,770 --> 00:02:11,080 it and paste that into the storyboard ID. 32 00:02:11,220 --> 00:02:13,470 Very cool so now its good it has an identity. 33 00:02:13,470 --> 00:02:19,470 Both of these have a proper identity and now lets go ahead and create those custom view subclasses. 34 00:02:19,470 --> 00:02:24,810 Now I don't know if you saw it in the simulator but when you go into the log in view controller and 35 00:02:24,810 --> 00:02:32,130 you select by email these this email has the placeholder text inset from the top and bottom and the 36 00:02:32,130 --> 00:02:38,310 left and it has kind of a cool white placeholder text which you can't actually set in the interface 37 00:02:38,310 --> 00:02:39,090 builder. 38 00:02:39,180 --> 00:02:42,430 Then when you start typing it turns to this very cool green color. 39 00:02:42,540 --> 00:02:49,350 So we're going to set that up now so go ahead and right click on view click new file and we're going 40 00:02:49,350 --> 00:02:56,010 to create the cocoa touch class because everything in here that we can subclass we can make a custom 41 00:02:56,010 --> 00:02:56,850 subclass of. 42 00:02:56,850 --> 00:03:04,950 So go ahead and type UI and remember where we are typing our email and password is UI textfield. 43 00:03:04,950 --> 00:03:05,960 Very very cool. 44 00:03:06,180 --> 00:03:13,860 And I'm going to call this inset textfield because we're going to set the text to be inset a little 45 00:03:13,860 --> 00:03:14,460 bit. 46 00:03:14,650 --> 00:03:18,280 OK it's going into the view folder and our target is breakpoint. 47 00:03:18,300 --> 00:03:19,320 Click create. 48 00:03:19,410 --> 00:03:20,390 Very cool. 49 00:03:20,640 --> 00:03:23,100 And in here is where the magic happens. 50 00:03:23,100 --> 00:03:28,020 This is where we're going to set it up so that it does what we want it to do with the inset text and 51 00:03:28,020 --> 00:03:29,500 the custom placeholder. 52 00:03:29,640 --> 00:03:34,170 So we're going to delete that boilerplate code and what we're going to do is we're going to create a 53 00:03:34,170 --> 00:03:38,000 private variable that only this class can access. 54 00:03:38,040 --> 00:03:44,730 Basically to set the amount of offset we want for the rectangle that contains all of the text in a text 55 00:03:44,730 --> 00:03:45,390 field. 56 00:03:45,420 --> 00:03:53,830 So go ahead and type private var and we're going to call it text rect offset because as you'll see a 57 00:03:53,970 --> 00:03:59,960 text field has what is called a text rect and that means the rectangle where the text goes. 58 00:04:00,120 --> 00:04:04,310 And we're going to set the offset to be 20. 59 00:04:04,440 --> 00:04:10,230 But the important thing is we need to actually set this to be of type C.G. float specifically because 60 00:04:10,230 --> 00:04:13,390 that's what's required to modify the view. 61 00:04:13,500 --> 00:04:14,200 All right. 62 00:04:14,310 --> 00:04:15,570 Very cool. 63 00:04:15,570 --> 00:04:20,550 So next what we're going to do is we're going to set what is called padding and this is going to basically 64 00:04:20,550 --> 00:04:25,380 set up the rectangle for exactly how we want it. 65 00:04:25,380 --> 00:04:29,510 But it's going to allow us to use this padding to offset the rectangle. 66 00:04:29,520 --> 00:04:31,700 And then we're going to subtract the offset. 67 00:04:31,800 --> 00:04:35,160 So everything still is is on the screen as it's supposed to be. 68 00:04:35,160 --> 00:04:42,000 So go ahead and create another private variable called private WIPs private var padding. 69 00:04:42,450 --> 00:04:46,940 And this is going to be of type UI edge inset. 70 00:04:47,010 --> 00:04:53,040 And the cool thing is if we instantiate this we can give it a value for how much it should be inset 71 00:04:53,040 --> 00:04:57,290 from the top which for us we want it to be in zero from the left. 72 00:04:57,300 --> 00:05:02,070 We want it to be inset the text rect offset. 73 00:05:02,100 --> 00:05:06,180 Although you know what we have not standard we can actually use that yet. 74 00:05:06,180 --> 00:05:11,970 So let's go ahead and just say 20 0 from the bottom and zero from the right. 75 00:05:12,000 --> 00:05:12,510 OK. 76 00:05:12,780 --> 00:05:19,380 So now we have an offset that tells us how far we want to shift the rectangle and we have padding which 77 00:05:19,380 --> 00:05:23,820 tells us what the what it should look like on the rectangle itself. 78 00:05:23,820 --> 00:05:24,970 Very cool. 79 00:05:25,020 --> 00:05:33,120 And now there are three methods that we need to override for this text view in order to customize the 80 00:05:33,120 --> 00:05:33,980 way it looks. 81 00:05:33,990 --> 00:05:37,900 And so one of those is called Text recked for bounds. 82 00:05:37,920 --> 00:05:44,450 Now that's when you're just looking at text in the text rectangle without editing it or modifying it. 83 00:05:44,580 --> 00:05:53,910 Then there is editing recta for bounds that's the rectangle when you are actually typing text. 84 00:05:53,940 --> 00:05:57,280 And then there is placeholder recked for bounce. 85 00:05:58,020 --> 00:06:00,550 All kinds of custom stuff in here. 86 00:06:00,750 --> 00:06:06,750 If you think about this text recked for bounce is where the text is held editing record for bounds is 87 00:06:06,750 --> 00:06:11,600 where you're editing and placeholder recked for bounds is where your placeholder is. 88 00:06:11,820 --> 00:06:14,960 But I was trying to think like why would you want to modify all these different ones. 89 00:06:14,960 --> 00:06:21,750 And I think if you had let's say that you had email like we do in our placeholder which you can see 90 00:06:21,750 --> 00:06:24,100 in our in our little simulator here. 91 00:06:24,170 --> 00:06:24,670 OK. 92 00:06:24,870 --> 00:06:31,590 And let's say we wanted it to whenever we select e-mail what if we wanted the word email to shrink up 93 00:06:31,590 --> 00:06:33,960 and float up here to the top corner. 94 00:06:34,110 --> 00:06:36,290 Then when we're editing we can type in here. 95 00:06:36,390 --> 00:06:42,000 Then we select password the password actually animates up and hides in the corner so that it still says 96 00:06:42,000 --> 00:06:42,600 password like. 97 00:06:42,600 --> 00:06:47,190 That's one way that you can modify the rectangle and make it a really cool experience. 98 00:06:47,250 --> 00:06:55,140 But what we're going to do is we are going to create basically a rectangle using our custom offsets 99 00:06:55,140 --> 00:07:01,560 here and we're going to return that these text rechts so that we can set up how it looks exactly which 100 00:07:01,560 --> 00:07:02,540 is pretty cool. 101 00:07:02,700 --> 00:07:07,730 But you know what before we do that let's actually go ahead and I want to see what this looks like. 102 00:07:07,740 --> 00:07:13,460 So for now I'm going to drag the initial view controller to load this log in B.C. So it just just so 103 00:07:13,470 --> 00:07:15,170 we can see what it looks like. 104 00:07:15,440 --> 00:07:18,810 You know it's going to give me a problem here. 105 00:07:19,310 --> 00:07:25,790 Oh the get rid of those placeholders and now build and run out. 106 00:07:25,830 --> 00:07:30,070 Of course it's expecting something returned so commented out actually. 107 00:07:30,120 --> 00:07:31,090 My bad. 108 00:07:32,930 --> 00:07:38,200 Right going to just keep my storyboard open here so I can move it right back to where it was. 109 00:07:38,330 --> 00:07:38,960 Ok cool. 110 00:07:38,960 --> 00:07:44,190 So as you can see it's really hard to see me try to zoom in here. 111 00:07:44,270 --> 00:07:49,610 You can see the black text there and when I type it's green because we've set the text color but we 112 00:07:49,610 --> 00:07:55,110 want the placeholder text to show up as white first because that looks really cool. 113 00:07:55,330 --> 00:07:58,640 And let's go and set this back down to a viewable size. 114 00:07:58,640 --> 00:07:59,430 Awesome. 115 00:07:59,510 --> 00:08:03,520 So move that back to the initial view controller that looks good. 116 00:08:03,640 --> 00:08:07,710 Oh well now I'm going to keep it there because I'm going to rerun it in a second. 117 00:08:07,790 --> 00:08:10,660 So back to inset textfield uncomment. 118 00:08:10,670 --> 00:08:15,530 What we have commented and what we're going to do is we're going to return a rectangle but we're going 119 00:08:15,530 --> 00:08:18,520 to use UI edge insets. 120 00:08:18,730 --> 00:08:19,330 OK. 121 00:08:19,710 --> 00:08:27,140 Now UI edgin sets like we have done before basically creates a rectangle but with a certain amount of 122 00:08:27,170 --> 00:08:29,640 inset on the top left right and bottom. 123 00:08:29,900 --> 00:08:33,710 But you know what UI edge insets is actually not going to be enough. 124 00:08:33,710 --> 00:08:41,290 We need to give it an insets rectangle so that it knows Take this rectangle and inset it by x amount. 125 00:08:41,330 --> 00:08:45,590 So there's another thing that we can call here instead of UI edge insets. 126 00:08:45,650 --> 00:08:49,480 There is one called UI edge insets inset wrecked. 127 00:08:49,940 --> 00:08:51,590 Try saying that five times fast. 128 00:08:51,740 --> 00:08:57,980 And if you pull up the information here there's no description but you can see that it takes a rectangle. 129 00:08:57,980 --> 00:09:04,040 It takes the insets and it returns a rectangle taking into account the amount that you want inset which 130 00:09:04,040 --> 00:09:05,100 is pretty cool. 131 00:09:05,120 --> 00:09:12,710 So let's go ahead and let's set that up so that we can pass it the rectangle which for us we want to 132 00:09:12,710 --> 00:09:19,070 just give it the default rectangle of the textfield to do that we're going to use bounds which you can 133 00:09:19,070 --> 00:09:21,990 see already comes in from here. 134 00:09:22,010 --> 00:09:28,370 We're going to take the bounds but we need to modify where the text goes by using our insets and thankfully 135 00:09:28,730 --> 00:09:29,690 we already have that. 136 00:09:29,690 --> 00:09:33,860 So let's go ahead and let's just go ahead and pass in padding. 137 00:09:33,940 --> 00:09:38,300 All right now you I insets insect recked. 138 00:09:38,390 --> 00:09:40,280 We're going to pass in the bounds. 139 00:09:40,280 --> 00:09:44,120 We're going to pass in the padding and we're going to return that to the function. 140 00:09:44,120 --> 00:09:49,790 And you know what we want that to work for all three of these rectangles so copy this and paste it to 141 00:09:49,790 --> 00:09:50,780 all three. 142 00:09:50,780 --> 00:09:55,130 Now it's kind of weird but if you want this to work properly you actually have to do the same thing 143 00:09:55,130 --> 00:10:00,200 for every rectangle unless you want custom functionality like what I was describing with the placeholder 144 00:10:00,560 --> 00:10:01,580 earlier. 145 00:10:01,670 --> 00:10:04,040 That's just one thing that you can do. 146 00:10:04,250 --> 00:10:10,550 Now I'm noticing that we did not actually use text recked offset and I think that I did that because 147 00:10:10,610 --> 00:10:15,380 it would not let me because we have not yet we can't yet use it. 148 00:10:15,380 --> 00:10:16,600 So let's just get rid of that. 149 00:10:16,610 --> 00:10:22,280 We don't actually need it only the padding for the UI edge insets. 150 00:10:22,310 --> 00:10:29,330 So next what we need to do is we need to basically set up our placeholder text so that it's white and 151 00:10:29,330 --> 00:10:31,540 there's a really easy way to customize that. 152 00:10:31,640 --> 00:10:35,230 And at the very end we're going to need to use awake from NIB. 153 00:10:35,270 --> 00:10:38,790 We need to overwrite it in order to actually get this to show up in the view. 154 00:10:38,990 --> 00:10:44,630 But for now let's create a function called set up view that we will later call from awake from NIB. 155 00:10:44,630 --> 00:10:46,630 So type phunk set up view 156 00:10:49,840 --> 00:10:56,470 and what we're going to do is we're going to create a placeholder of type and s attributed string and 157 00:10:56,470 --> 00:11:01,120 the cool thing about that is that we can set specific attributes because it's attributed. 158 00:11:01,300 --> 00:11:07,780 And if we set an attribute of the font color or the foreground color of the text then that allows us 159 00:11:07,780 --> 00:11:15,980 to modify our placeholder so go ahead and type let placeholder equals and s attributed string. 160 00:11:16,090 --> 00:11:22,600 And if you put a print there you can see there is an option to pass a string with attributes. 161 00:11:22,660 --> 00:11:30,400 Select that and we're going to go ahead and pass in self placeholder K because the placeholder text 162 00:11:30,400 --> 00:11:32,290 for one of our textfield is e-mail. 163 00:11:32,290 --> 00:11:33,670 The other is password. 164 00:11:33,670 --> 00:11:38,170 So we're going to pass it the placeholder text and unwrap it because we know for sure there's a value 165 00:11:38,170 --> 00:11:39,220 that's fine. 166 00:11:39,220 --> 00:11:48,180 Now for the attributes we need to basically give it a dictionary with a key value and a value value. 167 00:11:48,340 --> 00:11:50,800 So go ahead and put some brackets there. 168 00:11:50,800 --> 00:11:57,670 And for the key what we need to give it is the foreground color key and to access that we need to access 169 00:11:57,670 --> 00:11:59,890 the N-S attributed string keys. 170 00:11:59,920 --> 00:12:03,770 We can do that by typing N.S. attributed string key. 171 00:12:03,770 --> 00:12:04,870 Now there's another one. 172 00:12:04,910 --> 00:12:09,620 There's a key within this that you can access by typing dot foreground color. 173 00:12:09,820 --> 00:12:11,050 OK so that is the key. 174 00:12:11,050 --> 00:12:15,430 The foreground color key and the value we're going to set is your eye color. 175 00:12:15,430 --> 00:12:20,380 Actually now let's do a color literal those are way cooler color literal and you can see it's already 176 00:12:20,380 --> 00:12:22,120 white that's perfect. 177 00:12:22,120 --> 00:12:29,530 So the foreground color is now set to white and all we need to do now is just call self attributed placeholder 178 00:12:30,040 --> 00:12:32,430 and we can set it to be placeholder. 179 00:12:32,710 --> 00:12:37,330 And now we have basically told our textfield to have an attributed placeholder or we could have done 180 00:12:37,330 --> 00:12:43,060 this in code by setting and attributed by making it an attributed textfield but I didn't want to do 181 00:12:43,060 --> 00:12:43,260 that. 182 00:12:43,270 --> 00:12:46,880 I thought it would be cooler to show you how we can set it up this way. 183 00:12:46,900 --> 00:12:53,080 So next what we're going to do is at the very top beneath padding we're going to override awake from 184 00:12:53,080 --> 00:12:53,880 NIB. 185 00:12:53,950 --> 00:13:00,370 We're going to call wups says set up view and beneath that we're going to call a super dad awake from 186 00:13:00,370 --> 00:13:01,000 NIB. 187 00:13:01,390 --> 00:13:02,380 OK. 188 00:13:02,890 --> 00:13:08,570 The Apple documentation asks you to do that at the very end of overriding things and awake from NIB. 189 00:13:08,680 --> 00:13:14,470 So now that we have set this up let's go ahead and head back to main that storyboard let's select our 190 00:13:14,480 --> 00:13:19,310 textfield and let's give them an identity of inset textfield. 191 00:13:19,360 --> 00:13:19,870 OK. 192 00:13:20,080 --> 00:13:27,010 Now when we run this it should give us a nice inset label here and a nice white placeholder let's build 193 00:13:27,010 --> 00:13:31,660 it and let's see if it worked then we're going to set up our shadow view on this great view controller 194 00:13:31,660 --> 00:13:33,480 it's really easy. 195 00:13:33,550 --> 00:13:34,890 We'll just set that up in just a second. 196 00:13:34,900 --> 00:13:36,600 But let's go ahead and let's verify. 197 00:13:36,640 --> 00:13:37,020 OK. 198 00:13:37,090 --> 00:13:37,440 Awesome. 199 00:13:37,450 --> 00:13:43,570 Look at that beautiful we have a nice white placeholder it's inset properly and when we type it's going 200 00:13:43,560 --> 00:13:46,830 to be green exactly what we wanted. 201 00:13:46,840 --> 00:13:47,860 That's perfect. 202 00:13:47,860 --> 00:13:49,720 So looks like that worked. 203 00:13:49,720 --> 00:13:54,270 Let's go ahead and drop the initial view controller over here so we can test this one for now. 204 00:13:54,490 --> 00:14:01,390 And we're going to just create a very simple subclass here that will basically give a nice little drop 205 00:14:01,390 --> 00:14:02,000 shadow. 206 00:14:02,220 --> 00:14:07,840 And that's just kind of enhances the experience it makes it look like it's floating out above the page. 207 00:14:07,840 --> 00:14:16,450 Very cool so to do that go ahead and right click on view click new file Cocco touch class you view is 208 00:14:16,450 --> 00:14:20,240 the subclass and we're just going to call this shadow view. 209 00:14:20,350 --> 00:14:23,120 Click next and create it in the view folder. 210 00:14:23,620 --> 00:14:24,400 And here we go. 211 00:14:24,460 --> 00:14:27,190 So get rid of that boilerplate code. 212 00:14:27,190 --> 00:14:32,050 We're going to go ahead and we're going to create a function just like we always do called set up view 213 00:14:32,920 --> 00:14:39,610 an inside set up view we're going to set a few different properties to give are you I view a shadow. 214 00:14:39,760 --> 00:14:42,520 The first one is the shadow opacity. 215 00:14:42,520 --> 00:14:43,020 OK. 216 00:14:43,270 --> 00:14:51,310 We're going to set it to be 75 percent opaque by typing self layered shadow opacity and set it to be 217 00:14:51,330 --> 00:14:54,610 zero point 7 5 for 75 percent. 218 00:14:54,610 --> 00:15:01,060 Next we're going to give it a shadow radius to say how big like how focused are unfocussed should the 219 00:15:01,060 --> 00:15:01,890 shadow be. 220 00:15:02,140 --> 00:15:09,160 So go ahead and type self-taught Layard's shadow radius and set that to be equal to 5. 221 00:15:09,160 --> 00:15:14,740 We don't want it to be too big and pillowy of a drop shadow but we want it to be nice and kind of closer 222 00:15:14,740 --> 00:15:18,740 so it looks like it's floating but it's not flying off the screen. 223 00:15:18,820 --> 00:15:19,330 Cool. 224 00:15:19,330 --> 00:15:23,040 So next we're going to give it a color of course because we need to know what color to show this shadow 225 00:15:23,040 --> 00:15:23,410 us. 226 00:15:23,410 --> 00:15:34,290 So go out and type self layer dot shadow color and we're going to set this to be a color literal because 227 00:15:34,300 --> 00:15:42,870 color literals are cool and oh you know what it's looking like it's not going to let me. 228 00:15:42,880 --> 00:15:43,440 Interesting. 229 00:15:43,480 --> 00:15:44,290 OK. 230 00:15:44,290 --> 00:15:51,270 Now for modifying you I've subclasses it requires a C-g color so at the end of you I color black. 231 00:15:51,310 --> 00:15:54,300 Go ahead and modify it so that it's a C.G. color at the end. 232 00:15:54,580 --> 00:15:57,190 And you know what this is all we need to do to create a shadow. 233 00:15:57,190 --> 00:15:58,510 It's that easy. 234 00:15:58,540 --> 00:16:06,820 Now what we can do is we can call awake from NIB and we can call set of view but if you notice this 235 00:16:06,820 --> 00:16:08,130 is kind of redundant. 236 00:16:08,170 --> 00:16:14,740 We don't really need to be calling it from a set up view because we only actually use this once we don't 237 00:16:14,740 --> 00:16:18,100 need to repeat this anywhere else in this in this subclass. 238 00:16:18,100 --> 00:16:20,040 So I'm actually going to make this a little more efficient. 239 00:16:20,050 --> 00:16:24,790 I'm going to cut this I'm going to get rid of set up view and just in Awake from NIB I'm going to go 240 00:16:24,790 --> 00:16:30,550 ahead and override this and then call super awake from NIB and let's get rid of set up view. 241 00:16:30,760 --> 00:16:37,210 And I think that we can actually make our inset textfield subclass efficient as well because we don't 242 00:16:37,210 --> 00:16:40,810 need to modify the the attributed placeholder as well. 243 00:16:40,810 --> 00:16:47,140 So let's get rid of that get rid of set up view paste that in call superdad awake from NIB and get rid 244 00:16:47,140 --> 00:16:47,800 of set up view. 245 00:16:47,800 --> 00:16:48,410 Sorry. 246 00:16:48,520 --> 00:16:50,750 We can make our code a little better that way. 247 00:16:51,040 --> 00:16:55,890 And now for chteaux view let's go ahead and go back to main storyboard. 248 00:16:55,900 --> 00:16:58,120 Select our gray background view here. 249 00:16:58,150 --> 00:17:01,470 Make sure you're not selecting the stack view and in the identity. 250 00:17:01,470 --> 00:17:04,060 Go ahead and call it Shatto view. 251 00:17:04,150 --> 00:17:05,680 All right that should be it. 252 00:17:05,680 --> 00:17:12,010 Let's go ahead and see if we get ourselves an eye shadow build and run open the simulator and let's 253 00:17:12,010 --> 00:17:13,040 check it out. 254 00:17:13,090 --> 00:17:17,680 You'll notice in the in the interface builder here there's no shadow but hey look at that when we open 255 00:17:17,680 --> 00:17:22,170 it we get a nice floaty shadow it just makes it look so cool. 256 00:17:22,170 --> 00:17:24,160 And yeah man I really like that. 257 00:17:24,160 --> 00:17:25,660 That's so awesome. 258 00:17:25,660 --> 00:17:32,860 So our textfield here we basically created a subclass to inset it and we set an attributed placeholder 259 00:17:32,950 --> 00:17:35,270 in code to be white. 260 00:17:35,320 --> 00:17:42,070 We also created a subclass of view to add a nice drop shadow which you can see here in our Interface 261 00:17:42,070 --> 00:17:43,350 Builder compare the two. 262 00:17:43,450 --> 00:17:44,350 No drop shadow. 263 00:17:44,350 --> 00:17:47,890 And a nice drop shadow Lalah very nice. 264 00:17:48,130 --> 00:17:49,270 In the next video. 265 00:17:49,270 --> 00:17:54,460 We're going to do is we're going to set up our authentication service which will allow us to actually 266 00:17:55,030 --> 00:18:01,780 open up the email button here type in an email and password create a user and authenticate them into 267 00:18:01,780 --> 00:18:07,650 our app so that we can actually start doing stuff with them authenticated like making posts adding groups. 268 00:18:07,660 --> 00:18:10,110 All of that amazing stuff. 269 00:18:10,180 --> 00:18:11,410 So I'll see it in the next video. 270 00:18:11,410 --> 00:18:12,650 Thanks for watching this one. 271 00:18:12,670 --> 00:18:14,050 And let's head on over.