Hi, Alex here from rebeloper.com and welcome back to the channel and welcome back to
this awesome tutorial series on how you can add SwiftUI elements in UIKit.
You heard that right, SwiftUI elements in UIKit and today we
are going to talk about images. So let's get started.
Okay in the previous episode
I have talked about UIButtons and how yeah you can observe them and how you
can react on that observe with let's say a log of success tap. Now today we are
going to talk about images. So let me just remove all of this so I don't get
all of that warnings and I just remove the button too and there we go. We are
just leaving the stack and let me just go back there so you can see a lot more
of the code. So images. Well if you take a look at DuckUI and you go into the
UIImageView because yeah that is what we are using, you can see that there are and
a lot but there are quite powerful. So we have a background color circular that
says the image to a circular. So we'll round it. Insets, frame, height and width.
Yeah, basically that's it and yeah we are going to cover these in this episode and
we are going to create first of all let's create an image view.
So let image view that is a UIImageView. So yeah basic and we are going to
add that image view into our stack, vertical stack. But before we do that let
me just create a horizontal stack because I want to make it let's say some
sort of a square so yeah you will learn how to add in here.
So yeah layoutless again, layoutless if you could use a simple
stack but for some reason this project that needs to make that pretty clear
that this is the stack from our layoutless framework. So I will have this as
horizontal stack and hit let me just go down for the image you hit command
alt and the square braces and move that all the way up so we have our image view
there and I will add in here a divider. If you don't know what the divider is go
ahead and take a look at the previous episodes and because we are in a
horizontal stack this will be a horizontal divider. I will use this let's
say let's use the large because I want to push it all the way to the right and
finally I want to add in here a spacer. So, yeah it occupies the remaining space.
Now to this to work we want to add our image you first of all let's add an
image view let's see here image and yeah let's just initiate this
as with image view with an image. So there we go and let's hit command M to
bring up our bender here our dummy image and just add it right there make sure
that it is here you can see it. Otherwise sometimes Xcode and crashes and what I
will use for now is just set a frame. So frame and this is basically a size but
with SwiftUI uses frame so yep it's just the language. So it will be a CGSize
type let's see width and height I don't know maybe for the width 300 in
the height 100 yeah you will see, okay. Let's just hit build and run and see how
this looks right now. Yeah, it's kind of stretch. So let's have
this as 200, okay. Looks much, much better. Okay, now what can we do here let's go
back to our UIImageView. Well basically we already set the height and width but
if you prefer to set it with the frame you can do so with a width and height
it's the same thing we can have some insets that I won't cover I have
already covered padding in a previous episode. Here we have our background
color and circular. So, yeah let's have our circular added here so maybe have
some circular and we have our radius of let's say 100. So let's remove the frame
I believe we need to do that, let's to command R and see how that will look.
Yeah, pretty straightforward. Now it's kind of looking stretchy but if you do
add a squared image that will look really nice if not then let me just do
this little hack for you we just remove all of this and create a lazy variable.
So let lazy var. Oh, not let. So lazy var image view it is
of type UIImageView. There we have our image view UIImageView. There we go.
W ith an image let's just drag and drop bender here, there we go.
And then we just return our image view. Okay and let's add image views content
mode to be scale aspect fill, okay. And that should be it. Let's see yeah what
I will do is set this to circular 100 and I would just not add it inside
here why not add it right into the stack. Just so you know that you can do that too.
Now you might ask why do I need to do this? Well DuckUI doesn't support
content mode at the moment but most probably it will when it will just type
in content mode or maybe just take a look at the UIImageView methods and
you will see there may be content mode, yep it is an evolving framework. So yeah
that is image views. Yeah and basically that is it. Now there is some issue with
adding a circular or you could have corner radiuses I don't talk about that
because we have already talked about that in the views video of our playlist.
You can have any method that a view has on any childs of a view like image,
UIImageView, UILabel, UIButton you name it.
So yep, take a look at the UIView methods we can have edge to, set corner radius,
set shadows, set border but yeah one tiny thing with image views you can't really
have it's kind of cumbersome to have the same time shadows and corner radiuses
but I do have an upcoming video that explains all of that how to do that and
that is for the DSCImageViews of shadow, corner SC image view that with
that you can have both of them. So yeah that is it for images in
DuckUI and that is with UI elements for UIKit. I hope you enjoyed this video.
If you did go ahead and give it a thumbs up, subscribe to the channel and hit that
notification bell to get notified of the next video and that will be let me
just pick here it will be about text fields. Hurray and how you can bind them
to labels. Now the next video will be so awesome it will show another
awesome part of reactive programming. So without any adu I will see you in
the next one.