Hi, Alex here from rebeloper.com and welcome back to the channel and welcome back to
the series where you can learn how to have SwiftUI like elements in UIKit
and today we are going to talk about labels. So let's jump right into it.
Okay! Now today's topic is labels but before we do that let's just talk a little bit
about views because yep every element basic is a view and just open up the
pod file the pods project here and the pods folder and the DuckUI folder and
you will see a lot of files there of course. What I want you to show you today
is just go ahead and select this UI view plus swift file and there you will see
all of the functions or properties that we have on this UI view extension. So if
you tap on this button you will see that we have quite a lot and yeah let me just
go through them and these might be missing or other more will be added as
the framework DuckUI involved but yeah I would just guide you through what
are these all means and yeah maybe just give you a few examples of the most used
ones. Now edge to safe area means that we want to add this view to the parent views
safe area if it's the case or not then just use the edge too and the view that
you want to add this view too. Set background color self-explanatory set
background image with the content mode self-explanatory.
Set frame, set height, set width that is okay we had a separate video on that.
Now here comes some interesting ones add rotate by and that is the degree it
rotates the view by the certain degree as image it creates
actual image of the UIView and every view that is in there so you can use
these to create images that you can share
via the social networks. Add sub views now you could use add sub view several
time but if you want to add more than one sub views to a simple view then you
can use add sub views of course remove sub views that will remove all of the
sub views from the view. Set corner radius and we can set the corner radius,
set shadows, set border width and this is the border color with width, set border
width yep that is self-explanatory and now we
have some special types of methods for border setting with the color with the
size and here you can see that set border top. I don't know if you can
really read this but reading out loud. So yep we can have some padding and finally
we have set scale and then we have some animation extensions. Spring animation
with a duration, completion handler yeah that that. Then we have some basic
animations that we kind of use all the time add pop, add big pop or we had a add
pop big that's the name of the method there, add reverse pop and at shake four
times if you want to shake the view for a number of times and fade in, fade out,
fade to and the last one is horizontal. Now that is the horizontal meaning that
we said width and for the vertical here we set the hight. This is what we use for
the divider, okay. And finally set circular that will create a circular view.
Okay! I'm won't go into these because go ahead and just mess with them
it's really fun to do so but today we are going to talk about labels and of
course you can use all of these or other elements because
UILabel is a child of UIView and UIImageView is a child of UIView.
So you can use all of these that I have talked about in any of those childs.
So today we are talking about UILabel and the specifics of the UILabel. Now you
have all of those that you might encounter in the UILabel, but I have
already set up on top the most important ones that are frequently used and that
is background, set multi-line text font, this is text color and text the actual
text shadow, text alignment line break mode yeah and
that is basically it maybe is user interaction enabled. Is it enabled.
You could use number of lines instead of set multi-line because basically set
multi-line sets the number of life to zero so it adjust to the text according
to its frame so if it's a long text it will calculate how many lines it needs.
So I know we have already dive into label the last time but yeah you can
see we have some text alignment and some height and we added some debug. Now do
you remember that when you add padding and debug it will change the return to
UIView. So after the debug you cannot really add a text alignment. So you make
sure that you are aware of the that. So I'm just removed and this and believe
leave the text alignment to center and let just talked a little bit about let's say
the background, okay. So UILabel background and maybe set multi line.
Okay! So there we go. Let's add a dot there and background color and make sure
that you actually use the one that is returning a UILabel. So we can change
the other methods after we have added our background.
So let's have our background color here to let's say red so we can see that real
nice, okay. And just build and run so we can see the changes. Of course we have a lot
of labels this is coming from the previous episode where I have introduced
to you the awesome framework layoutless. Now how to layout for your UIViews
and where all of your UI elements without any constraints. So that was
really fun to do and yeah I recommend using layoutless with DockUI and of
course it says that as a dependency. So there we go.
This is our hello label zero and it has all of these background colors. Of course
if you want to change it go ahead if you your eyes ache by that red color.
Next up let me just see what we have here. So next up we have a set multi-line
and that is pretty awesome because it will basically wrap the whole text
around so it will wrap the text. So we did, let's just add multi-line and that is
just it and now we just copy this out and paste it a lot of times so we have a lot
of text there and just delete this. So command X to cut it out because I want
to paste it in just a moment. So now we have just gone one line and it
will have those three dots at the end, yeah that's not what we want
maybe if you want you can set the number of lines so let's say number of lines
and make sure you return again the UILabel and let's see 2 but I believe that
will still not be enough and yeah you could use in some cases two lines but
most of the time you want to have all the text there. So I'm copying
and paste in the outset multiline is the command are to run our project again and
oh I need to get rid of this set height, because yeah we are setting it as a
multi-line but after that we are setting its height to 50. So now it will adjust
accordingly. Of course make sure that you are inside D view controller and you
are having all of these awesome scrolling features set, so yep. I go ahead
and take a look at the whole playlist it makes sense, okay. What else do we have here?
Let's go back to our UILabel and yeah text alignment you already seen that the
line break mode you can set line break according words and so on what I'd
like to show and I usually add in here is the text and font and I believe we
already have the text there. Let's see, yeah this is the text and let's add in
some fonts and I usually add that after the text so font and again just return
the UILabel one and let's say dot system or rather yet let's use a bold
system font of size let's say 32. So we have a large huge font there and
as you can see there are a lot of methods here. So let's just use some
returns here so we can have everything nice and smooth.
And we just remove some of these like so, okay. Okay, maybe add the text there too, yeah.
Real nice and now you can see all of the methods that you have here and maybe
set multi-line too. Great! Now let's build and run and take a look at what we got here.
So it's you can really see what when you have all that label awesome work.
Yeah! One last thing I believe we still
have time for another one so yeah text color, maybe. So if you type in text we
see that it will have in a string and if you type in text again you will
see that we have some color this text. We already have the text so let's use color
and for the text color I will use this green to make our view more uglier if we
can at all. So let's hit command R there and we will see and yeah this is a very
readable very nice to code out, okay. Now that is it for labels. 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 because and you need to hit the notification bell
to get notified of the next video and that will be about, let me just take a look at
here, yeah. That will be above the buttons and how to handle buttons the new
reactive way. Okay and as usual I will see you in the next one.