Hi, Alex here from rebeloper.com and welcome back to the channel
and welcome back to this awesome tutorial series about DuckUI
SwiftUI in UIKitwell kind of and today we are going to talk about style
sheets. So let's jump right into the code.
Okay everybody. Style sheets. Well it's kind of not used
in iOS development it's kind of used in CSS because that's style sheets when it
comes from and it is very very powerful to use. Let me just show you the code
that we have written in the previous episodes we have been talking about
vertical lines we have been talking about containers, yeah. So we have just
created an SEImageView that is an image view with a shadow and corner
radius, okay. Being that said we have that name label here and maybe we want to
have the name label displayed with the same kind of style throughout all our app.
Meaning that we should have a bold system font of 23 and maybe even some
more and we will cover just a little bit in just a few seconds when I create my
style sheet. But the point here is that we should create some sort of a style
for our label that we can reuse throughout our app. So let's just do that.
Before we do that, before we create a style sheet let's just read this name
label because it is going to be a little bit easier to add the style once we do
know how it will look. So let just comment this out and create a lazy
variable. Lazy var name label, okay. And it will be simple of type you
label and I'm creating a lazy variable because here I can add my
properties to my label. So let's create a label here it was UILabel and
let's return our label and right off the bat let's add our font. So label dot font
and it will be of bold system font of size 23, yeah. That is great and let's see
what else do we want to have here. Maybe we want to add our labels
let's see what do we want to have text alignment, yeah. Let's add a text alignment
of center so we can basically see it yeah just, just this isn't for your taste
go ahead and create your very own it doesn't really matter I'm just adding
here a few properties and maybe let's add our label is multiple rather yet
let's see here is set multi-line. So what this basically does in DuckUI is set the
multi is multi-line the number of lines to be zero so we have a multi-line label.
Okay and basically that is it for me. I will just add the name labels text down
here so because that will be always be changing but let's see let's add our
text here and let's add bender okay and basically that's it let's hit command R
and see how that looks. And we should have kind of the same
thing we should have the bender here. Let's see we do have a spacer so we
don't really see the effect of our label being centered. So I have deleted that
space or there and we can see that we are centering here. If we would add a
little bit more so bender let's just add a little bit more bender there. Let's see
hit command R and see the multiline centered bender label, there we go, six.
Let me just add a little bit more maybe so yeah why not.
Great, okay. Now this is going to be two line because we are setting the height
of our label here as a constant. Now what we want to add so we can do have that
free lines of code is to have the imageview vertical, yeah we should have,
we should, I believe we should have a spacer here but yeah the ImageView
should be somewhere else. Let's remove the ImageView all together. why not.
Let's see what we have now. Maybe we need to remove the image view to a separate
horizontal stack yeah it looks really really nice and why we are at it let's
remove the vertical line because it has some huge in setting there, okay. And now
we can basically focus on our label, okay. There we go.
Two lines of code and now, or rather yet label. Two lines of label and now we
should see at least three or four. They look really, really nice. So yeah there
you have it, we do have text alignment set multiple and a font. Now going to
styles. So let's create a style sheet here and it is pretty straightforward
new file, a swift file next style sheet.
Okay! Let's create that, let's import DuckUI
here and let's import layoutless just in case because the style sheet comes
from the layoutless framework. So let's create a struct and name it style sheet.
Okay and inside here we could create our styles for our label but let
just create because there will be buttons and so let's create another
struct that will encompass all of the labels styles and let's create one here.
Let let's see name, okay because it's the name label and it will be a style and it
will encompass UILabel, there we go. What we need to add in here so I believe this
needs to be a static let. Let's see, oh let's add our equation here
okay and what we need to add in here is a dollar sign zero so we are grabbing
our label and let's see set and I'm just because you kind of don't have auto
completion I will just copy all of this out, let see copying it, pasting it in
there and instead of the label I will just type in dollar sign zero, okay.
Let's say that and that, okay. Let's hit command B so we can see that all of this
is great, it works and yeah we have our style for our UILabel make sure if you
are working on other UI elements just change this and these should compile
correctly according this is a UIButton then you can set the title and so on you
know and now we can set our style sheet for our label and it is
pretty straightforward. So I want to just remove all of this so let me just
comment out and create let name label, okay and it is of type UI
or rather yet let's let's create it UILabel and here you can see that we
have style initializers of style and we are going to create a style sheet use
that style sheet and we have our label and we have our word name and that is it.
So you have removed all of this line of code and of course for other name labels
yeah that just build and run to see that this really works and you can create as
many style sheets of course or as many styles as you want. So there we
go we have all of that as it should be. Okay! Just make sure that you have that
style sheet available like so and you initialize your label with a style.
Now you could use this if you don't have or you'd rather use this lazy variable you
could initialize the style here too, it's up to you.
It depends but yeah I just showed you this because it's pretty good that we
can use just a single line to create this name label. Now that is it for me
today and that is it for style sheets with DuckUI. 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 we are moving forward with DuckUI and as usual I will
see you in the next one.