Hi, Alex here from rebeloper.com and welcome back to channel and welcome back
to this epic tutorial series on DuckUI, SwiftUI in UIKit.
Well kind of and today we are going to talk about lines so let's jump right into the code.
Okay! Well lines are kind of an overlooked UI element but they are
really cumbersome to make and tedious to update and so on. So today we are going
to talk about DuckUIs line and let me just show you how easy it is.
In the previous video I have been talking about shadows with corner radiuses and we have
been creating a kind of let say a profile image view that is a circle and also has
shadows. So that with the help of the SCImageView. Let me just build and run
because we are going to build upon that. So, yep let's see here we have our
profile image view and I would like to add in here let me just make this little
bit smaller and then I just want to add in here a line and that will be a
vertical line and maybe add some label here with text I don't know first of all
let me just downsize this to maybe half of it or maybe let it be just 20 the
corner radius and 40 the width and height of our image view and then let's
just create a new label like let main label and that would be a UILabel and
let's add in here some font a real quickly, bold system type font of let's say
60 or 70. I just have in 70 that he is pretty great and yeah I believe the
color is black but if not then we will change it and let's add right here a
text of bender, okay. And while we are here let's grab our
name label and just ad it right before our image view, okay. Let's see how that
looks for now, okay. And after that we will talk about lines, yeah. You can see
it's it's there but it's not quite there. I don't know if you can see that I will
most probably make this a little bit larger so we can see 40, 80, 80 you could
have this let's have this 23. But you most probably will have more detailed
views and you will use the old one but just so we can see, okay. So here we have
our UIImageView, well D_SEImageView and our label. So we want to add their line
and what we do is just create lines. So let's add it here. That is a vertical
line and D_Line and if you take a look at if we can have a type and we have two
types horizontal or vertical that is great. Thickness let it 1.5 and the
color, let's use D_Color. Again take a look at D_Color. I always talk about
these new kind of stuff because I like to use them and they are
all part of DuckUI and I have separate videos than that. So I have already
covered the color in a previous video so go ahead and take a look at that.
Let me just have this maybe gray 5. Okay, that should look fine. We will take a
look at it and we will see, okay. Let's add our vertical line right between our
name label and image view and again this is how
easy it is to just add that to our horizontal
stack, okay. That's just wait there. Here we go. We have a vertical line.
Maybe the gray 5 is kind of kind of hard. Let's see use maybe light. Build and
run again. I would like to have that subtle light, yeah. There we go.
It's much better and let's pump it up a little bit gray too and yeah so there we go.
We have it. Now we need to add some
insets to it because they are all sticked together there. So let's do that
and that is pretty simple with a help of layoutless of course. The vertical line
just ad in here. Inset and insetting I will use the one with the UIEdgeInset
that you could use insetting left, right and so on but I'd really prefer
this one and I just add in here UIEdgeInsets and then top let's
have an insert of let's say 6 left 12 bottom again 6 right 12 again this this
is kind of arbitrary but it kind of will look good in my opinion. Let's see, let's
see how it looks. Yeah! It kind of looks good. Let's have a
little bit more there right and left and let's push it a little bit button down
so and to the top. So let's have 12 here 24, 12 and 24 and again this is just me
tweaking it doesn't really matter. Yeah! It looks much, much better maybe a
little bit to the top again. Let's say 24, 24 and on the right I will give it that
12 because I want to have that label sticking a little bit further closer too.
Yeah! It looks really, really good. Now finally let's add
horizontal label here, align sorry. So let's create that and we will finish
off this tutorial with that. So horizontal line, okay and again this is a
D_Line and let's choose our horizontal thickness 1.5 is okay and I will choose
the same color, okay. And this horizontal line needs to be added under our stack,
our horizontal stack here. So yeah let's just add that in there and let's add
some inserting warrior here. So insetting and I will use this by because I want to
have insets of 12 on all of the frame of our all of the sides.
Okay! Yep, looks pretty great. Okay! Now that is it for lines and this can be
used in various of sizes, thicknesses sorry and yeah they can cover a lot of
UI, yeah that is four lines. I hope you enjoyed this video. Hope you did if you
did enjoy this video go ahead and give it a thumbs up, subscribe to the channel
and hit that notification bell to get notified of new videos because in the
next video we are going to talk about some interesting things about styling.
Okay and the usual I will see you in the next one.