Hi, Alex here from rebeloper.com and welcome back to this awesome tutorial
series on how to have SwiftUI in your UIKit project you heard that right
SwiftUI elements in UIKit and of course with the help of DuckUI.
So without further ado let's jump right into today's session.
Okay everybody. This is why how DuckUI looks like and you can take a look at it
github.com/rebeloper/DuckUI and if you are following along with this
tutorial series you will see that DuckUI is evolving quite fast and I let me just
see where we left off. So if we take a look at the pods pack lock and just open
it up let's say with text edit. We are having DuckUI with version zero 0.1.46.
I don't know if that is visible there but that's how we are
using our pod right now and if you take a look at today's version on the pods
pack on the github it is 0.1.53. So a lot of releases have been
wait, a lot of changes. Hopefully not breaking changes for you at this time
but make sure that you always update to the latest version and if something
breaks during these tutorials yeah you can take a look at the source code and
maybe change some things. I try to be as consistent as possible and not break
anything of course because this is version zero point
breaking changes could happen and most probably there will be some but not all.
So take that into consideration when you see version 1 and that is that should be
a stable version for you too to test it out. Now that being set let me just show you
how you can update your current project. So let's go to the root folder of your
project, okay. T here we go. And yeah okay this is just if you are
using SwiftUI or rather yet DuckUI in your brand-new project. So you are not
downloading this or cloning this later down in the future from my github
repository. So you need to update and this is how you do it so you open up
terminal and you type in CD so let's add the space and let's navigate to our
projects root folder and type in pod update and that will update all of the
pod files in your project, okay. And because inside our pod file and let
me just open that up again. Let me just open this with Xcode so I'm just going
to drag that in. So because DuckUI doesn't have any limitations so not
limiting to a certain version it will fetch the latest version. So let's see if
it does that, yeah it's going to take a little bit of time but why we are doing
this let me just explain that today we are going to talk about stacks, yeah I
should have started this tutorial by teasing you that we are going to talk
about stacks. So there we go. DuckUI 0.1.53, okay. And we are done
with the update, okay. So let's go back to our root you controller and as you can
see we do we have some basic label DuckUI here but let me just go and do the
occasional or rather yet let me just say kind of needed stuff when you update
I don't really know why this is needed but we should go to product and clean
our beard folder and once it is cleaned hit command B or just build
your project. So we can grab the latest version of the pods. I believe this
should be automatic but some reason I keep getting crashes
because it can't find the new functions that I have already added in the DuckUI
the latest version, okay. So today we are going to talk about stacks and you kind
of saw in the previous video that we are using a vertical stack here, okay. So let
me just go ahead and create let's say new labels. So there we go.
Hello DuckUI label 2 and let's just copy and paste all of this here I like
too and that's just a build and run and see how these vertical stacks, stack lays
out all over this, okay. And then we are going to build out a brand new one, okay.
Let's just wait for that and as you can see here we have our hello DuckUI and
down below here we have our next one. So let me just change this and build and run it
again and basically why is that. Well underlining DuckUI here we have a UIStackView
and it's set to fill its container. So here we have if we would
have added a debug so let's add a debug too. So dot debug and dot debug. So you can see
how this is all aligned and basically it is filling up all of the view that it's
given too and the container is set to have with the safe area. So yeah if you don't
know what I'm talking about safe area you are going to take the previous video.
So it is filling everything up. So I don't really like this so this has the
hello DuckUI has this large frame and the next one is just this one. So what I
usually do here just just to show you, we are going to talk about this later on.
We are going to add a spacer here. Okay and let's hit command R again and
that will pump up all, push up basically on these two here yeah and that is how
awesome it is, okay. So I told you that this is a
vertical stack. If we wanted to change this to a horizontal stack that is
pretty easy. Let's just change this single letter here. So the H stack and
yeah that is how it basically grabs the intrinsic content size of the label and
uses it to fill out that stack view, okay. Now that we have that and you can see
how basic vertical and horizontal stack works let just create one out of
scratch and take a deeper look at it. So let's see here. I will just grab all of
these and add them up here because why not because we can and that is the power
of chaining in a DuckUI. So let's just delete all of these, okay.
And just so you know debug releases so returns a UIView. So if you want to
style this label down here in the container or where we add our
layout well basically you can't use styles that have UILabel like let's say
the text, let's change the text. So if you want to change the style of this label
you basically can't because debug returns a UIView and yeah UIViews
don't have let's say text alignment properties or something like that.
But this is fine and we are going to talk about styling in a later video. So let's
just go ahead and create some stacks from scratch.
So first of all let's grab our container and yeah in the previous video I have
talked about D view controllers and how you can set it up and what this
container basically is. And if you type in a D and you just add an underscore
there and you can see these four types of stacks and as you can see they are
just simple UIStackViews that you can use. And we already use the V stack and an H
stack. Let's just a simple ones and I just use let's say V Stack with all of
the properties there. So first of all we have a list of views, than a spacing,
alignment and distribution. So let's just talk about all of these by creating
these examples. So in the views I will just add hello DuckUI label and hello
DuckUI label 2, okay. And yeah let me just add some returns here because why
not it looks really awesome. Now about the
spacing. Basically those are the spacings between the elements of your stack and I
will add in here 10 so we can visualize and this alignment. So if you basically
those are UIStackViews alignments and if you add in here a dot you can see
that center, fill, first base line and if you add it in here you can take a look
at the definition if you jump to the definition. These are all provided by
Apple. So I will just skip this here because alignment you should use center
where basically 90% of the time and or maybe, maybe fill. We have that set to
fill by default because it really plays out not with the fill distribution but
yeah I will just use fill for now and just delete that and we are not going to
cover a lot of that. So next up is distribution
and distribution, let just adding here a dot and you can see the five
distributions that UIStackView can have equal centering, equal spacing, filled
which is the default mode for our stacks in the DuckUI. Feel equally, feel
proportionally. Go ahead and take a look at all of the definitions or basically
I would just basically show you most probably in these tutorials the fill and
fill equally or maybe equal centering. We will see but go ahead and play with
those and for now let's just use filled and hard we are added we can simply
delete it because that is the default value. So yeah and the same goes for
horizontal stacks. So let's just go ahead and build and run and see how this looks.
Well it should look quite the same rather yet let just add in here a
spacer so we can see well it's kind of better to do that. I need a comma here
because spacing is added to the list of well parameters of the DStack method.
Okay! And right off the bat you can see that
here we have a spacing of ten and yeah if we would have added any other element
we would have some other spacings. Now how cool is the that, okay. Now let's
just do this for the horizontal stack just so you can see that and next up we
are going to use another power of these stacks and that is that we can and
basically we should in most more complex layouts we can't use a stack within a
stack. So let's go ahead and let's do that.
So let's adding here back to VStack and let's see I would just add in
divider and we are going to talk about dividers later in the tutorials but for
now let's just use vertical divider here and let it be of type let's see, let's
have the normal one, okay. So let's just build and run and see how that looks
like and after the divider, I yeah it's a
little bit down from the safe area layout guide. I don't know if
you can realize this but it's it's there. Okay! So now that we have that let's add
a horizontal stacks. So what I like to do is again and let's grab our container
because yeah this returns UIStackView and it needs to be added to some sort of
view and that is the container. So D underscore H stack and yeah I like
just use the one with the all of the arguments and let's just delete these so
we can get only the spacing and let's have here like 20. So we have a lot of
spacing and there we go, nice, okay. So let's move all of these 3 maybe or
let's just move all of these two out. So what you want to use here and it's
really awesome is command alt and square braces and it is just going to jump up
if you want to jump down you just use the other one so yeah real awesome.
Let's add a little comma here because the H stack is an element of the V stack
and what else do I want to do at here? We are going to use a spacer to
because I want to push them to the left. Okay! Let's see. Let's see what do we have
here. Okay! Build have succeeded and yet and
that's what we have expected. Now if you want to push everything to the right
then of course we should add the spacer again command alt and the square bracket
on between those two labels. Okay! Let's hit command R again and see
how that looks. Really, really nice and while we are at it let's just add in
here let's see alignment or rather yet let's
just jump into our definition and grab the distribution. So we are going to set
the distribution and you can see it's also already the field as default and
now let's add our distribution here to be let's say equal, fill equally.
Let's see feel equally, okay. And hit return rather yet command R sorry about that.
Command R is what how we run this. So this is how it is filled equally and I
don't know if you can realize this but this is kind of and let's just delete
some of this text, okay. So you can see with the debug that it is filling the
height, the width of the page in three parts, okay. So you can see that's that.
So we are not constraining to the interesting, this is a hard one
intrinsic content size of the label. Now if we go and select fill then we would.
So let's go back to the default value see how that looks, okay. We will talk
about a little bit about dividers and spacers but we will talk about that
later down in the tutorial series. Now I hope you enjoyed this one with stacks
and that is basically it you can build out very, very complex layout while 90-90%
of the layouts that you could encounter in UI will be or could be made
with this kind of stack and I hope you enjoyed this video.
In the next one we are going to talk about frames width and height. So if you did
like this video go ahead and give it a thumbs up, subscribe to the channel hit
that notification bell to get notified of the next video about frames width and
height where we will dive deep into more DuckUI awesomeness. So I will see you in
the next one.