In SwiftUI it's often advisable to avoid
using Spacer unnecessarily. My Spacer can be a handy tool for creating flexible layouts over
using it can lead to unexpected spacing issues and make your code harder to maintain instead use frame.
This approach not only makes your code more readable but also ensures better control over
the placement and distribution of views in your SwiftUI interfaces. Promoting a more organized
and maintainable codebases. Yes, Spacer is used everywhere in Swift UIbut today I'm going to
show you a better way of aligning your views. We are going to go through how to use Spacer
and what's it good for and then what are the disadvantages and then I'm going to show you what
to do instead. So I have set up here vanilla Xcode project. Now if we a build and run this in the
Simulator you will see that we have the globe and the hello world text. This is centered that's
how VStacks, that's how containers work, they are centered. So what are Spacers? Well with Spacers
you can just space, you can just push out, well push to a somewhere all of the other views.
You see it's just pushed up. Now why is this happening? You have to understand why is this layout the
way it is and for that you need to understand a concept about layouts in SwiftUI and that is
there are basically two types of using SwiftUI, one is a push out view that is trying to push
everything away from itself. It's trying to take up as much space as it can and the other type of
view is a pull in view. It's trying to pull every other view around itself to itself, it's trying
to stay as small as possible. Now as you can see hello word the text and also the image, the system
named image is a pull in view. It's trying to pull everything around itself and also the Spacer is a
push out you. It's trying to take up as much space as it came. The same goes for a color,
let's just have a color right over here so you may better understand how these push out views work.
So the color is taking up as much space as it can and also as you can see there's also a padding so as
much space as it can. So that's our one use of a Spacer. As you can see also the color is doing the
same thing because it has the same properties. It's a push out view but what if we are using a Spacer
with a color. So for that I'm going to remove the padding, let's build and run again so we can see
what's going on right over here and I'm going to add just a Spacer right over here and let's just
remove this vertical stack into a horizontal stack. So let's change that. Now as you can see the
spacer now behaves a little bit oddly because, okay these are two push out views but the color is kind
of has a priority, a higher priority than the Spacer and yeah it does so you need to know
that the Spacer indeed is a push out to you but when added to other push-out views it will adjust
accordingly. So it will squeeze itself to whatever space it, you know the other push out view needs and
the color red in this case it needs all of the space. Now there's also you can see this white line,
that's the Spacer. In some cases we don't want that. So there's another initializer for the
Spacer and that is with the minimum length. So with the minimum length let's just add in here 30 maybe,
that would be the minimum length of the Spacer that would be pushed up onto from another push
out to view. In this case is 30. Some cases you just want to the color red in this case or a text
or whatever to take up as much space as it can. Therefore we are abandoning the default value that
the spacer has for the minimum length and setting it to zero. Now the color red is taking up all
of the space if it needs to or if it wants to. Of course this is optional so if you just set it
to nil then the default value will be used or just remove the minimum length property and then
the default value will be used which is a nil and this number is kind of a magic number from Apple,
you know it just looks great on all devices. At rebeloper.com/mentoring I offer an exceptional
mentoring session tailored specifically to SwiftUI enthusiasts. Whether you're a beginner looking
to grasp the fundamentals or an experienced developer aiming to master advanced techniques
I will provide personalized support. Hands-On training and practical insight to help you unlock
the full potential of SwiftUI. Join my mentoring program today and embark on a transformative
journey towards becoming a proficient Swift UI developer, the link is down in the description.
Now there's another use case for the Spacer, that is if we add a Spacer after our color and that will
just squeeze it between and most probably you know this, it's just setting things in center.
But this is so cumbersome, you know you have to add a new view right over here. You have to change this
to the horizontal stack. So let's hit Command + Z all the way back so we might have our initial hello
world with the globe. And this time around we are going to take this further. I'm going to show
you why, well what to do instead of Spacer because you know Spacer is fine but there are much better
ways of aligning our views to whatever we want to. And let me just remove the padding because we
don't actually need that and what I'm going to add in here is a frame. Now this is really strange.
Usually don't like frames, well I do like frames but not with custom like set values,
like constant values with the width and height. Some cases that's okay but it really you need
to be aware how it messes around with the layout of your SwiftUI view. But we're not going to
use width and height. We are going to use max height right over here, max height, there we go
and we're going to go with infinity and with the frame of max height we have also the option
of alignment right over here, to be initialized with the alignment. And then we can just choose,
let just go with the top. Let's hit Command + R and now you see we have the same result but our view is
not cluttered with the Spacer we just had a view modifier which is really, really amazing.
Now what if we wanted this, well of course if you just moved it with the line on the bottom, it will be
on the bottom. I'm not going to add that. But what if we wanted to move all of this to the leading part?
Well with Spacers you would just need to have a horizontal stack and then just add a Spacer
over there but with our frame we just say max width and again use the value of infinity and then
for the alignment we are going to say it's leading. And we are going to be put right over here our
VStack is going to put right over here. And please note that we did not actually change the our
VStack into a horizontal stack. So if we wanted actually a VStack which we do we wouldn't need
to nest all of it inside the horizontal stack, which again makes our code much more complicated
with the pyramid of doom and so forth. So this is really, really amazing. Now it might be cumbersome
to just know okay now we are in max width or max height what should we do, therefore let's just
create a simple extension for this. So let's have an extension of a view right over here
and I'm going to create a function alignment and that will take an alignment actually and
what type of alignment? Well we need a top bottom leading and trailing. so the default alignment
has a lot more, therefore I'm going to create an or an alignment. So let's create a frame
alignment let's just call it frame alignment, there we go. And we will have four cases: top,
but, leading and trading, okay. So this would be of time frame alignment, okay.
It will just give us back some view, there we go. Okay! So we just want to switch through that alignment.
Switch alignment and I'm going to use Xcode completion which is really, really handy over here.
And we're going to say self dot well let me just copy this out and adjust it accordingly.
So if we are on top we want to have a max height and infinity and right over here it will be top.
I'm going to hit Command + D on this line to duplicate it at Option + Command + closing brackets to
move it down and the alignment should be a bottom. Again let's duplicate this and move it down and
make the necessary changes. In this case it would need to have max width and the alignment would
be leading of course. Command + D, Shift + Command + closing brackets and trailing is the alignment in this case.
Now you will see that we are going to have one warning and one error and four
of these warnings. Basically what this means is that we are trying to return some view but we are
returning four types of views right over here. Also we are not actually returning because we are
did not add the return keyword before all of these, all of these four. So to make it really,
really fixable, really simple just add the at view builder at in front of your function that
will mean that this is going to build our views therefore it might expect different types and
yeah the view builder takes care of it all. So now instead of frame max width you could just
say dot alignment dot let's just go for leading now. So we can see that actually working, there we go.
We have the leading and by the way this is much more worthy, so it's a a much more as
a natural language. Let's just go for top maybe alignment top, there we go. We have that.
Of course, well actually let's just add also center maybe in some cases you just want to set it as center.
So let's add a case of center. Let's duplicate this, there we go.
Duplicate moving it down and let's have this as a center. By the way the default alignment is center, so yeah
let's just select center also. Center, there we go. And it is centered. Of course you will
rarely use this you are going to go top, bottom, leading, trailing in most cases and yeah
that's how you replace the Spacer. Now this is one really good one liner that you can use
in your SwiftUI Project. Check out another 10 one-liners that I'm really, really fond
of check out the video it's right over here.
