Hi, Alex here from rebeloper.com and welcome back to the channel and welcome back to
this awesome tutorial series on how you can use SwiftUI basically in your UIKit
app yeah you heard that right SwiftUI in UIKit. Well with the help of
a DuckUI. So without further ado let's jump right into today's episode.
Today we are going to talk about frames width and height. So really exciting tutorial about
how you can set your elements, your views frame width or height or rather just
let's jump right into the code and see how that looks like. Now in the previous
one we have been talking about stacks and we have added these hello DuckUI
label and let me just build and run and we have also added a debug here. So we
can see all of the intrinsic content size of our label correctly or basically
the frame so this is a really nice visual feedback here. We can remove that
in a production app of course and today we are going to tinker with the frame
and to do that let's just create a brand new view because there are simple views,
they are stack views and there's everything else. So let me just go ahead
and let create a simple view here and that will be a simple UIView, okay.
And let's just add a debug here. So we are just going to debug it work rather
yet let's see yeah let's just debug it. Okay and in the horizontal stack if you
wanted to add a debug let just add debug. So just so we know in DuckUI
there are kind of three things that you need to know about and that can
be added as chainable so we are going to have views, stack views and everything else.
So let me just explain. When you add a view here, so let's add our view here, not
view, a simple view and just copy this out.
So when we add our simple view here. Okay! So here we have our simple view and
some methods very for UIViews and for other stuff like labels or buttons and
let me just give you an example here. Okay! So simple view dot let's say
background and you can see it's called set background color and let's set
in here red and if we go to the label and just start typing in you can see
that when it returns a UILabel is just calling background let say dot red
again. So these are some minor changes or rather their differences in the syntax
but you get the point with basically UIViews you kind of always use set or add
and the rest besides stack views because yeah with
stack use I try to use add like here add debug with the rest is just background
frame and so on. So yeah that's just that so you know
about a little bit more about the syntax. But let's take a look at the frame and
the frame is something that is returning always UIView and yeah let's just add
in here set frame and let's see CGSize and yeah
I'm just going to use this as 100 by let's say 200 it doesn't really matter.
Okay and for that let's just build and run and see how this looks and maybe add
a debug here so we can basically see what we are adding because the simple
view has a simple background of clear, okay.
And there it is here we have our word simple view and because we add is our
debug to our vertical stack we have this green debug here. So I will just maybe
let's just add this to our horizontal stack. So there we go.
Just add it there, okay. Now let's add our labeled a frame. So set
frame and let's see CGSize maybe you want to do this maybe you don't I would
just show you how it is done. So let's add in here 200 by let's say 300.
I don't know maybe it makes sense to you but maybe not or rather yet let's add a debug
to here. So let's add in here, sorry a debug. So dot the where is it, where
is it, yes that debug, there we go. Hit command R finally. Now we will be able
to see that the DuckUI so the simple label is pushed to be of width 200 and
of course of height 300. So yeah that is basically it and that's frame. So you
can set the frame but most probably don't want to set the frame, those are
really, really educated when you want to set the frame. But rather you want to set
the width or the height of your element and that is pretty simple too so let's
delete this set and just type start typing in let's say
width here. So simple view set width and let's see 300 and let's delete for now
the frame for our UILabel. So let's hit command R to build and run
again. So yeah that is a width, yeah we have pushed really really hard out there.
So let's have only 100, okay. So these are arbitrarily you will see use
cases in your own app, so there we go. Here we have our 100 with, okay.
Maybe let's have this for our labels so if you type in with you will have that say 100.
But you might not want to have set width to your code but it depends, it depends
what do you want to have maybe you have only one line of code and you want to
have those 3 lines that okay there's more text there then you can set the
width if you want it too. Same goes for the height and what should we have here
let's see let's add our first label out. So command alt and square braces
and yep there we go. We have moved that up there and it looks really nice and
now we want to set the height to be let's say
I don't know 200 to be really noticeable there, okay. And yeah that is basically it
frame width and height and of course this is the height of our frame because
we are having only this one in the vertical stack and yeah that is
basically it for today's video. I hope you enjoyed this one about frames width
and height, I know it's kind of strange right now
because you can't really see the use cases but
just know that they are in there and you can use them at your willing. If you did
like this video go ahead and give it a thumbs up, subscribe to the channel and
hit that notification bell because tomorrow we will be talking about
dividers and spacers. I know we have kind of touched those in the previous
episodes but we are going to dive a deeper into them in the next video.
So hit that notification bell to get that new video on your feet and as always I
will see you in the next one.