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.