Hi, Alex here from rebeloper.com and welcome back to the channel. N ow in this
video I am going to show you how you can add a placeholder to your UI text view.
So without further ado let's get started.
Okay, now as you might have known or a not maybe you are encountering this
problem for the first time UI label does have a placeholder but UI text view
doesn't. So that is what we are going to solve today and we are going to solve it
with a help of KM placeholder text view that is right we are going to use an
awesome github repository so go ahead and click the link down below in the
description so you can get access to all of the resources including the project
files that we are going to build out just now. So let's create a new Xcode
project and I will name create a single view application and name this ... okay.
Let's click on next and add in here, create a github repository so you can
take a look at it later on, okay. We are going to close this off because we want
to open up terminal and type in CD and drag our root folder of our project into
our terminal and type in pod init so we can create our pod file and I am pretty
sure you know by now why we are doing this and that is because if you are an
avid fan of our channel then you know that I am going to add our favorite pod
and that is tiny constraints and that is because we want to constrain our views
easily. So pod install is the next step. Let it install
and there we go we can now open up our Xcode workspace. But while we are at it
let us just add our next pod and that is our KM placeholder text view and if you
just scroll down you will see and you can add it inside storyboards too but we
are going to do it in code for and now. So let's just copy km placeholder text
view so we don't get any typos and place that in there. Pod ... there we go. Let's
close this let's go back to our terminal and pod install again there we go.
We have all of our pods installed and now we can open up our Xcode workspace, great.
Let me just minimize this so we can see even better.
Great, now what do we want to add here. Well first of all let's go to our root
view controller and set the views background color to be dot white so we
may see actually well basically it's black by default so it's kind of ugly
that's that we need to add our background color to be white. First of all
let's create lazily label here or rather yet not a label, let's create a text field and if
I'm correct I have said to you that labels have placeholders no that is not
correct, UI text fields have placeholders.
So let me just show you that UI text field
let textfield equals UI textfield and let's return our
text field here and let's initialize it and that should take care of this error.
All right, there we go and now let's add our text field to our view and we are
going to do that with the help of tiny constraint. So let's import tiny
constraints and we can go back to adding our subview text field and we are
going to constrain it to the top to the left and I'm going to add height of
let's say 40. So text field and edges to superview excluding dot buttom and that
is the power of time constraints for you. Okay and we have dot top and I want to
set this 36 our first inset had a plus here dot left and let's say 12 and again
another plus sign and dot right and the value again 12 using safe area true, okay.
We are going to use safe area here, okay. Text field dot height equals let say 40.
So let's build and run and see how this looks. It should look fairly simple. We should
have our text field and we should be able to click in it and there we go.
We don't see it just yet so let's customize it a little bit. So let's go to our text
fields layer and let's have our corner radius to be 6.
That is fair enough or rather yet let's have a real nice corner radius of 8 again.
And let's go to text field layer and we want to have border width to be 1.5.
That is fair enough but we need to have our borders color. So again text fields
layer border color equals let say dot light gray that should great but we need to
add cg color here and maybe we should append to the beginning UI color here
because border colors are of type cg color. So let's change that light gray,
cg color. There we go. And finally let's add or textviews
placeholder to be I am a UI text field, again it's not text view sorry about my
misspelling, it's a text field, okay. UI text field. So let's build a run and
see how it all comes out now because it should come out real and nice so I am a
UI text field. Let's go into that and let's type in here
Hello text field, okay. As you can see we have some slide, inside here but I won't go
into that I will just simply add this after the recording and you will be able
to take a look at it on the github repository so go ahead and click the
link down below to be able to find the github repository. So for the moment
disregard this missing in set for the hello textfield.
You will be able to find out after I have added this after the recording.
So I am a UI text field, there we go that is a real placeholder
and if we just delete it you can see I am UI text field. Now let's do the same
for our text view. So let's create a text view. Stop this and it will be lazy var
text view UI text view equals let text view and now let's return and
this text view and let's initialize it great. Now we want to add this to our
view. So view dot add sub view text view and finally let's append it to
draw so we are going to anchor it bottom of our text field into the left and
right of our super view and we will just add a height of it of let's say 120 or
100 because we want to see that it's little bit bigger. So text view top to bottom of our
constrainable is text field and offset should be 12 and the rest can be easily ignored so
text view left to super view and I will have an offset of 12 again
and using safe aria layout guide so I will add in there true, okay. The same
goes for a right so just simply copy this paste it in there replace it with
right and have this to be a negative.
Finally our textviews height should be 120, okay. This won't be seen
right now so what we want to do is add a corner radius border with color and
border color so we can see where the text view is basically so let's copy
this out and paste the tv there and let's build and run and see how all of this
looks like. And hopefully we should be great so I am a UI text field and here
we don't have hello we don't have anything for our placeholder. So let's
fix that and a way to fix it is again if you remember KM placeholder text view.
So let's copy this out and let's import it. So import KM placeholder text view
and it is pretty simple you just need to replace UI text view with
KM placeholder text view and now you should be able to get the property placeholder.
So tv dot placeholder equals I am UI text view, great. How awesome is that but
let's just check this out and see that we really do have that placeholder there
and great I am a UI text view there we have our placeholder let's just head in
here hello there we go. Maybe we want to change the font here so I as a final
step I will just show you how you can set the font of our textview let it be
be UI font
and let say system font of size 60. Let's build and run again and see that
indeed we have our placeholder there with a much nicer font. So hello again
this inset is not quite good so I will just add that extra code after the video
finishes because this is not the main point of our current lesson. So go ahead
and take a look at the github repository later on. It will be down in the
description link, okay. Now that is it for today I hope you enjoyed this video if
you did go ahead and give it a thumbs up, subscribe to the channel and hit that
notification bell and I will see you in the comments down below and in the next video.