Hi, Alex here from rebeloper.com and welcome back to the channel. Now in this
video I am going to show you how you can create a UI scroll view programmatically
in Swift. So let's dive in.
okay UI scroll views are quite a pain and we are going
to do it all in code but rest assured it will be an easy one. So let me just show
you what we are going to build out as you can see here we have a label Center
of container view. Of course it's not in the center of our view well the window of
our device but it is a scroll view and as you can see if you are just scroll
all the way down indeed this label is in the center of the
container view that the scroll view has but we will dive deeper into what the
container view is in just a moment. So this is what we are going to build out
programmatically in Swift, okay. Now let's just stop this testing your scroll view
and let's just create the whole project from scratch. So let's go to file new
project and I'm going to use the single view app template that I have created, go
ahead and check out that other playlist about custom Xcode templates on my
channel. So go ahead and click this. Click on next and the product name should be
let's say ... I will use the simple root view controller I will name this as a simple
root controller and I will use embed in a navigation controller because most of
the time the scroll views are in a navigation stack that is the most common
use case but go ahead feel free uncheck this embed in navigation controller if
you want to. But we are going to go with this forward. So let's click on next.
Okay, so I will drop my project here and I will create a git repository
so you may check it out on my github profile. Of course all of the necessary
links are down below in the description. So let's create this, okay. Now first
thing what we want to do is actually close this project so I will close this
because I am using mostly all of my project tiny constraints to constrain
all over my views and we will constrain our label to the center of our container
view so let's just open up terminal and we are going to create a pod file.
So there we go let's type in the terminal let me just hit command + so
you may see what I'm typing in here. Type in cs and the space just simply drag and
drop the root folder of your project. Hit return type in pod init to create
the pod file pretty basic stuff and now let's select our pod file and open it up
by dragging it to the xcode icon and let's set the platform to iOS 12
why not I believe iOS 9 is not enough for a tiny constraint. So pod tiny
constraints there let me just type it that in tiny constraints, great.
You just close this and let's return to our terminal and type in pod install and
that will install tiny concentrates, okay. Now what we want to do is go ahead and
from now on open up our Xcode workspace. Pretty basic cocoa pods instructions.
So let's just open up easy UI scroll view here and take a look at the app delegate
we are basically having our simple root view controller as the root view
controller of our window. Now let's take a look at the simple root view controoller
that is a basic stuff. Now what do we want to add here? Well you want to have a
scroll view and inside that we will create a container view and inside the
container view we will add our word subviews and in our case we will add a label that
will say Center of container view and we will position it to the center of our
container view. So let's just start off and let me just mark this viewdidload and it
is a very good thing to have these marks in your code because it's very easy to
navigate and find your functions and I will name this with capital letters, okay. Now let's
add our views. So again mark here and I will add views here and I will add this line
here so we may have these lines and when we search for that and first of all
let's create our let's say our label. So I will lazily load these stuff so
lizzy var label let it be of UI label and it will be a simple label UI label
and let's return this label and initialize it like so. Now let's add our
text to this label and I will add center of container view because and we will
get to this now a UI scroll view has a frame that just returns our label here
sorry about that. So the scroll view, the UI scroll view has a
frame but it also has a container content
container view that we will had here. So think of it like the frame is what you
can see on the screen right now but the container view is much larger like we
are going to create horizontal scrolling a container view so that is much
larger than what we can see at the moment on our scroll view. So let's
create this container view. Well that will be a simple view lizzy var I'm lazily
loading this again because we are going to set the content size of this
container view inside this initialization. So container view and it
is a simple UI view. Let view equals UI view.
Let's return our view and let's initialize it, okay. Now let's add
our views let's set our views background color to be white, okay. Pretty basic
stuff, no problems here. Now what we want to do next is set the frame of our
container view. But we will do that in just a moment for now let us just create
our scroll view and we are finally creating our lazy var scroll view and it
will be a simple UI scroll view. Let and I will name this scroll or rather yet
let's just name this view equals UI scroll view and we could add here a
frame but we will just add the basic dot 0 frame because we are going to add the
frame later on. So you will return our view here, so with that don't get any
errors like that and let's say add our let us add our views background color to
be again white, okay. I hope that wasn't too much difficult for you and now what we
want to do is set the a frame of our scroll view and our container view.
Now for the scroll view let's just go down here and there is a property view and if
you add a dot you can see all of them and you can have a content size okay and
that will be something and of course here under view we have our frame equals
to against something. Now the scroll views content side
and the container views frame have to match. Now let's add a property to for
that, so mark ... okay. So let's add our property here.
First of all and let me just comment these two so we don't get all of those
errors. Yeah, hopefully and they will go away for you too. So lazy var and I'm gonna
name this content view size and it will be of CG size and I will choose the one
with the CG float and I will have the width to be the whole width of the
screen. So self dot view dot frame dot width okay. And for the height
let's start off the same self dot view dot frame dot height but I want to make
it even larger so I will add plus 400 here. Now let's uncomment these and add
for the content size content view size and for the frame content, ohh sorry about
that content view size for our frame of our container view. Now that is yeah and
I need to add in here size, okay. So we have our content size for our scroll
view and we have our frame size for our container view but and this is larger
than the whole screen but how do we actually set the frame of our scroll view?
That is pretty simple. Let's add our scroll views I believe it's frame, yes
and it will be our view dot bounds, okay and that is it. So we have set our frame
to be the bounds of the view and we set our content size to be much larger
and we of course we have set the same content size as we have for our
container view, okay. Now I believe that is the basics of it. Now let's add this
scroll view container view and label to our view hierarchy. So what we need to do
now is first of all add our scroll view. So view dot add sub view scroll view
and that is it so you don't have to constrain it in any way because we
already have the frame of it and the same goes for our container view.
So let's add that next and of course we are going to add our container view to our
scroll view. So there we go container view.
Great, now that we have all of these we finally want to add our label and for
that we need to import tiny constrains because we are going to constrain it to
the center of the container view. So first of all container view dot add subview
and that's ad our label there and we want to Center it. So label dot center in
constrain able and is that is the container view, okay. Let's see what we
have got here. So let's build and run and see what we have built and as you can
see it is pretty easy we have created only these three views and our
content view size. Now we cannot see anything where we can see a black thing
but for to fixing that we just simply need to have our views background color
to be white and let's take another look at that. There we go.
Nothing really happens so what else do we need to add? Okay and now I can see
that this view actually is this view so if you have added any other name like
scroll view then this wouldn't be an issue so to fix that lets add in here
self view because we want to get the view of our controller, okay. So let's just
build and run here and see what happens. Okay, here we have center of container
view and basically we have all of this set up. Now what you might want to add
this will not make much of a difference but you still might want to know about
it is view auto resizing mask is to flexible height this is because
we are having a flexible height for our content view and let's add our always or
let just say bounces equals to true and
view shows horizontal scroll indicator set to true, okay. So maybe you want to
set the verticals coordinator and so on but basically if we build and run again
it will not change anything because all of these are set to these defaults but
again we can change them later on if we wanted to. And there we go we have set up
our scroll view easily in swift. Now I hope you enjoyed this video if you did
go ahead and give it a thumbs up and subscribe to the channel and hit that
notification bell to get notified of new videos.
Now it is your turn go ahead and take a look at this project and create your own
scroll views programmatically and I hope you do if you did go ahead and comment
down below maybe with a link to your app where you use this technique and as
always I will see you in the next one.