Hey everybody what's going on this is Caleb with Deb's Lopes dot com and in this video we're going to
build some custom view subclasses to customize the appearance of several UI kit elements.
Let me pull open the simulator to tell you what I'm talking about.
Are you the button here.
Has this really cool rounded border.
We're going to create a custom subclass of UI button that's going to allow us to create buttons with
that cool border.
We're also going to create a cool subclass here for our search bar.
It's going to be a subclass of UI textfield and we're going to create that as well.
OK very cool.
So let's dive right into it.
Pull open your X code project and in the view folder we're going to right click new file and we're going
to start with our button.
OK.
Now go ahead and select cocoa touch class.
This is going to be a subclass of course of UI button like so.
And we're going to call this a rounded border button.
OK.
Because it's a button that has a rounded border obviously.
So go ahead and select next and create it into your project.
There we go.
So close the assistant editor.
And what we're going to do is actually get rid of this comment to add boilerplate code and we're just
going to call awake from NIB.
And basically awake from NIB is well it says here prepares the receiver for service after it has been
loaded from an interface builder archive or nib file.
Basically this is like view to load for custom views.
Can't think of it like that it's called after the view is loaded into the screen so we can customize
the appearance of this UI button in this class.
So go ahead.
I'm just going to get rid of this extra space we don't need.
And here we go.
So we're going to go ahead and first call super awake from NIB and now we're going to go ahead and think
we need to set a background color.
We need to set a border color a border with and a corner radius for this button.
Let's begin with the background color.
So we're going to go ahead and call background color and set it equal to a color literal.
This is one of my favorite things about X code 9 is that you can select a color literal and you can
go in and you can choose a color and it's the same thing as typing you eye color dot blah blah blah.
It works just like a normal color which is cool.
Now I want the background of my button to be clear.
So what I'm going to do actually is I'm going to go ahead and just choose like white and then go into
my R.G. B slider's and set the opacity to zero.
And now I have clear which is pretty neat.
So background color is now set to clear beautiful.
Next up we're going to go ahead and access the corner radius we're going to round our button and we're
going to do it mathematically.
So go ahead and type layer dot corner radius.
And now we need to think we have a rectangle.
If you can imagine a rectangle shape.
We need to basically make it so that the edges are perfectly rounded and think about what it would take
to turn a square into a circle.
We could basically take each corner and round it a little bit more until each corner round perfectly
to a circle.
And if you were to segment it in half you would have a perfect arc going from one quarter of the circle
to the other.
And that's basically going to the midway point of the square right the height of the square and the
width since since it's a square but with a rectangle shape what we can do is we can take whatever value
the height is and we can divide it by two.
So if we had a rectangle that was 10 high.
It would only take five to get to the middle.
And so that's the radius we want to round each corner so that it makes a nice perfectly rounded corner.
So on the corner radius what we're going to call is frame height divided by two and that's going to
take the frame of our button.
Cut it in half and then that is the perfect corner radius to make the edges rounded.
Pretty neat.
Now we need to go ahead and give it a border So let's set a thickness for our border by typing layer
up border with and we're going to set it to be equal to three.
OK that's a nice thickness.
That's the exact same thickness I used in the simulator here.
So we're going to go ahead and use the same thickness and a border is not a border without a color so
we need to go ahead and set layer border color.
And again we can use a color literal of white.
Pretty cool.
So now our rounded border button is good to go.
We're going to go ahead and enter main storyboard.
Go ahead and select that button and we're going to give it a class of rounded border button.
Ok press enter and as you can see the class is updated and we cannot yet see the actual view.
Updating just yet because we have not set up our table view but just trust me.
It's good to go.
I promise.
And now we're going to go ahead and set up the subclass for the rounded text field that I showed you
in the search View Controller right here this one.
All right.
So let's do that.
That's going to actually go into search.
But let's create the subclass first.
So go ahead and right click on View and let's go ahead and click new file Cocco touch class and the
subclass is UI textfield.
All right.
Now let's go ahead and let's name this rounded border textfield and go ahead and create it just like
so very cool.
So now what we're gonna do is we're going to go ahead and set up a few different properties.
The border for one we're going to set up the radius and we're also going to set up what's called an
attributed placeholder.
And that's going to allow us to customize the font and the text color of the placeholder which you cannot
do by default unless you turn on attributed placeholder and I want to show you how to do it in code
because it's pretty cool.
So go ahead and call awake from NIB call super awake from NIB.
And inside of a week from now I'm going to get rid of this white space.
We're going to go ahead and just set the background color by typing background color and we're going
to set that to be equal to white like so by typing color literal and there's white already good.
Next we're going to go ahead and set the corner radius just like before by typing layer corner radius
and we're going to set it to be equal to frame height divided by two.
So we get a nice rounded corner radius.
Then let's think what do we need to do.
We need to set a border color so layer wups border color.
Let's set that to also be a color literal but we want to use that nice blue color we've been using.
So select that here.
And again if you want to use that it is 4 7 7 6 E-6 and below that we're going to set a border with
three just like we did with our rounded border button.
So we have a consistent theme here so layer border with equals three.
All right.
So that's great and all but I said that we were going to set up an attributed placeholder and let's
do that in code.
So we're going to type let placeholder equals and s attributed string already.
And if you go ahead and put it parentheses you can see there are tons of ways to initialize an attributed
string.
We want to select the one with a string of course and attributes.
That way we can set up all the custom attributes we want.
So go ahead and select that.
We're going to pass it self dot placeholder K so whatever we have set as a placeholder.
That's what's going to show up right.
We can set the text but natively unless we explicitly choose an attributed placeholder we can not set
up a custom placeholder.
So as you can see there is a dictionary here with a key an s attributed string key and a type any or
sorry a value of any.
We're going to go ahead and pass it a dictionary here and we're going to actually access the NSA attributed
string key property by typing s attributed string and going down to NSA attributed string T.
Now this is an enumeration.
And so it's going to allow us to go ahead and push dot and we can access all these properties which
is really cool.
So we're going to set the foreground color because that's going to allow us to actually set the text
color which is exactly what we want but remember this is a dictionary.
So foreground color is the key.
And for the value we're going to go ahead and just call a color literal and set it to be blue.
OK.
Because look at my example here on the simulator if you take a look you can see the text is the same
blue color as the border and the rest of the app.
Now the textfield itself has what's called an attributed placeholder and it is of type and as attributed
strings so to set the attributed placeholder in code all we have to do is set it to be equal to the
placeholder we just created.
And now we have a custom text field that we can use as our search bar.
So let's go put it in.
Let's set the class and then let's go ahead and see if it worked if what we did worked.
We're going to actually build out the search AVC in it in a video to come.
But let's go ahead and let's just set up the textfield now I'm just really excited to see it work.
So a search for you I text field.
Go ahead and dragged into place.
And you know while we're here let's set the background color back to white that looks better.
And let's go ahead and let's set this about here I think that looks pretty good.
But if I remember correctly versey is also in the simulator screen.
So we need to set that as well.
So let's go ahead and copy this and then let's paste it into here and let's do our best to replicate
the constraints.
I believe it is eight and 10 and 10.
OK.
Very cool.
So this is let me move this down.
We're going to set this to be 8 from the top not 9 10 and 10.
And let's give it a fixed height of 30 just so it's a nice even number.
Beautiful.
And now let's go ahead and set up our textfield here to stretch from left to right.
So we're going to pin this 20 from the left 20 from the right and let's pin this 20 as well from the
versey label.
Let's give it a fixed height of 30.
That's probably good.
And let's set those constraints.
Very cool.
So now let's go ahead and let's set up the font so we're going to go ahead and set custom Avenir next.
And let's set it just to be regular.
That's fine.
Size 16 is probably good.
And let's set the placeholder to say enter a search query.
Dot dot dot.
And of course we can center that font.
That looks pretty good.
Now remember we've already set the placeholder text to be blue but we want the actual font itself to
be blue when we're searching.
OK.
That will make it so that we don't have black text with the rest of it's blue.
It might not look very good.
So the font is set the constraints are set.
Now all we need to do is to set the identity.
So select the text field select the identity inspector and set this to be equal to rounded border textfield.
Now we can go ahead and build and run to see if this worked if our border worked if our color for the
text placeholder worked.
So let's build it to iPhone 7 and let's see how we did.
Here we go.
Looks like building is going to work just fine.
Beautiful.
And here's our version of the app we've got in just a second we've got our table view and we have our
search bar and look at that.
That's exactly how we wanted it.
We rounded the edge.
We set a border we set the placeholder text and now let's see what happens when we type our X Swift.
Beautiful.
Look at that.
That is so cool we can type in it and we can delete it and we have our attributed placeholder.
That is really awesome.
And the only thing I'm noticing I'm not sure if you see this but if you zoom in you can see there's
a little hairline border around the textfield.
Hey we're going to get rid of that by going in and simply selecting no border.
Now when I build and run you'll notice that little hairline border is going to be gone.
We're not going to be able to see it which is exactly what we are hoping for.
So here we go search and look at that.
It's gone.
So we have now successfully set up a custom view subclasses.
If it worked for the textfield you can trust that it works on the button.
We'll see that later when we actually create the subclass for our trending feed cell and we're going
to do that very soon.
Don't you worry.
So let's go ahead and head over to the next video where we're going to build our get hub repository
model layer and then following that we're going to actually set up our feed cells and get get ready
to connect the outlets so we can start passing in some dummy data to test our table view.
So let's head over that way and you there.