Hi, Alex here from rebeloper.com and welcome back to the channel and welcome back to
this awesome tutorial series on DuckUI that is SwiftUI in UIKit you
heard that right SwiftUI inUIKit well kind of.
And today we are going to talk about scrolling. So let's jump right into the code.
Okay! You might have seen scrolling a little bit with DockUI in the
previous episodes but today we are going to consecrate a separate video for just
scrolling and there are basically two ways of scrolling and I will show you
the easiest one first and then you can just skip the second
part if you don't want to take a look at the more tedious one but with that also
comes with DuckUI. So let's see what do we need here. Well basically you first
need to install DuckUI or update if you are following along this tutorial and
make sure it is at least 0.3.12. You know how to update
cocoa pods I don't really need to show you that today. So make sure that that is
there and if you don't know what is your current version go ahead and open up the
pod file lock and there you will see that, where DuckUI. Here you have the
current version of DuckUI, okay. So that's that let's just jump right into
scrolling and the easiest way to do that is with layoutless. So it's pretty
straightforward. Let's see, let's just create a simple
stack so make sure that you already imported layoutless. As you can see at
the top of the file here and we will have let's say a vertical stack and
let me just add, let just add a simple view
here and I will just make that view here. So let simple view equals UIView and I
will give it a background color. So again this set background color comes with
DuckUI and I will give it a new background color that is specific to
Xcode 11 and we will talk about these new colors in an upcoming video so if
you haven't already done so subscribe to the channel and hit that notification
bell so you get notified of the new DColor scheme for Xcode 11 and if you are
watching this when you already have those system colors in Xcode 10, 11 sorry
then you can use DColor to use the old Xcode 10 and prior system colors.
So, yeah just take a look at the upcoming videos about DColor. For now let's
just hit here under D_Color and as you can see here we have Xcode 10
and Xcode 11. I will use Xcode 11 and let me just use not accessible you could use
accessible. I will use the light one and let's have our clear blue. So that will
be the background color of our simple view and let's just add that to our
stack. So simple view and last I've been here filling parent and layout in
container. Now if you don't know what container is if it's just a simple view
that is filling basically the D view controller. Go ahead and take a look at
the whole playlist especially the viewcontroller section of
DuckUI. I believe it's one of the first on the playlist. So yeah that's that.
Here we can have our simple view and it is filling the parent. So it's just build
and run and see how this looks like and it is pretty straightforward. I believe
we should basically yeah we do have that but what we need to do is not do this in
the view controller instead we should add this after we set up our views with
our safe area. And you saw these safe area layout guide like this is why that
is because we use self area. So let's use none here so it should be prettier but it
doesn't really matter in our case. So there we go. We have our simple view but
what if we wanted to have this a scrollable and the easiest way to make
the scrollable is to make its height much larger than the actual height of
our screen. So let's set the height let's see 2000 that is most probably if you are
using iPhone XR that will span out. So if we build and run we won't see
anything just yet but it is not scrollable as you can see I'm trying to
scroll but it is not and trust me as you can see here we have some layout
constrain issues and that is because the height is set 2000 and otherwise we are
filling the parent that has other height layout constraint. So yeah there's
a problem here and we want to also make it scrollable. So what we do here is
either after filling parent or before that let's just add in here scrolling
and the direction of course vertical because yeah why not we could use the
horizontal too but let's just add hard to vertical here because we already set
the height to 2000 and that is where we you're going to test it on. So let's just
wait for this and now if I try to scroll I don't know if it's kind of visible but
you can see that here we have this indicator that we are the scrolling
indicator that we are basically scrolling here and you could see that we
have this. Now if we wanted to fix this because we don't want to have this white
space there, okay. So there are two helpers here that we could use and that
here we want to add our view to add let's see maybe it is let just see what do we
have here and home yep add home indicator cover so the
background color should be the same. So let me just have this and that will
basically cover the bottom of our screen. So let's see how that looks like. So I'm
scrolling all the way down you can see it is we have had it there and if we
wanted to we can add a basic blue color for the background of our view,
container view but yeah just so you can see that we can do this for our notch
there. So just think about how this add. It is not subview, let's see it is status
of our cover correct. So status bar cover with a background
color of course we want to use that otherwise the default is white so just
so you know let me just show you how that looks like, okay. As you can see
there we have it, okay. Now that is pretty simple to use but there is another way
and of course you can add these simple views or any other in the vertical stack.
That is the simplest way to use it but there is still
one way to do this and if you are okay adding scrolls into your project with
layoutless then you could just simply stop the video but let me just show you how you
can use the deep scroll view. So let's just first declare some constants here.
So let's mark these as scroll view. Of course you could use this
not just for the whole page but for separate cells or sub views as you'd
like, okay. First of all we want to create a scroll view and that is DScrollView.
Basically this is a UIScrollView.
So yep, after that we want to have a scroll view container in there, there we go and
that is also a DScrollView but in our case it is a container and here we
can have access and a spacing. So we will have this as vertical and we won't
bother with spacing just yet basically we had arranged some views to this
scroll view container and then if you want to have some spacing there that's
okay but usually we only have one arrange sub view. So let's create that
scroll view element. There we go and that is a D_ScrollViewElement.
Okay and we could have its size and so on but yeah we're
just going to leave it as and that, okay. Now how do you add this scroll view to
the container and that is pretty simple. Let me just just comment all of this out
and it is straightforward container, add scroll view and we will use this
one the longest one. The scroll view is basically the scroll view. So that is why
we created all of these with safe area let's have this too lets all has state a
spark cover. Let's have this to true maybe and add our status bar
background color to the same color as we have here as blue, okay. Container again
scroll view container and elements this is array but in our case we will have
only one element because we are going to put all of our views onto that element.
So it is pretty straightforward scrollview element and now that we do have
that all we need to do is add everything to this scroll view element. So we could
add a sub view but let's just use the stack here. So stack let's have it vertical
stack, why not, there we go. And let's have this filling parent and layout in and in
our case we will use our scroll view element and the beauty of this of course
is as you add more views it auto adjusts its height and of course the width if
you are talking about
horizontal scroll view, okay. And basically that is it we just added this
in here just another way of building out our scroll view with the help of
DScrollView, okay. Let's just see how that looks like.
As you can see it is scrollable. It has that top status bar cover and yeah that is
basically it that's how you can add scrolls two ways one simple way with
layout las' but the other way with the DScrollView. It's kind of taking it all
step by step we have a scroll view, DScrollView Container, ScrollViewElement.
They are all inside each other and then we can add any view to that scroll view
element that is also changing its width and height according to what we add to it.
Now that is it for scroll views. 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 new videos as they do come out. Now it is your turn go
ahead and comment down below how do you implement UIScrollView into your
project because I do know that it is a pain to do so I am really eager to find
out your opinion about scrolling in iOS and as usual I will see you in the next one.