Hi, Alex here from rebeloper.com and welcome back to the channel and welcome
back to this exciting tutorial series on how you can have SwiftUI inside your UIKit apps.
Yes! That is correct! Not the other way around like UIKit
elements in a SwiftUI app but SwiftUI elements in UIKit apps with the help
of DuckUI. So without further ado let's jump right into today's episode.
Okay! And today we are going to talk about dividers and spacers. Now if you have
been tinkering with a SwiftUI you will see that there are some new
elements and they are called dividers and spacers and in DuckUI there is
something called like those, okay. So what are basically spacers and dividers?
When you want to layout your UI you want to have those white spaces, you want to have
those gaps basically dividers and spacers you want
to have some space to breathe, okay. So I know that we have covered this in the
previous videos but today we are going to dive deeper into dividers and spacers.
So this is where we left off if you don't know what I'm talking about go
ahead and take a look at the previous videos and I'm just going to simply
quickly commit this. So this is the previous one frame width and height.
So we were talking about frames width and height and how you can set them in your
basically stacks because that's how you should lay out your views with DuckUI
and of course with SwiftUI. They are highly recommended steps, okay but
today we are going to talk about dividers and as you can see I already
have a divider here but let's just take a look at it. So let's add a debug on
there and yeah let me just add a debug on the
second label too. So we can a little bit talk further what we're those views are
and how they are laid out. And you should use debug in your code when you
are laying everything up, okay. So first of all here you can see that I have a
vertical stack with a spacing of 10 and these white spaces are the spacings.
So that's okay. This top view so called because it is indeed a UI view is our
vertical divider, okay. So it is set to normal, okay. And we will talk about the
spacer in just a moment. So what are these? Basically these can be a lot more
types you could use a divider simple and add a perfect like a picture perfect size
to it and I will just do that in just a moment but for now let's just use these
predefined types like, extra large, extraplus, more large, medium, normal and small.
You already saw the normal. So let's take a look at the extra small maybe and maybe
at extra large. So yeah you could just play around with it and get the feel of it
yeah that is that and another thing that you should be aware of that this divider
is a vertical divider. So we are going to use it only in a vertical stack. So let's
add another divider in this horizontal stack. So it is pretty simple to add.
Let just type in divider dot and just start typing in horizontal and let's make this
extra large, why not and let's add a debug on and that too. So debug.
There we go. It should compile, oh we need to initialize
the divider, there we go. So let's hit command R or just hit the play button and
let's run our project and there we go. I don't know if you kind of see the, but it
should be really pretty very simple to see that here is our extra large divider
because here we have our spacing for 20 and here we have our simple view and
here we have our hello DuckUI and between those is a spacer. We are going
to talk about in just a moment about spacers, okay. So that is a horizontal
divider, okay. Now maybe you don't like these extra large ones or basically they
are predefined and you can take a look at the code to see basically how many
pixels are there. But if you want to fine-tune your dividers that is pretty
simple you just set in our case of a horizontal stack, you just set the width.
So set width and let's see I don't know maybe 23 I believe that is not inside
the standard divider types and yeah that will just print out 23 of width, okay.
There we go. It is 23 and the same goes for the
vertical you just set not the way the height of the divider and basically the
head is all four dividers. So let's move on the spacers. Now with spacers those
are just empty UIViews and as the name suggests it is filling out the remaining
space. Now one thing to know is that the distribution of your stack should be fair
because it will fill everything up and because this spacer is between the
simple view and hello DuckUI labeled too
it is filling everything up between those two. Now if we would move this down
a little bit so let's have this command alt and square places and make sure that
you are on the line that you want to move just move it down there and hit
command R. You will see that the label will be pushed to the left of our view
till it hits and the spacing of 20 and it hits this view the simple view and of
course this first one is the divider. So yeah that is the point of a spacer.
It fills up and yeah one use case is that let's say you have a cell here and you
have a profile image view, you have the name and some description. Now if you are
using fill on the stack, it will feel all of the stack but if you just push it up
with a spacer then it will push everything up like it should be maybe
just add a divider on the top. So it now it might push down a little bit of text.
But the spacer is used in this very own example. Now you can see that in the
vertical stack here we have a divider, label, container and spacer. Now all of
this is basically pushing those 3 up to the top of our stack. Let's just
comment out for a brief moment and see how this would look like. Well not quite
as pleasing as you would like you will see that the last element is stretched
throughout the whole container because yet we have the distribution of fill.
So yeah just so you know this is how you can use spacer and divider. Now that is
it for this tutorial. Please go ahead and take a look at the divider and spacer
and you know it they are quite humble but they have a huge super power in
laying out your views of course inside and
stacks. 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 to get notified of new
videos because in the next video we are going to talk about padding because yeah
why not we can have dividers but padding's
are much more awesome. So yeah go ahead and take a look at DuckUI, it is on my
github repository and as usual I will see you in the next one.