Hi Alex here from rebeloper.com and today I will talk about how you can
create the labels that actually have tappable hashtags and mentions so without further ado let's get to work!
Now I have created a basic template project here
that we will build up from scratch in just a minute. But let me show you this
is a label that has the tribe as a hashtag and
@rebeloper as a mention. So when I tap on them
of course we consider now here but if you run it in Xcode we will have some
good print statements inside our lock. This is what we are going to build.
Now this can be used in social media apps. You know that hashtags and
mentions are a must in social kind of apps. So let us just create a new project
and I will just simply... I need to go... Stop this. And let us just create a new
project. Okay, let me just resize this so you may see it better. And it will be a
Single View Application. Let's click on that and we are going to call this
active label tutorial. Now why is that? That is because we are going to use a
GitHub repository that I absolutely love and it is perfect for this hashtag and
mansion and even more handling. Okay, so let us just click on next and we will
drop it onto the desktop. We will create a git repository on my Mac because I
will throw this up again as usual onto my GitHub repository
just click the link down below and you will be taken to it. And you will be
taken to all of the resources that are necessary to all of my YouTube videos.
So whether to click the link down below. Okay!
Let's create this on my desktop. Okay, now first thing first let's create and
I will just go through it really fast I will create... I will delete the
Main.storyboard and access the ViewController by code. So first of all let
us just delete our Main.storyboard and the reference to it too.
Next up going to AppDelegate in the application didFinishLaunchingWithOptions.
Let's call up on our window and the capital W (Window), okay! And let's make
our window key and visible. Next up let us just create our ViewController and
it is ViewController. Great! And now let's add this ViewController to the windows
rootViewController pretty easy. Now let's go to our ViewController I will
just set our views background color to white. Okay, you have seen me do this
hundreds of times if you are looking at on my YouTube videos so this should be
very very familiar and straight forward. Okay, now we are going to add a label an
active label. So we are going to use Cocoapods to import active label and to
make centering and anchoring real easy for this label we are going to use
TinyConstarints. Let us just close this
and go to our finder and here we have our acting label tutorial. And open up
terminal. Let me just make this a little bigger so you may see what I type in.
Okay, and simply just type in CD and drag and drop the root folder of your project.
Hit return and type in pod init to create a pod file. Now for the pod files
you need to add the pods. So what we're going to do is just simply drag this pod
file onto the Xcode icon. And it will be open by Xcode. Next up let's enable the
platform and platform iOS 9.0 is okay. And next up we add our pots. Now the
first pot is ActiveLabel. Great! The next is and the final is TinyConstraints.
Okay, close this and let's go back to terminal and install it by typing in a
pod install. Now this should take just a few seconds well it all depends on your
internet connectivity.Now we should have an Xcode workspace created for us
from now on of course we are using this Xcode
workspace. We need to open our project with this Xcode workspace from now on
because we are using Cocoapods. Now let's go into our... first of all let's build
and run. Just build it out and as you can see we have a few let's say errors
but because you know there is this white dot inside the error icon we know that it
can be fixed pretty easily. Now this is... these errors occur because of swift 4.2
and 4.2 has been just released and I'm sure that in the near future
this will be figured out and updated in the Active Label and
of course in the Tiny Constraints repository so for now I would just go
through it really fast and fixed all of the problems. It's basic Swift 4.2 syntax
issues we just need to handle them by just clicking simply on these fixed
buttons. I am pretty sure that most probably you will not have these issues
but if you have go ahead and just fix them not a big deal. Okay! I just scroll
up I forgot about one at the top. Okay, let's just scroll down and of course and
how you learn how you can fix other repositories issues and don't worry if
you come across an error just try to find out what happened. This is what real
programmers do. Okay, do we have? Yes we have one last. Let's unlock this file again
and of course we need to unlock this file. UIWindow... Yeah sorry about that
it was UIWindow. That's why it didn't really autocomplete. Okay and let's
update to recommended settings while we are here. Now we are ready to build
out our application. Now we need to import here ActiveLabel and it doesn't
really show up so I will just command+B. Hit command+B for building our project
and now we should be able to have that autocomplete and here it is ActiveLabel.
And let's import TinyConstraints too. Okay, first of all let's create our
Active label. So let's type in lazy var and I just call this label because it
doesn't really matter how we call at this instance. And it will be of type
ActiveLabel and let's just construct this here real fast. And var = ActiveLabel
and let us just return our label. Ohh sorry about that we have to add a label.
I am just too fast in typing. Label, great! Now what we want to do next is add this
label to our controllers view. So view.addSubview(label). And with the help of TinyConstraints
we will constrain it to the center of
our view. So label.CenterInSuperview that was really easy. Now let's set up
some things for our label. Type in the label and numberOfLines = 0.
What this means is not 1, not 2, not 3. It is as much as we want. Now next
up we want to align the text to be centered. So textAlignment = .center
Okay, next up we want to add our labels text to be let's set the text
color or better yet we leave the text color as it is. We will add a text here
and if you haven't watched my videos on how to create this a Multiline labels
then go ahead and find it on my YouTube channel. And we'll have a link down below
and your Card. Okay, now what text do we want to have? Well I will type in...
...and the next line will be... and I will add even a dot (.) here. Great now let's
build and run and see how this work. Because we have typed quite a lot of
code now it's time to see what it actually does. Okay, here we are we have
a #hashtag and a @mention. We already have it implemented. Now let's add a color for
these hashtags. Okay, so label. hashtagColor and that
will be of type let's say I believe it was .blue. Now let's add .mentionColor and
that is = .red. And let's add our label textColor to be .black. Okay!
I believe that that should be for the color. Let me rerun and see how it looks now
Okay, pretty great! We have our blue hashtags
our red mention and our text color. Now to enable these hashtags and mentions
all we have to do is just set the enabled types. So label.enabledTypes
and this will be an array and we will enable our hashtag... I believe it is... let
me just double check and this is what you should too when you have... okay
here we have our enabledTypes and I don't want.url for now so I will just
copy these two. So these are of type active type but I just copy and paste
these two. So mentions and hashtags will be enabled.
Now finally we want to know whether a user tapped on a Hashtag or a mansion.
Now that is pretty simple so let's type in label and let's
handleHashtagTap. And here we have our hashtag and let's type in here... let's print it
out. So let's say... and let us just name this hashtag and hashtag. Okay!
Now the same goes for mentions so label.handleMentionTap. We add in a mention here.
And let's print this out for our mention. Okay tap on mention and
mention. Okay let's see how that looks.
Okay let's tap on this hashtag and if you can see here we have tapped on
a hashtag. Let me just move this away. Now let's step on our mention.
We have tapped on the mansion mansion so I want to again change this let's see in
our text here #thetribe and @rebeloper. Okay, let's build and run again
and see the new locks. Okay tapped on #thetribe tapped on the @rebeloper
mansion and that is great and if you didn't already now go ahead and check
out our new store at store.rebeloper.com. Where you can also join The Tribe.
Now I hope you enjoyed this video if you did go ahead and give it a thumbs
up and subscribe to the channel and hit that notification bell in case you want
to be notified instantly when I upload new videos! Now it's your turn go ahead
and comment down below! Do you use hashtags or mentions in your app? Go
ahead and comment down below I'm really curious, if you ever had a chance meeting
this kind of Active Labels in your apps. And as always I will see you in the next one!