So we've added this H stack here and I said earlier that this will become more apparent at a later time.
So this is the later time if you will.
So if we click on one of these braces there you notice that this highlights that just tells us that
is the enclosing or where these H stack ends.
Now I can actually add a background color because we want to make sure we have this very nice background
it looks like a card.
So we're going to do that in the main or the parent enclosing stack right.
And I know that again by clicking There you can see these highlighted so I can come down here and a
dot and I'm going go and invoke the background a background like that and we can pass a view.
And as I said before if you could be anything so color orange.
OK.
So whenever one of more colors.
It's always best to just go through the class color and go get the orange.
Now let's save this and see what's going to happen.
Let me do that you can see now we have that nice orange color looking really good there.
But the problem here is that everything is squished in.
And we don't have breathing space or padding around.
Now we could if we want it we could have just come here and say we want to add a padding like that and
dot all to say all around we want a pattern of 989 for instance and run this.
Let's see what's going to happen.
Nothing really happens.
OK.
It gives us the padding inside but that's not what we want.
So what do we need to do.
Actually here is to change the frame meaning this whole frame enclosing our text.
So I'm gonna put first there instead of second and then say dot frame.
Okay so the frame is the whole view that we are using or we are creating at this moment.
So we gonna use that frame and we're gonna pass a few things with our frame and say with one the width
of the frame to be 380 in height.
I wanted to be about 200 units.
Okay so now we are specifying the width of our view.
In this case in the background as well as the height let's say this huh.
It looks much much better.
You'd notice.
Now we have what we need which is the bigger card and everything is in the middle.
Now the great thing here is that we can continue adding other modifiers for instance if we wanted to
add some sort of a corner radius.
We can do that right.
It's a type view as you can see there and we can pass through radius.
Meaning how round do we want these sides to be.
Okay.
In this case I just wanted to be about eight save and run we'll should see Whyalla.
Very nice rounded corners like that of course can change and play around with the number as you wish.
And we are going to add some shadow radius here we can pass.
And this case we want to just say five to give it this nice shadow to our card.
So it looks like it's actually pulled up a little bit you can see now there is a very nice shadow around
our card and just like that you can see the difference we made it just by adding the background and
a little bit of corners it shatters and so forth.
OK.
At this point here we can actually change our colors of our text because now we have a nice background.
So in this case here and so grey and when I say white and let's see this pink is fine let's make this
white all the text is white and this is white as well.
So save this.
Now we should see a more desirable and good looking hopefully card.
There we go.
Very very nice.
Now the next thing we want to do is we want to be able to add that nice image of Mr. Politician on yours
truly to the left here.
Now how do we do that.
Well there's reason why I made all of these to be inside of a stack page stack against ends where A
HORIZONTAL STACK meaning everything that we put inside of it is going to be horizontally aligned.
That means if I put an image right after our H stack we should be able to have it around here.
This makes sense because anything else we have this stack which we made sure so we can add all of these
vertically inside.
We have these H stack because we wanted to make sure at least this t the actual Twitter address are
side by side.
That's why we have the g h stack.
I hope you started to see the thought process in Swifty y as we stack things around on screen.
That means now I can come down here and add the image and we know how to do that now.
So I'm going to say image like that.
Now I'm not going to pass this system image.
I'm going to actually pass the image name which you should have added to your assets.
So the image name is this once it's gone Apollo's dash nice dash photo has to be exactly the same.
So I can invoke that because inside of our assets.
So Paolo's dash nice photo I such.
Let's save this and see if it's actually going to show Whyalla.
We have a problem here it looks like it took over the entirety of our card which is not exactly a good
look at all.
So we need to change this how do we do that well just like any other view we can pass few modifiers
as well.
The first one we need to pass is we sizeable to tell the system that this image indeed we want to make
sure that is a sizable and the next one I'm going to pass in a frame up because I want it to be a certain
size.
I'm going to make width to be about let's say 180 and also 180 for the height.
Actually any to say height like this named properties.
And there's another property in pass here called alignment right.
So this alignment I want this to be center.
So this photo here whenever we put that inside of this frame I want this to be in a middle.
OK.
Let's save this and see Ha ha looks much much better but he can see now we still have a few problems
here.
First of all we still have this issue of very sharp edges and also even just kind of squished down a
little bit.
We need to fix that.
There are different ways to fix this.
We can come down here and say fit scaled to fit like this.
You save and run.
Look at that.
It went ahead and actually made it look much better.
It's scaled to fit as such in fact I can come down here and comment this out.
Let's save this.
You see now things change a little bit but at least it works fine so we can still use scale to fit.
And of course past the frame as we did before notice the frame is going to constrain everything.
But if you want to make sure that the system scales everything to fit you we can just remove the frame
and things still work.
Now you can see the image and that squish now.
He looks perfectly very good.
The next thing we're gonna do is we're gonna go ahead and add some sort of like a circle around to make
it even nicer.
Now we could do that with patterns and go all over the place.
But again with Swift we can do that by using a dot clip shape like that.
And inside we have to pass another type which is a shape.
What are we gonna pass here is just a circle.
It's a circle like that.
And this circle here is an object of course like that.
Let's go ahead and save this and run.
Well I just like that you can see now we have a nice circle because we said the one could clip around
in passing the circle so it looks like this.
Very very handy.
Now check this out.
There's other things we can do.
I can say well I want to actually to add maybe a nice overlay circle here.
That kind of makes this image Pop.
All right.
So we can come down here as a dot overlay like that and overlay again requires a view and this view
is going to be type circle again.
But now this circle here will have to get other things right.
So inside of the circle I'm gonna go ahead and say dot to pass stroke like this.
And for our stroke I need to pass the color of the strokes on as a color.
I'm gonna make it white and line width right.
How wide is this circle around it going to be just gonna see about three save and run and just like
that I can see that very nice line there.
Very good.
And if I decided well you know what I want to add some shadow radius for that I'd Why do I say that
dot shadow radius just like we saw before.
Let me pass something like six run again and just like that you can see there's this nice shadow around
it which makes it more professional and looks really good.
All right very good.
And just like that we have a symbol out but at least you can see the power in the features of suit do
I.
And how declarative it is.
Right.
Because we declaring on what we want to see shown in our view in code.
Right.
So we create the H stack and we create an image as a side that is inside of each stack.
So anything else that is inside of V stack is gonna be vertically aligned.
So we have name Twitter account and the web address and all of that's going to be to the right because
it's inside again of H stack and we added that image.
So it goes and controls everything and put everything in place and just like that we have our base card
app.