217.srt

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:00.506 --> 00:00:08.516 A:middle
[ Silence ]

00:00:09.016 --> 00:00:14.000 A:middle
[ Applause ]

00:00:15.366 --> 00:00:15.846 A:middle
>> Good morning.

00:00:17.216 --> 00:00:19.586 A:middle
Thanks for coming out for
another UIScrollView session

00:00:19.586 --> 00:00:19.946 A:middle
this year.

00:00:20.426 --> 00:00:22.346 A:middle
For those of you keeping track,

00:00:22.346 --> 00:00:25.366 A:middle
this is actually our fifth
UIScrollView session in a row.

00:00:25.866 --> 00:00:29.346 A:middle
[applause].

00:00:29.846 --> 00:00:32.286 A:middle
So we've talked about a lot
of great stuff over the years.

00:00:32.646 --> 00:00:34.826 A:middle
And-- So some of you
might be thinking,

00:00:35.846 --> 00:00:37.636 A:middle
"What could they
possibly have left to talk

00:00:37.636 --> 00:00:39.146 A:middle
about with ScrollView
this year?"

00:00:40.226 --> 00:00:41.446 A:middle
But, rest assured,

00:00:41.446 --> 00:00:44.566 A:middle
that ScrollViews are an
incredibly versatile class

00:00:44.566 --> 00:00:46.656 A:middle
and there's a lot of
stuff left to discuss

00:00:46.706 --> 00:00:47.776 A:middle
that you can do with this stuff.

00:00:48.566 --> 00:00:50.866 A:middle
So, if you're familiar with
the structure that viewed

00:00:50.866 --> 00:00:53.346 A:middle
in previous years, you
probably know that we're going

00:00:53.346 --> 00:00:55.856 A:middle
to spend some time going
pretty deep into a couple

00:00:55.856 --> 00:00:57.516 A:middle
of specific examples of things

00:00:57.516 --> 00:00:58.866 A:middle
that you can do with
ScrollViews.

00:00:59.356 --> 00:01:01.176 A:middle
And we're going to do that
again this year and we'll get

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:59.356 --> 00:01:01.176 A:middle
And we're going to do that
again this year and we'll get

00:01:01.176 --> 00:01:02.146 A:middle
to that in just a minute.

00:01:02.716 --> 00:01:03.856 A:middle
But before we do, I want

00:01:03.856 --> 00:01:06.526 A:middle
to do something a little bit
different this year and kind

00:01:06.526 --> 00:01:10.096 A:middle
of take a step back and look
through iOS 7's new interfaces

00:01:10.506 --> 00:01:13.576 A:middle
and see how we're using
UIScrollViews in some new ways

00:01:13.906 --> 00:01:16.556 A:middle
that you might not necessarily
have expected we'd be using

00:01:16.556 --> 00:01:19.536 A:middle
UIScrollViews for so you
can get some different ideas

00:01:19.536 --> 00:01:22.336 A:middle
about how you can use this
kind of stuff in your own apps

00:01:22.696 --> 00:01:25.056 A:middle
to create some interesting
different effects.

00:01:25.616 --> 00:01:26.666 A:middle
So let's get started.

00:01:27.746 --> 00:01:30.476 A:middle
The first thing that you see
anytime you start on your phone,

00:01:30.476 --> 00:01:31.846 A:middle
of course, is the Lock Screen.

00:01:32.646 --> 00:01:35.866 A:middle
And starting in iOS 7, the
first time that you turn

00:01:35.866 --> 00:01:39.976 A:middle
on your phone, every time, the
first that you'll do is interact

00:01:39.976 --> 00:01:41.006 A:middle
with the UIScrollView.

00:01:41.546 --> 00:01:44.826 A:middle
So, kind of big deal.

00:01:45.486 --> 00:01:48.726 A:middle
The Lock Screen is actually now
Slide to Unlock is implemented

00:01:48.726 --> 00:01:50.676 A:middle
as a two-paged paging
ScrollView.

00:01:51.196 --> 00:01:53.446 A:middle
So when we swipe over here
to the Passcode screen,

00:01:53.616 --> 00:01:55.416 A:middle
we're just paging
between two pages.

00:01:55.896 --> 00:01:57.716 A:middle
It's easy to imagine
how that's put together.

00:01:57.966 --> 00:02:00.216 A:middle
Over here on the right hand
side, we've got the first page

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:01:57.966 --> 00:02:00.216 A:middle
Over here on the right hand
side, we've got the first page

00:02:00.546 --> 00:02:02.326 A:middle
and we're just swiping back
and forth between them.

00:02:03.616 --> 00:02:07.216 A:middle
Now, even before we get into
unlocking, there's more uses

00:02:07.216 --> 00:02:09.485 A:middle
of UIScrollView defined right
here on the Lock Screen.

00:02:10.466 --> 00:02:12.426 A:middle
So of course, if I get
a notification saying

00:02:12.426 --> 00:02:15.946 A:middle
that I have a WWDC presentation
right now in Presidio,

00:02:16.576 --> 00:02:19.896 A:middle
that is itself in a
vertical scrolling list

00:02:19.976 --> 00:02:22.426 A:middle
because you might have multiple
notifications to scroll through.

00:02:22.986 --> 00:02:25.746 A:middle
Then that's embedded within
that outer paging ScrollView.

00:02:25.966 --> 00:02:27.516 A:middle
It's an embedded
vertical ScrollView.

00:02:28.326 --> 00:02:30.756 A:middle
Now there's actually even
more because each one

00:02:30.756 --> 00:02:34.596 A:middle
of those notifications is
itself embedded inside another

00:02:34.596 --> 00:02:36.096 A:middle
horizontal paging ScrollView.

00:02:36.986 --> 00:02:40.166 A:middle
So you might wonder why that is
and it's actually pretty easy

00:02:40.166 --> 00:02:41.776 A:middle
to see once we start
interacting with it.

00:02:42.156 --> 00:02:44.416 A:middle
When you swipe on an
individual notification,

00:02:44.946 --> 00:02:47.166 A:middle
that will take you
directly to the application

00:02:47.166 --> 00:02:48.696 A:middle
that generated that
notification.

00:02:49.176 --> 00:02:50.806 A:middle
So if we start interacting
with this one,

00:02:51.096 --> 00:02:53.536 A:middle
you'll find that we can drag
it a little bit on its own,

00:02:53.856 --> 00:02:55.806 A:middle
but eventually it'll
catch the outer ScrollView

00:02:55.806 --> 00:02:57.216 A:middle
and start pulling
it along with it.

00:02:57.216 --> 00:02:59.226 A:middle
And then if we let
go, it just comes back

00:02:59.226 --> 00:03:00.136 A:middle
to rest at the beginning.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:02:59.226 --> 00:03:00.136 A:middle
to rest at the beginning.

00:03:00.776 --> 00:03:02.276 A:middle
If we were to finish
that gesture,

00:03:02.486 --> 00:03:04.046 A:middle
we would be scrolling
the inner ScrollView

00:03:04.046 --> 00:03:07.516 A:middle
for a bit then we would catch
the outer one and pull both

00:03:07.516 --> 00:03:09.276 A:middle
of them over on to
the Passcode screen.

00:03:10.406 --> 00:03:13.446 A:middle
So this is a pretty interesting
effect being generated

00:03:13.446 --> 00:03:15.396 A:middle
by multiple Nested ScrollViews.

00:03:15.596 --> 00:03:17.776 A:middle
And this is actually the first
technique that we're going

00:03:17.776 --> 00:03:20.146 A:middle
to look at today and
go into a lot of depth

00:03:20.146 --> 00:03:22.376 A:middle
on how exactly that
was implemented.

00:03:22.716 --> 00:03:25.016 A:middle
So, we'll show you the
construction of the views

00:03:25.316 --> 00:03:27.396 A:middle
and see how we make those
ScrollViews interact to get

00:03:27.396 --> 00:03:29.336 A:middle
that behavior where
one pulls the other.

00:03:29.946 --> 00:03:31.746 A:middle
But before we get to
that, we're going to look

00:03:31.806 --> 00:03:34.656 A:middle
through a few more examples in
iOS 7 of this kind of thing.

00:03:35.146 --> 00:03:36.756 A:middle
So let's unlock the
phone and take a look

00:03:36.756 --> 00:03:39.196 A:middle
at some more examples
of Nesting ScrollViews.

00:03:39.926 --> 00:03:42.366 A:middle
So right here on the home
screen, I'm sure as you remember

00:03:42.366 --> 00:03:45.036 A:middle
in the past, we used
to have spotlight

00:03:45.566 --> 00:03:48.116 A:middle
over on the left hand page
of our paging ScrollView.

00:03:48.626 --> 00:03:51.386 A:middle
In iOS 7, it's moved up to
the top and that's implemented

00:03:51.386 --> 00:03:54.366 A:middle
as a Nested ScrollView inside
the outer paging ScrollView.

00:03:55.846 --> 00:03:59.546 A:middle
Moving into the multitasking
user interface, we can now find

00:03:59.546 --> 00:04:03.666 A:middle
that the way that we kill
applications in iOS 7-- oops.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:03:59.546 --> 00:04:03.666 A:middle
that the way that we kill
applications in iOS 7-- oops.

00:04:04.836 --> 00:04:08.466 A:middle
The way that we kill running
applications in iOS7 is

00:04:08.466 --> 00:04:11.786 A:middle
by taking this interface and
scrolling it and flicking it

00:04:11.786 --> 00:04:12.966 A:middle
up off the top of the screen.

00:04:13.596 --> 00:04:16.166 A:middle
That is also now a
Nested UIScrollView.

00:04:16.776 --> 00:04:19.466 A:middle
Now, the interesting thing about
these Nested ScrollViews is

00:04:19.466 --> 00:04:22.005 A:middle
that we get a really
consistent experience throughout

00:04:22.005 --> 00:04:22.916 A:middle
the interface.

00:04:23.246 --> 00:04:24.966 A:middle
Every different place
that we see this kind

00:04:24.966 --> 00:04:27.866 A:middle
of interaction feels the same
way, has the same bounce,

00:04:28.146 --> 00:04:29.486 A:middle
has the same deceleration.

00:04:29.996 --> 00:04:33.436 A:middle
It really just makes everything
feel natural and consistent

00:04:33.436 --> 00:04:35.196 A:middle
across the entire
operating system.

00:04:35.706 --> 00:04:37.696 A:middle
So if you're looking at
doing any of these kinds

00:04:37.696 --> 00:04:39.426 A:middle
of interactions, I
would encourage you

00:04:39.426 --> 00:04:41.406 A:middle
to consider using a
UIScrollView to build it

00:04:41.716 --> 00:04:43.436 A:middle
because you'll get the
same feel that you have

00:04:43.436 --> 00:04:45.756 A:middle
across all the other
parts of iOS 7.

00:04:47.156 --> 00:04:49.296 A:middle
So Nesting ScrollViews,
that's a pretty common one.

00:04:49.636 --> 00:04:52.616 A:middle
Another thing that we found
has cropped up in a number

00:04:52.616 --> 00:04:56.496 A:middle
of different apps on iOS 7 is
multiple ScrollViews that scroll

00:04:56.496 --> 00:04:58.426 A:middle
through the same content
at different rates.

00:04:59.086 --> 00:05:00.626 A:middle
So again here in
the multitasking UI,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:59.086 --> 00:05:00.626 A:middle
So again here in
the multitasking UI,

00:05:01.216 --> 00:05:03.346 A:middle
you can see that there are
actually two independent

00:05:03.456 --> 00:05:04.526 A:middle
sections of content.

00:05:04.786 --> 00:05:07.806 A:middle
Up at the top, we've got
the individual snapshot

00:05:07.806 --> 00:05:10.246 A:middle
of the applications and we
can scroll through those.

00:05:10.526 --> 00:05:12.266 A:middle
And down at the bottom,
we have their icons.

00:05:12.696 --> 00:05:14.376 A:middle
Now, as we scroll
through the top part,

00:05:14.626 --> 00:05:16.706 A:middle
we'll move fairly slowly
because we're moving

00:05:16.766 --> 00:05:18.496 A:middle
through those images.

00:05:18.786 --> 00:05:20.886 A:middle
But you'll notice that at the
bottom, the icons kind of group

00:05:20.886 --> 00:05:23.166 A:middle
up and now we see
more of them at once.

00:05:23.546 --> 00:05:25.536 A:middle
What that allows us to do
is scroll at the bottom

00:05:25.536 --> 00:05:27.986 A:middle
at a faster rate to get
through things more quickly.

00:05:28.606 --> 00:05:30.756 A:middle
So, two different
ScrollViews scrolling

00:05:30.756 --> 00:05:32.826 A:middle
through the same content
at different rates.

00:05:33.586 --> 00:05:35.116 A:middle
Another place where
we find that kind

00:05:35.116 --> 00:05:37.646 A:middle
of thing implemented is here
in the Calendar application.

00:05:38.186 --> 00:05:40.686 A:middle
So we can page through the
paging ScrollView at the bottom

00:05:40.686 --> 00:05:42.476 A:middle
which represents that
days of the week.

00:05:42.796 --> 00:05:44.916 A:middle
And as we do that, we
go one day at a time.

00:05:45.226 --> 00:05:47.436 A:middle
We can see all the days
and go nice and slow.

00:05:47.996 --> 00:05:50.406 A:middle
If we want to go faster,
we can scroll up at the top

00:05:50.656 --> 00:05:52.606 A:middle
where those numbers are,
and that would let us,

00:05:52.606 --> 00:05:55.226 A:middle
with one gesture, move
an entire week back

00:05:55.456 --> 00:05:58.006 A:middle
with what otherwise had taken
us seven swipes to get through.

00:05:59.246 --> 00:06:01.696 A:middle
So this idea of multiple
ScrollViews scrolling

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:05:59.246 --> 00:06:01.696 A:middle
So this idea of multiple
ScrollViews scrolling

00:06:01.696 --> 00:06:04.106 A:middle
through the same content at
different rates is showing

00:06:04.106 --> 00:06:05.346 A:middle
up in a number of
different places.

00:06:05.586 --> 00:06:07.476 A:middle
It might be something that you
might want to consider putting

00:06:07.476 --> 00:06:08.526 A:middle
into your own applications

00:06:08.876 --> 00:06:10.266 A:middle
if there's appropriate
places for that.

00:06:11.336 --> 00:06:12.426 A:middle
Another thing I want
to take a look

00:06:12.426 --> 00:06:15.626 A:middle
at here is some custom
content transforms

00:06:15.866 --> 00:06:17.416 A:middle
that are being applied
to different pieces

00:06:17.416 --> 00:06:19.456 A:middle
of content inside UIScrollViews.

00:06:20.146 --> 00:06:22.046 A:middle
So, the first one that I'd
like to take a look at is here

00:06:22.046 --> 00:06:23.106 A:middle
in the Clock application.

00:06:24.596 --> 00:06:30.636 A:middle
What you'll find is that there's
the 3D Transform being applied

00:06:30.636 --> 00:06:32.116 A:middle
to the numbers as we scroll

00:06:32.116 --> 00:06:35.286 A:middle
through on the right
hand side there.

00:06:35.506 --> 00:06:37.746 A:middle
This has always looked
vaguely 3D.

00:06:37.966 --> 00:06:41.776 A:middle
But in iOS 7, this is actually a
3D wheel being constructed using

00:06:41.776 --> 00:06:44.006 A:middle
3D Transforms on
[inaudible] layers.

00:06:44.726 --> 00:06:47.426 A:middle
Now, this is still the exact
same scrolling behaviors

00:06:47.426 --> 00:06:50.686 A:middle
that you expect across the
operating system, the same feel

00:06:50.686 --> 00:06:52.156 A:middle
of movement, same deceleration,

00:06:52.416 --> 00:06:54.126 A:middle
it's just that there's
some transforms applied

00:06:54.126 --> 00:06:56.616 A:middle
to the content to give an
interesting visual effect

00:06:56.946 --> 00:06:59.186 A:middle
that makes it unique in
this particular location.

00:06:59.996 --> 00:07:02.706 A:middle
Another example of this kind of
thing can be found in Safari.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:59.996 --> 00:07:02.706 A:middle
Another example of this kind of
thing can be found in Safari.

00:07:03.236 --> 00:07:06.176 A:middle
If we go into the new Tab
Switcher interface in Safari,

00:07:06.526 --> 00:07:08.446 A:middle
you'll find that as you
scroll, some of the tabs

00:07:08.446 --> 00:07:11.026 A:middle
at the top start to pull out
of the screen towards you.

00:07:11.586 --> 00:07:13.456 A:middle
Now again, this is
just a UIScrollView

00:07:13.676 --> 00:07:16.356 A:middle
but we're applying Transforms
on the content while we scroll

00:07:16.356 --> 00:07:19.186 A:middle
to give this other interesting
visual effect that's unique

00:07:19.186 --> 00:07:20.106 A:middle
to this application.

00:07:20.726 --> 00:07:24.366 A:middle
One last place where we see this
kind of technique being used is

00:07:24.366 --> 00:07:25.686 A:middle
in the Passbook application.

00:07:26.106 --> 00:07:27.416 A:middle
As we scroll within passes,

00:07:27.416 --> 00:07:28.826 A:middle
they're bunching
up near the top.

00:07:28.826 --> 00:07:31.336 A:middle
And then as we pull down and
it rubber bands, they stretch

00:07:31.336 --> 00:07:33.016 A:middle
out from one another
a little bit.

00:07:33.376 --> 00:07:36.106 A:middle
Again, just a UIScrollView,
we have the exact same feel

00:07:36.106 --> 00:07:39.626 A:middle
of the bouncing, but we get an
interesting visual effect unique

00:07:39.626 --> 00:07:40.496 A:middle
to the Passbook app.

00:07:41.236 --> 00:07:43.636 A:middle
So, all of these techniques
are fairly easy to implement

00:07:43.636 --> 00:07:45.296 A:middle
by just applying
different Transforms

00:07:45.326 --> 00:07:48.156 A:middle
to the content while you're
scrolling in your UIScrollView.

00:07:48.746 --> 00:07:51.616 A:middle
Now the last thing I want to
take a look at before we get

00:07:51.616 --> 00:07:53.616 A:middle
into the specific examples
of implementing some

00:07:53.616 --> 00:07:55.866 A:middle
of this stuff is the
Messages application.

00:07:56.596 --> 00:07:58.766 A:middle
I'm sure you've noticed as
you'd been using Messages

00:07:58.986 --> 00:08:01.876 A:middle
that when you go into a
conversation and you scroll

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:07:58.986 --> 00:08:01.876 A:middle
that when you go into a
conversation and you scroll

00:08:01.876 --> 00:08:03.756 A:middle
around it, the Chat
Bubbles have a little bit

00:08:03.756 --> 00:08:04.676 A:middle
of a bounce to them.

00:08:04.966 --> 00:08:07.236 A:middle
It gives it this really lively
feel as you're scrolling

00:08:07.236 --> 00:08:09.776 A:middle
around in this application and
it's really unique compared

00:08:09.776 --> 00:08:11.586 A:middle
to what you see in
other apps on iOS 7.

00:08:12.236 --> 00:08:14.196 A:middle
Now this is actually the second
thing that we're going to talk

00:08:14.196 --> 00:08:16.326 A:middle
about today and see
exactly how this kind

00:08:16.326 --> 00:08:17.356 A:middle
of thing can be implemented.

00:08:17.756 --> 00:08:20.316 A:middle
It's actually become
really easy to do in iOS 7

00:08:20.316 --> 00:08:22.656 A:middle
with the introduction of
the new UIKit Dynamics API.

00:08:23.336 --> 00:08:25.816 A:middle
So, we're going to get into
that just after we talk

00:08:25.856 --> 00:08:27.336 A:middle
through the first
Lock Screen example.

00:08:27.946 --> 00:08:30.306 A:middle
So, let's get into building
some of these things.

00:08:30.806 --> 00:08:33.785 A:middle
And as I mentioned, the
first thing we want to talk

00:08:33.785 --> 00:08:37.106 A:middle
about is the Lock Screen,
those Nested UIScrollViews.

00:08:37.756 --> 00:08:40.606 A:middle
So let's take a look at that
again just for a quick reminder

00:08:40.606 --> 00:08:42.076 A:middle
of how this is going
to be put together.

00:08:42.916 --> 00:08:44.346 A:middle
So we've got here
our Lock Screen.

00:08:45.066 --> 00:08:48.386 A:middle
On the left side, we've
got another page of content

00:08:48.386 --> 00:08:49.796 A:middle
which is the Passcode lock.

00:08:50.736 --> 00:08:53.456 A:middle
And of course, this is a paging
ScrollView with two pages

00:08:53.666 --> 00:08:55.906 A:middle
and our content size
is represented

00:08:56.596 --> 00:09:00.466 A:middle
by the width of those two pages.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:08:56.596 --> 00:09:00.466 A:middle
by the width of those two pages.

00:09:00.616 --> 00:09:04.026 A:middle
Now, that ScrollView is actually
a full screen UIScrollView

00:09:04.026 --> 00:09:05.506 A:middle
because it's going
to be scrolling all

00:09:05.506 --> 00:09:07.186 A:middle
of the content that's
visible on the screen.

00:09:08.636 --> 00:09:10.876 A:middle
Nested within that, we
have the notifications.

00:09:11.266 --> 00:09:13.006 A:middle
And that's a much
smaller UIScrollView

00:09:13.006 --> 00:09:15.706 A:middle
and it scrolls only vertically,
but it's here as a child

00:09:15.706 --> 00:09:17.106 A:middle
of that outer paging ScrollView.

00:09:17.106 --> 00:09:18.626 A:middle
And then as I mentioned,

00:09:18.626 --> 00:09:21.826 A:middle
each one of these is also its
own nested horizontal ScrollView

00:09:22.356 --> 00:09:23.326 A:middle
and they're a little bit smaller

00:09:23.326 --> 00:09:25.016 A:middle
because they're just
scrolling the individual

00:09:25.016 --> 00:09:26.066 A:middle
notification itself.

00:09:26.456 --> 00:09:27.786 A:middle
So we've got one
here for the top

00:09:27.786 --> 00:09:28.906 A:middle
and then another for the bottom.

00:09:28.906 --> 00:09:32.836 A:middle
Now as the user starts to
move their finger on this,

00:09:33.156 --> 00:09:35.136 A:middle
the content in that will
get pulled over to the point

00:09:35.136 --> 00:09:37.266 A:middle
where it's going to catch
that outer ScrollView.

00:09:37.976 --> 00:09:40.446 A:middle
As they finish their
gesture and finish scrolling

00:09:40.446 --> 00:09:43.106 A:middle
that inner page, it pulls
the outer one along with it

00:09:43.106 --> 00:09:44.876 A:middle
and gets us over
onto the Lock Screen.

00:09:45.406 --> 00:09:47.756 A:middle
Now, if you've used UIScrollView
before in your apps,

00:09:47.856 --> 00:09:49.176 A:middle
I'm sure you're familiar
with the fact

00:09:49.176 --> 00:09:51.806 A:middle
that ScrollViews will not
automatically start dragging

00:09:51.806 --> 00:09:53.356 A:middle
their outer containing
ScrollView

00:09:53.586 --> 00:09:55.226 A:middle
if you just nest
one inside another.

00:09:55.676 --> 00:09:57.206 A:middle
So something must've
been done in order

00:09:57.206 --> 00:09:58.616 A:middle
to make this behavior happen.

00:09:59.346 --> 00:10:01.046 A:middle
So let's look at how
we would do that.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:09:59.346 --> 00:10:01.046 A:middle
So let's look at how
we would do that.

00:10:02.236 --> 00:10:04.606 A:middle
Well, where might we want to
implement this kind of thing?

00:10:05.526 --> 00:10:08.016 A:middle
If you've watched previous
sessions and seen some

00:10:08.016 --> 00:10:10.496 A:middle
of the techniques we've used for
implementing custom interactions

00:10:10.496 --> 00:10:12.776 A:middle
in ScrollViews, you
probably already have an idea

00:10:12.776 --> 00:10:15.376 A:middle
of what I'm going to say.

00:10:15.596 --> 00:10:18.016 A:middle
And that, of course, is that
there's the delegate method,

00:10:18.016 --> 00:10:21.116 A:middle
scrollViewDidScroll,
which allows us to find

00:10:21.116 --> 00:10:23.656 A:middle
out every time a ScrollView's
contentOffset changes

00:10:23.846 --> 00:10:25.256 A:middle
and do something
in response to it.

00:10:26.386 --> 00:10:27.796 A:middle
So in this case, the
thing that we want to do

00:10:27.796 --> 00:10:30.366 A:middle
in response is have the
inner ScrollView tell us

00:10:30.366 --> 00:10:33.126 A:middle
when it scrolls and then move
the outer one along with it.

00:10:34.276 --> 00:10:35.976 A:middle
So what's that going
to look like?

00:10:36.436 --> 00:10:38.246 A:middle
Well, we're going to implement
our scrollViewDidScroll

00:10:38.246 --> 00:10:38.846 A:middle
delegate method.

00:10:40.226 --> 00:10:43.166 A:middle
We're going to find out how far
the inner one has scrolled pass

00:10:43.446 --> 00:10:45.686 A:middle
the point where we wanted
it to catch the outer one.

00:10:46.166 --> 00:10:48.536 A:middle
We want to give some free
scrolling before it grabs the

00:10:48.536 --> 00:10:51.046 A:middle
outer one, so there's
some initial movement

00:10:51.046 --> 00:10:51.706 A:middle
that's required.

00:10:52.086 --> 00:10:54.056 A:middle
So let's find out how
far we got beyond that.

00:10:54.756 --> 00:10:57.206 A:middle
Once we have that value,
we're just going to apply it

00:10:57.206 --> 00:10:59.336 A:middle
as a new offset onto
the outer ScrollView.

00:10:59.736 --> 00:11:01.206 A:middle
So we'll take that
outer ScrollView

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:59.736 --> 00:11:01.206 A:middle
So we'll take that
outer ScrollView

00:11:01.406 --> 00:11:04.376 A:middle
and shift its contentOffset by
the delta we just calculated.

00:11:04.976 --> 00:11:06.596 A:middle
So, actually pretty
straightforward.

00:11:06.596 --> 00:11:09.066 A:middle
And to show us exactly how
we can put that together,

00:11:09.316 --> 00:11:11.686 A:middle
Eliza is going to come up and
start doing a demo for us.

00:11:12.516 --> 00:11:18.586 A:middle
[ Applause ]

00:11:19.086 --> 00:11:20.736 A:middle
>> Hi, I'm Eliza
and I'm an engineer

00:11:20.736 --> 00:11:21.756 A:middle
on the Springboard team.

00:11:21.756 --> 00:11:24.256 A:middle
So what I've got here
is an application

00:11:24.256 --> 00:11:25.856 A:middle
that I built entirely--

00:11:25.886 --> 00:11:27.826 A:middle
well almost entirely
using Interface Builder.

00:11:27.826 --> 00:11:31.826 A:middle
It doesn't do very much yet,
but it illustrates the hierarchy

00:11:31.826 --> 00:11:33.676 A:middle
of ScrollViews that
Josh already described.

00:11:33.676 --> 00:11:37.036 A:middle
So we have an outer paging
ScrollView that scrolls

00:11:37.476 --> 00:11:40.226 A:middle
between this list of
colors and the building.

00:11:40.446 --> 00:11:42.176 A:middle
I'm reusing the building
views that I wrote

00:11:42.176 --> 00:11:43.536 A:middle
for our session two years ago.

00:11:44.006 --> 00:11:47.866 A:middle
So, we can scroll back and
forth between those pages.

00:11:48.206 --> 00:11:52.046 A:middle
Now, the first page of this
two-paged paging ScrollView

00:11:52.306 --> 00:11:55.196 A:middle
contains a vertically
scrolling collection view.

00:11:55.696 --> 00:11:58.286 A:middle
And then each individual cell

00:11:58.626 --> 00:12:01.566 A:middle
in the collection view contains
a horizontally scrolling

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:11:58.626 --> 00:12:01.566 A:middle
in the collection view contains
a horizontally scrolling

00:12:01.826 --> 00:12:04.286 A:middle
ScrollView that scrolls
the color for that cell

00:12:04.686 --> 00:12:05.506 A:middle
on and off the screen.

00:12:05.966 --> 00:12:09.146 A:middle
So, this is set up with
remarkably little code.

00:12:09.876 --> 00:12:12.126 A:middle
And what I want to do
now is to jump straight

00:12:12.126 --> 00:12:15.056 A:middle
to showing you how we can add
the behavior that we're getting

00:12:15.056 --> 00:12:17.946 A:middle
in the Lock Screen where
as you start scrolling one

00:12:17.946 --> 00:12:20.806 A:middle
of these cells, it scrolls a
little of the way over, catches,

00:12:20.806 --> 00:12:23.116 A:middle
and then pulls the outer
paging ScrollView with it.

00:12:24.056 --> 00:12:26.666 A:middle
So, of course, this isn't
happening by itself.

00:12:26.726 --> 00:12:29.856 A:middle
And in order to do this,
we're going to need

00:12:29.966 --> 00:12:33.766 A:middle
to make a mechanism that the
inner ScrollViews can use

00:12:34.036 --> 00:12:37.256 A:middle
to communicate with the View
Controller that's managing the

00:12:37.326 --> 00:12:38.406 A:middle
outer paging ScrollView.

00:12:38.676 --> 00:12:41.666 A:middle
And the way that I'm going to
do that is a delegate protocol.

00:12:42.206 --> 00:12:45.286 A:middle
So here in my scrolling
cell, which is a subclass

00:12:45.286 --> 00:12:46.626 A:middle
of UICollectionView cell,

00:12:47.046 --> 00:12:51.626 A:middle
I'm going to add a scrolling
cell delegate protocol

00:12:51.856 --> 00:12:54.646 A:middle
that our View Controller
is going to conform to so

00:12:54.646 --> 00:12:58.896 A:middle
that it can find out when
the inner cell has started

00:12:58.896 --> 00:12:59.396 A:middle
to scroll.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:00.356 --> 00:13:02.836 A:middle
So, we're going to need a
couple of methods in here.

00:13:03.256 --> 00:13:04.866 A:middle
We're going to need
a ScrollView--

00:13:04.866 --> 00:13:07.696 A:middle
scrolling cell did begin
pulling, so that's going

00:13:07.696 --> 00:13:10.196 A:middle
to get called when you
get your finger passed

00:13:10.446 --> 00:13:13.306 A:middle
to that catch point and start
pulling the outer guy with you.

00:13:13.306 --> 00:13:17.486 A:middle
We need to find out
at every frame

00:13:17.486 --> 00:13:20.356 A:middle
of scrolling how much
the pull offset changed.

00:13:20.786 --> 00:13:22.696 A:middle
So every time that the
pull offset changes,

00:13:23.006 --> 00:13:25.566 A:middle
the second method
will get invoked.

00:13:25.966 --> 00:13:28.726 A:middle
And finally, we need to be
able to tell our delegate

00:13:29.246 --> 00:13:31.186 A:middle
when the scrolling
cell stops pulling

00:13:31.236 --> 00:13:32.986 A:middle
so that the delegate
can clean up any state

00:13:32.986 --> 00:13:34.406 A:middle
that it might have put

00:13:34.456 --> 00:13:37.036 A:middle
into effect once the
scrolling started.

00:13:37.816 --> 00:13:40.556 A:middle
OK, so we've got this
delegate protocol.

00:13:40.816 --> 00:13:44.066 A:middle
We need to make it possible
for a delegate to be set

00:13:44.196 --> 00:13:47.646 A:middle
on our scrolling cell and then
in order to make Xcode happy,

00:13:48.066 --> 00:13:50.046 A:middle
we need to pre-declare
our scrolling cell

00:13:50.046 --> 00:13:50.816 A:middle
delegate protocol.

00:13:52.036 --> 00:13:55.556 A:middle
OK, so now that we've-- I've
described what we're going

00:13:55.556 --> 00:13:58.176 A:middle
to build, before I
go and show you how

00:13:58.176 --> 00:14:00.466 A:middle
to implement this scrolling
cell side of things,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:58.176 --> 00:14:00.466 A:middle
to implement this scrolling
cell side of things,

00:14:00.466 --> 00:14:02.626 A:middle
I'm going to head over
to the View Controller

00:14:02.926 --> 00:14:05.476 A:middle
that is managing the
outer paging ScrollView

00:14:05.806 --> 00:14:09.936 A:middle
and show how we can actually
adopt this delegate protocol

00:14:10.816 --> 00:14:13.176 A:middle
because that's actually going to
turn out to be very little code.

00:14:13.506 --> 00:14:15.366 A:middle
So this is my View
Controller class.

00:14:16.066 --> 00:14:16.826 A:middle
Pretty much, all it does

00:14:16.876 --> 00:14:19.956 A:middle
so far is be a UICollectionView
data source

00:14:19.956 --> 00:14:22.106 A:middle
and return these
scrolling cells.

00:14:23.056 --> 00:14:27.866 A:middle
So, we need to make this
View Controller conform

00:14:27.866 --> 00:14:29.696 A:middle
to the scrolling cell
delegate protocol.

00:14:30.126 --> 00:14:33.946 A:middle
When we make a scrolling cell,

00:14:33.946 --> 00:14:36.576 A:middle
we need to set its
delegate to our self.

00:14:37.606 --> 00:14:40.516 A:middle
I'm going to just adjust the
number of cells here to make it

00:14:40.516 --> 00:14:41.816 A:middle
so we've got more
to scroll through.

00:14:42.256 --> 00:14:44.206 A:middle
All right, now we
need to go ahead

00:14:44.206 --> 00:14:48.436 A:middle
and implement these
three delegate methods.

00:14:49.066 --> 00:14:53.486 A:middle
What we're going to do is
when we find out that one

00:14:53.486 --> 00:14:56.066 A:middle
of our little scrolling
cells started pulling,

00:14:56.656 --> 00:14:59.286 A:middle
we're going to programmatically
adjust the contentOffset

00:14:59.616 --> 00:15:01.156 A:middle
of the outer paging ScrollView.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:14:59.616 --> 00:15:01.156 A:middle
of the outer paging ScrollView.

00:15:01.566 --> 00:15:03.276 A:middle
And because we're going to--

00:15:03.276 --> 00:15:06.806 A:middle
we're basically giving the
inner ScrollView control

00:15:06.806 --> 00:15:08.746 A:middle
over the outer ScrollView's
contentOffset,

00:15:09.096 --> 00:15:12.106 A:middle
it turns out to be sort of
awkward if we also continue

00:15:12.106 --> 00:15:13.866 A:middle
to allow the user to interact

00:15:13.866 --> 00:15:15.596 A:middle
with the paging ScrollView
while that's happening.

00:15:16.066 --> 00:15:19.036 A:middle
So when the scrolling cell
begins pulling, what I'm going

00:15:19.036 --> 00:15:22.126 A:middle
to do is I'm going to tell
the outer ScrollView not

00:15:22.126 --> 00:15:23.646 A:middle
to allow user scrolling.

00:15:24.356 --> 00:15:26.796 A:middle
And then when the
scrolling cell stops pulling,

00:15:26.996 --> 00:15:28.556 A:middle
I'm going to re-enable
user scrolling

00:15:28.556 --> 00:15:29.366 A:middle
on the outer ScrollView.

00:15:30.676 --> 00:15:33.476 A:middle
When the scrolling cell
changes its pull offset then,

00:15:33.676 --> 00:15:34.406 A:middle
I'm simply going

00:15:34.406 --> 00:15:36.556 A:middle
to programmatically
set the contentOffset

00:15:36.616 --> 00:15:39.216 A:middle
of my outer ScrollView
to the correct--

00:15:39.216 --> 00:15:42.636 A:middle
well, to the offset
that was reported to me.

00:15:42.636 --> 00:15:44.986 A:middle
And then just to make it
just a little bit more fun,

00:15:45.296 --> 00:15:47.256 A:middle
when we start pulling
one of the colors over,

00:15:47.496 --> 00:15:49.816 A:middle
let's have the building
change its color.

00:15:49.816 --> 00:15:51.896 A:middle
So we'll draw a new building
with the color of the cell.

00:15:51.896 --> 00:15:53.566 A:middle
All right.

00:15:54.126 --> 00:15:56.536 A:middle
So that's pretty much
all we need here.

00:15:56.746 --> 00:15:57.846 A:middle
So I'm going to switch back

00:15:58.256 --> 00:16:00.266 A:middle
to the scrolling
cell implementation

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:15:58.256 --> 00:16:00.266 A:middle
to the scrolling
cell implementation

00:16:00.666 --> 00:16:04.866 A:middle
and we can see how to go
about calling these methods

00:16:04.916 --> 00:16:06.376 A:middle
to cause the scrolling
to take place.

00:16:07.256 --> 00:16:11.476 A:middle
So the first thing we need to
decide is how far are you going

00:16:11.476 --> 00:16:13.226 A:middle
to get in your scrolling of one

00:16:13.226 --> 00:16:16.216 A:middle
of these inner ScrollViews
before you start pulling the

00:16:16.216 --> 00:16:17.686 A:middle
outer ScrollView with you.

00:16:18.696 --> 00:16:21.376 A:middle
And I'm going to do that
by simply defining a

00:16:21.376 --> 00:16:22.086 A:middle
pull threshold.

00:16:22.366 --> 00:16:24.216 A:middle
I've chosen 60, but
obviously any number

00:16:24.526 --> 00:16:25.606 A:middle
within reason would work.

00:16:26.826 --> 00:16:29.466 A:middle
We're also going to need to
keep track of some state,

00:16:29.646 --> 00:16:31.676 A:middle
are we currently pulling
the outer ScrollView

00:16:31.676 --> 00:16:33.656 A:middle
because we're going to-- we
need to tell the delegate

00:16:33.656 --> 00:16:36.256 A:middle
when this starts and stops.

00:16:36.386 --> 00:16:39.586 A:middle
So with that in place,
we can then go ahead

00:16:39.966 --> 00:16:43.646 A:middle
and implement the
UIScrollView delegate protocol.

00:16:43.646 --> 00:16:44.906 A:middle
And in particular, we're going

00:16:45.126 --> 00:16:47.776 A:middle
to use the scrollViewDidScroll
method to find out every time

00:16:47.776 --> 00:16:50.086 A:middle
that our inner ScrollView's
contentOffset changes.

00:16:51.036 --> 00:16:53.966 A:middle
So, we can get the current
contentOffset which is,

00:16:54.046 --> 00:16:56.266 A:middle
since we only care about the
horizontal direction here,

00:16:56.476 --> 00:17:01.176 A:middle
it's just the ScrollView's
contentOffset.x. Now let's

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:56.476 --> 00:17:01.176 A:middle
it's just the ScrollView's
contentOffset.x. Now let's

00:17:01.176 --> 00:17:04.986 A:middle
figure out whether this offset
represents the beginning

00:17:05.066 --> 00:17:05.756 A:middle
of pulling.

00:17:05.955 --> 00:17:07.736 A:middle
So did we just start pulling?

00:17:08.076 --> 00:17:10.726 A:middle
We just started pulling
if the offset got bigger

00:17:10.726 --> 00:17:13.596 A:middle
than the pull threshold and
we weren't already pulling.

00:17:13.886 --> 00:17:16.986 A:middle
And if that's the case, then
we can tell our delegate

00:17:16.986 --> 00:17:19.195 A:middle
that the ScrollView-- the
scrolling cell began pulling

00:17:19.346 --> 00:17:22.786 A:middle
and we can set our flag to Yes.

00:17:22.786 --> 00:17:23.705 A:middle
All right.

00:17:24.296 --> 00:17:25.756 A:middle
So if we are pulling,

00:17:26.185 --> 00:17:28.606 A:middle
we now need to tell the
delegate an additional thing.

00:17:28.606 --> 00:17:31.866 A:middle
We need to tell the delegate how
much we changed the pull offset.

00:17:33.276 --> 00:17:36.866 A:middle
So, we'll calculate what
the new pull offset is

00:17:37.126 --> 00:17:38.866 A:middle
by subtracting the
pull threshold

00:17:39.146 --> 00:17:40.976 A:middle
from our current
internal offset.

00:17:42.166 --> 00:17:44.316 A:middle
And what I've written here
is actually not quite right.

00:17:44.686 --> 00:17:46.196 A:middle
So imagine the following
scenario.

00:17:46.536 --> 00:17:49.446 A:middle
I start scrolling in this
inner cell, I get passed

00:17:49.686 --> 00:17:51.556 A:middle
to the pull threshold
so I'd start pulling,

00:17:51.786 --> 00:17:53.916 A:middle
and then I move my finger
back and forth a little bit,

00:17:54.036 --> 00:17:55.586 A:middle
and I get under and
then over and then

00:17:55.586 --> 00:17:57.036 A:middle
under the pull threshold.

00:17:57.346 --> 00:17:59.276 A:middle
We don't want to
report a negative number

00:17:59.496 --> 00:18:01.406 A:middle
to our outer paging ScrollView.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:17:59.496 --> 00:18:01.406 A:middle
to our outer paging ScrollView.

00:18:01.436 --> 00:18:03.356 A:middle
That would have some
weird effect.

00:18:03.566 --> 00:18:06.076 A:middle
So what we want to do
instead is make sure

00:18:06.376 --> 00:18:08.376 A:middle
that we always report
a minimum of zero.

00:18:08.376 --> 00:18:11.406 A:middle
So, we're going to take the
maximum of zero and the offset

00:18:11.406 --> 00:18:15.016 A:middle
that we just calculated.

00:18:15.016 --> 00:18:17.516 A:middle
And then we can tell
the delegate

00:18:17.806 --> 00:18:20.026 A:middle
that the scrolling cell changed
the pull offset to that amount.

00:18:20.466 --> 00:18:24.566 A:middle
The last thing that we
need to do is to figure

00:18:24.566 --> 00:18:26.276 A:middle
out when the pulling stops.

00:18:26.706 --> 00:18:29.456 A:middle
And what I've decided to
do here is just decide is

00:18:29.456 --> 00:18:31.926 A:middle
that the pulling is going to
stop when the scrolling stops.

00:18:32.416 --> 00:18:35.176 A:middle
So, we need to figure out
when the scrolling ends.

00:18:35.176 --> 00:18:39.076 A:middle
And if it-- when it ends,
we can tell our delegate

00:18:39.076 --> 00:18:41.596 A:middle
that the scrolling
cell stopped pulling

00:18:41.596 --> 00:18:44.926 A:middle
and we can set our
flag back to No.

00:18:44.926 --> 00:18:45.956 A:middle
All right, how are
we going to figure

00:18:45.956 --> 00:18:47.196 A:middle
out that the scrolling ended?

00:18:47.466 --> 00:18:48.636 A:middle
If you've seen any
of our sessions,

00:18:48.636 --> 00:18:50.256 A:middle
I feel like I write
this code every year.

00:18:50.546 --> 00:18:53.216 A:middle
There's two different ways that
scrolling can come to stop.

00:18:53.476 --> 00:18:56.226 A:middle
One is that you're
scrolling, you have no momentum

00:18:56.226 --> 00:18:57.066 A:middle
and you lift your finger,

00:18:57.066 --> 00:18:59.006 A:middle
and then the scrolling
ends right then and there.

00:18:59.376 --> 00:19:02.046 A:middle
Alternatively, you
may have some momentum

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:18:59.376 --> 00:19:02.046 A:middle
Alternatively, you
may have some momentum

00:19:02.156 --> 00:19:03.466 A:middle
when you lift your
finger, at which point,

00:19:03.466 --> 00:19:05.276 A:middle
there's a deceleration
period first.

00:19:05.586 --> 00:19:08.056 A:middle
So we need to catch both of
those cases and we can do

00:19:08.056 --> 00:19:11.856 A:middle
that with two further
delegate methods,

00:19:12.136 --> 00:19:14.546 A:middle
scrolling cell
scrollViewDidEndDragging

00:19:14.546 --> 00:19:15.286 A:middle
:willDecelerate.

00:19:15.546 --> 00:19:16.946 A:middle
And if we're not decelerating,

00:19:17.146 --> 00:19:18.616 A:middle
then that means the
scrolling ended.

00:19:18.826 --> 00:19:21.116 A:middle
Otherwise, we're going to
catch the scrolling ended

00:19:21.116 --> 00:19:22.906 A:middle
when the deceleration ends.

00:19:23.726 --> 00:19:25.256 A:middle
All right, so with
all of that in place,

00:19:25.446 --> 00:19:27.606 A:middle
I'm going to go head
and run this.

00:19:29.196 --> 00:19:30.996 A:middle
We have more cells,
which is nice,

00:19:30.996 --> 00:19:32.066 A:middle
which we can scroll through.

00:19:32.716 --> 00:19:38.306 A:middle
OK, so now if I grab one,
it scrolls, it catches,

00:19:38.306 --> 00:19:42.116 A:middle
and it starts pulling the
outer ScrollView with us

00:19:42.256 --> 00:19:43.376 A:middle
which is exactly what we wanted

00:19:43.746 --> 00:19:46.356 A:middle
and we can get over
to the building.

00:19:46.686 --> 00:19:49.246 A:middle
So now, there's a couple
of bugs here that I want

00:19:49.246 --> 00:19:49.996 A:middle
to draw your attention

00:19:49.996 --> 00:19:53.326 A:middle
to if your attention has not
already been drawn to them.

00:19:53.326 --> 00:19:56.016 A:middle
One is that we obviously
didn't get far enough over,

00:19:56.016 --> 00:19:58.546 A:middle
so we're sort of stuck on
a weird page that's like in

00:19:58.546 --> 00:20:02.246 A:middle
between page boundaries with our
building view not all the way

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:19:58.546 --> 00:20:02.246 A:middle
between page boundaries with our
building view not all the way

00:20:02.306 --> 00:20:02.926 A:middle
in the picture.

00:20:03.226 --> 00:20:07.086 A:middle
Another problem is that
our cell is missing,

00:20:07.246 --> 00:20:09.076 A:middle
the one that we just
scrolled over is gone.

00:20:09.416 --> 00:20:12.946 A:middle
And then another problem which
is a little bit less obvious,

00:20:12.946 --> 00:20:14.696 A:middle
although maybe it was obvious.

00:20:14.796 --> 00:20:16.586 A:middle
Here, my finger is
where the arrow is

00:20:16.756 --> 00:20:18.996 A:middle
and I start dragging
and I catch.

00:20:19.366 --> 00:20:22.526 A:middle
And now, I would expect that
green cell to stay pinned

00:20:22.526 --> 00:20:24.986 A:middle
under my finger as it
drags the stuff with,

00:20:25.206 --> 00:20:26.316 A:middle
but that's not what happens.

00:20:26.316 --> 00:20:30.926 A:middle
Instead, it zooms out from under
my finger and then disappears.

00:20:31.416 --> 00:20:34.106 A:middle
So I'm going to, in a minute,
turn things back over to Josh

00:20:34.106 --> 00:20:35.976 A:middle
to explain two of
these problems.

00:20:36.356 --> 00:20:39.086 A:middle
But the problem where
the cells are just gone,

00:20:39.266 --> 00:20:41.606 A:middle
that's actually really
easy to fix, so I'm going

00:20:41.606 --> 00:20:42.736 A:middle
to just fix that right now.

00:20:43.036 --> 00:20:44.946 A:middle
That's happening because
we're scrolling the content

00:20:44.946 --> 00:20:46.686 A:middle
of those cells off the screen

00:20:47.436 --> 00:20:50.156 A:middle
when we pull the
outer ScrollView over.

00:20:50.416 --> 00:20:52.986 A:middle
So we can fix that
by simply, you know,

00:20:52.986 --> 00:20:57.246 A:middle
our scrolling ended method here
just setting the contentOffset

00:20:57.246 --> 00:20:58.476 A:middle
of our ScrollView back to zero.

00:20:58.806 --> 00:21:00.986 A:middle
But now for the other two
bugs, the zooming out from

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:58.806 --> 00:21:00.986 A:middle
But now for the other two
bugs, the zooming out from

00:21:00.986 --> 00:21:02.346 A:middle
under your finger
bug and the fact

00:21:02.386 --> 00:21:04.596 A:middle
that we're not getting all the
way over to the building page,

00:21:04.816 --> 00:21:06.376 A:middle
I'm going to send it
back over to Josh.

00:21:07.516 --> 00:21:12.786 A:middle
[ Applause ]

00:21:13.286 --> 00:21:14.276 A:middle
>> All right, thanks Eliza.

00:21:14.786 --> 00:21:15.976 A:middle
So, we're getting pretty close.

00:21:16.126 --> 00:21:17.206 A:middle
It's almost there.

00:21:17.306 --> 00:21:18.746 A:middle
Just a couple of
bugs to take care of,

00:21:18.916 --> 00:21:19.736 A:middle
nothing we can't handle.

00:21:20.526 --> 00:21:25.006 A:middle
So, let's take a look at how
we ended up with only part

00:21:25.006 --> 00:21:26.616 A:middle
of that page visible first.

00:21:27.346 --> 00:21:29.326 A:middle
Now, we have two pages
worth of content.

00:21:29.466 --> 00:21:32.296 A:middle
So that gives us a content
size represented here

00:21:32.296 --> 00:21:35.936 A:middle
by this yellow square,
it's about two pages.

00:21:36.246 --> 00:21:38.346 A:middle
And we've defined the size

00:21:38.346 --> 00:21:41.316 A:middle
of our inner ScrollView's
content to be equal to that.

00:21:41.676 --> 00:21:43.946 A:middle
So we've got that nested
inner paging ScrollView

00:21:44.166 --> 00:21:45.956 A:middle
and it's also got
two pages of content.

00:21:46.196 --> 00:21:48.256 A:middle
That's how we're going to
cause it to get pulled.

00:21:48.786 --> 00:21:51.886 A:middle
So let's see what's going wrong
as our user starts to drag here.

00:21:52.586 --> 00:21:55.526 A:middle
We start pulling that inner
ScrollView a little bit

00:21:55.526 --> 00:21:56.816 A:middle
and it moves over to the right.

00:21:57.376 --> 00:21:59.986 A:middle
But now you'll notice that
the sizes of our content

00:21:59.986 --> 00:22:02.756 A:middle
which started out aligned on
the left have now pulled away

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:21:59.986 --> 00:22:02.756 A:middle
which started out aligned on
the left have now pulled away

00:22:02.756 --> 00:22:05.216 A:middle
from each other 'cause the
inner one has moved a bit

00:22:05.256 --> 00:22:06.806 A:middle
but the outer one
hasn't started yet.

00:22:07.886 --> 00:22:10.066 A:middle
So now, if we let the
user finish the gesture

00:22:10.066 --> 00:22:12.916 A:middle
on that inner ScrollView, it's
going to finish paging over

00:22:12.916 --> 00:22:16.946 A:middle
and come to rest, and it will
hit its end before the full

00:22:16.946 --> 00:22:19.016 A:middle
content size of the outer
ScrollView has been pulled

00:22:19.016 --> 00:22:19.566 A:middle
into view.

00:22:20.126 --> 00:22:22.916 A:middle
So it's really the case that
that inner ScrollView needs

00:22:23.256 --> 00:22:26.716 A:middle
to scroll farther than the outer
ScrollView because it's going

00:22:26.716 --> 00:22:29.096 A:middle
to move a little bit by
itself before it catches

00:22:29.096 --> 00:22:30.796 A:middle
and starts pulling
the outer one with it.

00:22:31.476 --> 00:22:33.986 A:middle
So how do we make the inner
ScrollView scroll more?

00:22:34.626 --> 00:22:35.806 A:middle
Well, as you know, the way

00:22:35.806 --> 00:22:38.886 A:middle
that a UIScrollView's
content size is defined is

00:22:39.096 --> 00:22:42.636 A:middle
by its bounce-- I'm
sorry, of the paging

00:22:42.636 --> 00:22:44.006 A:middle
with is defined by its bounce.

00:22:44.286 --> 00:22:45.936 A:middle
And in this case,
we need two pages

00:22:45.936 --> 00:22:48.286 A:middle
of content 'cause we have a
two-paged paging ScrollView.

00:22:48.736 --> 00:22:52.536 A:middle
So we need a larger bounce in
order to get a larger page size

00:22:52.826 --> 00:22:54.446 A:middle
so we have more content
to scroll.

00:22:55.306 --> 00:22:57.366 A:middle
So, if we look at the bounce
of our ScrollView right,

00:22:57.926 --> 00:23:00.136 A:middle
it's the exact same width
as it its containers.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:22:57.926 --> 00:23:00.136 A:middle
it's the exact same width
as it its containers.

00:23:00.176 --> 00:23:01.646 A:middle
So that gives it
the same page size.

00:23:02.176 --> 00:23:04.466 A:middle
To get a bigger page size,
we have to make it wider.

00:23:04.946 --> 00:23:05.846 A:middle
Now, let's find here.

00:23:05.846 --> 00:23:07.856 A:middle
We can let it hang off the
right side of the screen

00:23:08.056 --> 00:23:10.116 A:middle
because it's not drawing
anything over there.

00:23:10.336 --> 00:23:12.816 A:middle
We're just making it bigger so
that it can scroll more content.

00:23:13.236 --> 00:23:15.656 A:middle
And then you'll notice that
we are still using two pages,

00:23:15.656 --> 00:23:18.066 A:middle
so we've doubled our content
size and that causes it

00:23:18.066 --> 00:23:19.396 A:middle
to hang off on the left as well.

00:23:20.436 --> 00:23:22.236 A:middle
So let's see what happens
if we start scrolling

00:23:22.236 --> 00:23:23.256 A:middle
with that configuration.

00:23:23.906 --> 00:23:26.826 A:middle
Now, we start pulling that
inner one in a little bit.

00:23:26.826 --> 00:23:29.526 A:middle
And at the point where it's
going to catch, the left sides

00:23:29.526 --> 00:23:32.196 A:middle
of our content size of both
ScrollViews are now aligned.

00:23:32.576 --> 00:23:33.626 A:middle
Now, that seems a lot better

00:23:33.876 --> 00:23:35.936 A:middle
because if we let our
ScrollView finish pulling,

00:23:36.126 --> 00:23:37.496 A:middle
it's going to pull
that outer one with it,

00:23:37.496 --> 00:23:39.966 A:middle
and they'll both come to
rest when they have all

00:23:39.966 --> 00:23:41.236 A:middle
of their content fully visible.

00:23:41.666 --> 00:23:43.776 A:middle
So just making that
ScrollView a little wider

00:23:43.866 --> 00:23:47.376 A:middle
to give us a wider page
and more room to move

00:23:47.376 --> 00:23:49.906 A:middle
on the inner ScrollView,
fixes that first problem.

00:23:50.706 --> 00:23:52.736 A:middle
But now something else is
still wrong because we had

00:23:52.736 --> 00:23:56.036 A:middle
that second problem that Eliza
showed you where we ended

00:23:56.036 --> 00:23:58.896 A:middle
up having the content shooting
out from under her finger

00:23:59.086 --> 00:24:00.776 A:middle
as she was scrolling
the inner ScrollView.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:23:59.086 --> 00:24:00.776 A:middle
as she was scrolling
the inner ScrollView.

00:24:01.666 --> 00:24:02.956 A:middle
So, why was that happening?

00:24:03.766 --> 00:24:05.596 A:middle
Well, to understand
what was going there,

00:24:05.596 --> 00:24:08.136 A:middle
it helps a little bit more
to look again at the frame

00:24:08.136 --> 00:24:09.676 A:middle
and bounce of the
inner ScrollView.

00:24:10.066 --> 00:24:11.436 A:middle
So here, we have
it visible right

00:24:11.436 --> 00:24:12.396 A:middle
in the middle of our screen.

00:24:13.596 --> 00:24:15.826 A:middle
Let's take a look step by
step at what's going on again.

00:24:16.396 --> 00:24:18.566 A:middle
We start pulling a little
bit with our finger.

00:24:19.526 --> 00:24:21.126 A:middle
We get to the point where
we're going to catch.

00:24:21.626 --> 00:24:24.306 A:middle
Now if we hadn't anything else,
if we weren't doing the bit

00:24:24.306 --> 00:24:25.796 A:middle
where we're pulling
the outer ScrollView,

00:24:26.126 --> 00:24:27.956 A:middle
what would've just
happened is we'd keep moving

00:24:27.956 --> 00:24:29.476 A:middle
that inner ScrollView's
content along.

00:24:30.106 --> 00:24:32.846 A:middle
But of course, what we are doing
then is calling setContentOffset

00:24:32.846 --> 00:24:34.736 A:middle
on the outer one to
cause to move with it.

00:24:35.226 --> 00:24:37.656 A:middle
So what we think that should be
doing is pulling the ScrollView

00:24:37.656 --> 00:24:38.046 A:middle
with it.

00:24:38.796 --> 00:24:41.046 A:middle
Unfortunately, what we
forgot about here is

00:24:41.046 --> 00:24:43.486 A:middle
that that inner ScrollView
is actually a subview

00:24:43.486 --> 00:24:44.606 A:middle
of the outer ScrollView.

00:24:45.056 --> 00:24:47.126 A:middle
So not only does the
outer ScrollView move,

00:24:47.426 --> 00:24:49.626 A:middle
but it also ends up
pulling the inner one along

00:24:49.966 --> 00:24:51.046 A:middle
because it's a child of it.

00:24:51.126 --> 00:24:53.376 A:middle
So, we're-- the inner
ScrollView is getting scrolled

00:24:53.376 --> 00:24:56.416 A:middle
by its own gesture recognizer
and then as a result of that,

00:24:56.416 --> 00:24:57.546 A:middle
it's telling the
outer ScrollView

00:24:57.546 --> 00:24:58.896 A:middle
to move which moves it again.

00:24:59.546 --> 00:25:01.546 A:middle
And the really bad part here is

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:24:59.546 --> 00:25:01.546 A:middle
And the really bad part here is

00:25:01.546 --> 00:25:04.496 A:middle
that the red area representing
our frame is now moving

00:25:04.496 --> 00:25:05.156 A:middle
off screen.

00:25:05.456 --> 00:25:07.776 A:middle
So, the ScrollView
is actually moving

00:25:07.776 --> 00:25:08.786 A:middle
out from under our finger.

00:25:08.786 --> 00:25:11.966 A:middle
And this is causing the
double scrolling Eliza saw

00:25:12.256 --> 00:25:13.986 A:middle
which is pulling all
the content too fast.

00:25:14.536 --> 00:25:16.586 A:middle
So we really want to
pull that ScrollView back

00:25:16.776 --> 00:25:19.026 A:middle
so the left sides of the
content remain aligned

00:25:19.296 --> 00:25:20.696 A:middle
and the ScrollView,
the inner one,

00:25:20.696 --> 00:25:22.366 A:middle
remains centered on the screen.

00:25:23.026 --> 00:25:25.036 A:middle
Now this is actually very
similar to a technique

00:25:25.036 --> 00:25:29.276 A:middle
that we should a couple of years
ago in 2011 for pinning views

00:25:29.276 --> 00:25:31.736 A:middle
in place while you're
scrolling a ScrollView.

00:25:32.056 --> 00:25:33.816 A:middle
This is the same kind
of technique that's used

00:25:33.816 --> 00:25:36.166 A:middle
in UITableView, when
you scroll vertically,

00:25:36.166 --> 00:25:39.086 A:middle
you get a table header and it
pins to the top of the screen

00:25:39.216 --> 00:25:40.476 A:middle
as content scrolls under it.

00:25:40.836 --> 00:25:42.576 A:middle
We want to do the same
kind of thing here.

00:25:42.826 --> 00:25:45.026 A:middle
We want to pin that inner
ScrollView to the left side

00:25:45.026 --> 00:25:46.496 A:middle
of the screen so it stays

00:25:46.496 --> 00:25:48.666 A:middle
in place even though its
parent is moving under it.

00:25:49.146 --> 00:25:51.836 A:middle
That way, when the user moves
their finger more and lifts,

00:25:52.476 --> 00:25:55.036 A:middle
this outer ScrollView will
come to restfully on screen

00:25:55.036 --> 00:25:57.906 A:middle
and the inner one which is the
child of it will still remain

00:25:57.906 --> 00:26:00.236 A:middle
in place on screen and
everything will work right.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:57.906 --> 00:26:00.236 A:middle
in place on screen and
everything will work right.

00:26:00.286 --> 00:26:02.736 A:middle
So what's that going to
look like in our code

00:26:02.736 --> 00:26:03.486 A:middle
that we already wrote?

00:26:04.076 --> 00:26:06.096 A:middle
Well, it's actually just
a really small change

00:26:06.096 --> 00:26:08.576 A:middle
to what we've already got, just
one little thing that we have

00:26:08.576 --> 00:26:09.516 A:middle
to add at the end here.

00:26:10.086 --> 00:26:12.486 A:middle
And that's that we need
to translate the child

00:26:12.746 --> 00:26:14.806 A:middle
by the same amount that
we're pulling the parent.

00:26:15.216 --> 00:26:17.666 A:middle
So we want to undo that
movement that we're adding.

00:26:17.856 --> 00:26:19.296 A:middle
We're going to pull
the parent some amount

00:26:19.296 --> 00:26:21.336 A:middle
and then translate the child
back by the same amount

00:26:21.336 --> 00:26:22.526 A:middle
so it doesn't double pull.

00:26:22.526 --> 00:26:24.866 A:middle
So Eliza's going to come
back now and fix our demo

00:26:24.936 --> 00:26:25.996 A:middle
so that this all works.

00:26:27.516 --> 00:26:33.146 A:middle
[ Applause ]

00:26:33.646 --> 00:26:36.366 A:middle
>> OK. So, we have
two problems to fix.

00:26:36.366 --> 00:26:37.536 A:middle
The first one, if you recall,

00:26:37.536 --> 00:26:39.936 A:middle
was that our page wasn't getting
all the way scrolled over,

00:26:39.936 --> 00:26:41.536 A:middle
so I'm going to address
that one first.

00:26:41.916 --> 00:26:44.756 A:middle
We need to go down to the bottom
of this file here in a part

00:26:44.756 --> 00:26:47.176 A:middle
that I didn't show before
which is where we're laying

00:26:47.176 --> 00:26:52.326 A:middle
out the subviews of our inner--
internal to the cell ScrollView.

00:26:52.896 --> 00:26:56.076 A:middle
So you'll see that I had
calculated a page width

00:26:56.406 --> 00:26:59.306 A:middle
to be the size of
my cell's bounce

00:26:59.636 --> 00:27:02.046 A:middle
that was causing the problem,
wasn't wide enough given

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:26:59.636 --> 00:27:02.046 A:middle
that was causing the problem,
wasn't wide enough given

00:27:02.046 --> 00:27:03.996 A:middle
that we have this pull
threshold to contend with.

00:27:04.476 --> 00:27:09.046 A:middle
So, what I'm going to simply
do is add the pull threshold

00:27:09.806 --> 00:27:11.366 A:middle
to the page width.

00:27:11.366 --> 00:27:15.506 A:middle
And then because I've
actually determined the frame

00:27:15.586 --> 00:27:17.956 A:middle
and the content size of
the ScrollView in terms

00:27:17.956 --> 00:27:20.506 A:middle
of the page width, everything
should then just work

00:27:20.506 --> 00:27:23.196 A:middle
from that point.

00:27:23.356 --> 00:27:26.916 A:middle
So now to address the issue
of the shooting out from

00:27:26.916 --> 00:27:30.756 A:middle
under your finger problem
and just scroll back up here

00:27:31.116 --> 00:27:33.696 A:middle
to my scrollViewDidscroll
method.

00:27:33.936 --> 00:27:37.166 A:middle
When we tell the delegate
that our pull offset changed,

00:27:37.166 --> 00:27:38.566 A:middle
the delegate is going
to turn around

00:27:38.566 --> 00:27:40.116 A:middle
and change the contentOffset

00:27:40.116 --> 00:27:42.476 A:middle
of the outer ScrollView
which contains us.

00:27:43.216 --> 00:27:48.076 A:middle
And so, that's causing us to get
pulled along with it resulting

00:27:48.076 --> 00:27:49.696 A:middle
in the double scrolling.

00:27:50.036 --> 00:27:52.666 A:middle
So what we'll do to
counteract that is

00:27:52.796 --> 00:27:56.056 A:middle
to simply set a Transform on
the ScrollView which is one

00:27:56.056 --> 00:28:01.446 A:middle
of our subviews and we'll set
a Transform which simply uses

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:56.056 --> 00:28:01.446 A:middle
of our subviews and we'll set
a Transform which simply uses

00:28:01.446 --> 00:28:02.626 A:middle
that very same pull offset

00:28:02.956 --> 00:28:06.176 A:middle
so that the ScrollView scrolls
along with the outer ScrollView

00:28:06.416 --> 00:28:10.606 A:middle
and as a result, sort of
surprisingly, it actually seems

00:28:10.606 --> 00:28:12.296 A:middle
to remain in the same
place on the screen.

00:28:12.536 --> 00:28:14.226 A:middle
This is a technique that
we, as just Josh mentioned,

00:28:14.226 --> 00:28:17.926 A:middle
talked about in 2011 with
getting a moon to stay fixed

00:28:17.926 --> 00:28:19.706 A:middle
on the screen when
you're scrolling a bunch

00:28:19.706 --> 00:28:22.446 A:middle
of buildings out from under it.

00:28:23.486 --> 00:28:27.406 A:middle
So, when we finished
scrolling here

00:28:27.406 --> 00:28:29.536 A:middle
and set our contentOffset
back to zero,

00:28:29.746 --> 00:28:31.756 A:middle
let's also set the
Transform back to Identity

00:28:31.756 --> 00:28:34.946 A:middle
so that we don't end up in a
weird transformed state while

00:28:34.946 --> 00:28:36.116 A:middle
we're not doing any scrolling.

00:28:36.906 --> 00:28:42.036 A:middle
OK. So with that in place,
I'm going to build again.

00:28:42.036 --> 00:28:45.296 A:middle
And I can grab one of
these cells, it catches

00:28:46.216 --> 00:28:48.216 A:middle
and it stays fixed
as we want it.

00:28:48.526 --> 00:28:51.596 A:middle
And it gets all the way over
to the building this time.

00:28:51.596 --> 00:28:53.426 A:middle
So this looks like it's
working pretty well.

00:28:53.426 --> 00:28:55.366 A:middle
It's doing pretty
much what we want.

00:28:56.226 --> 00:28:58.666 A:middle
And notice that the buildings
change color as planned.

00:28:59.036 --> 00:29:04.736 A:middle
So, there's one bug here that
may not be immediately obvious

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:28:59.036 --> 00:29:04.736 A:middle
So, there's one bug here that
may not be immediately obvious

00:29:04.736 --> 00:29:05.626 A:middle
and I'm going to do something

00:29:05.626 --> 00:29:07.466 A:middle
to make it a little
bit more obvious.

00:29:07.526 --> 00:29:09.576 A:middle
I'm going to change
the pull threshold

00:29:09.576 --> 00:29:14.476 A:middle
to a larger number
and run it again.

00:29:14.666 --> 00:29:16.956 A:middle
So if I scroll this cell over,

00:29:16.996 --> 00:29:18.886 A:middle
now I can get it a little
further before it catches

00:29:18.886 --> 00:29:20.326 A:middle
and then I let go.

00:29:20.716 --> 00:29:22.946 A:middle
Watch really carefully, when
I let go so that this going

00:29:22.946 --> 00:29:25.206 A:middle
to return back to
the zero position,

00:29:26.706 --> 00:29:28.806 A:middle
you'll see that the outer
paging ScrollView kind

00:29:28.806 --> 00:29:30.006 A:middle
of slams into place.

00:29:30.506 --> 00:29:33.246 A:middle
The inner ScrollView comes
to a nice decelerated rest

00:29:34.246 --> 00:29:35.546 A:middle
as you'd expect from
a ScrollView.

00:29:35.546 --> 00:29:39.456 A:middle
But the outer ScrollView,
it's pretty abrupt that way

00:29:39.456 --> 00:29:40.676 A:middle
that it hits the
edge of the screen.

00:29:41.046 --> 00:29:45.106 A:middle
So, this is actually
kind of what you'd expect

00:29:45.106 --> 00:29:46.736 A:middle
to happen given the way
that this is implemented.

00:29:47.126 --> 00:29:50.826 A:middle
When I move this back and forth,
you can see that the inner

00:29:50.826 --> 00:29:53.426 A:middle
and the outer ScrollViews are
moving at exactly the same rate.

00:29:53.496 --> 00:29:57.166 A:middle
They're sort of pinned together
with 120 points difference.

00:29:57.686 --> 00:30:00.686 A:middle
So when this starts
moving back, of course,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:57.686 --> 00:30:00.686 A:middle
So when this starts
moving back, of course,

00:30:01.086 --> 00:30:03.036 A:middle
while the inner ScrollView
is still decelerating,

00:30:03.166 --> 00:30:05.266 A:middle
the outer ScrollView
is going to hit zero

00:30:05.646 --> 00:30:07.456 A:middle
and then the inner
ScrollView continues.

00:30:07.916 --> 00:30:12.136 A:middle
What would be nice would be
is if we're in this condition

00:30:12.136 --> 00:30:13.726 A:middle
where we're scrolling
back to zero,

00:30:13.946 --> 00:30:15.676 A:middle
if we could change
the rate of scrolling

00:30:15.676 --> 00:30:18.386 A:middle
of the outer ScrollView so that
both ScrollViews would come

00:30:18.386 --> 00:30:20.336 A:middle
to rest at the same time.

00:30:21.046 --> 00:30:22.116 A:middle
And I'm going to show
you how to do that.

00:30:22.476 --> 00:30:24.666 A:middle
It's a technique similar to
the techniques that we're using

00:30:24.666 --> 00:30:26.036 A:middle
in other places in iOS 7

00:30:26.306 --> 00:30:28.626 A:middle
to get these two ScrollViews
moving at different rates.

00:30:30.226 --> 00:30:33.996 A:middle
So the first thing that we need
to do to accomplish this is

00:30:34.106 --> 00:30:37.596 A:middle
to keep track of whether we're
in this decelerating back

00:30:37.716 --> 00:30:39.366 A:middle
to zero condition,
'cause we're going

00:30:39.366 --> 00:30:41.526 A:middle
to do something special
in that case.

00:30:41.746 --> 00:30:44.346 A:middle
What we're going to do in
that case is move the outer

00:30:44.346 --> 00:30:45.866 A:middle
ScrollView at-- with--

00:30:45.866 --> 00:30:48.586 A:middle
at a fraction of the speed
of the inner ScrollView.

00:30:48.866 --> 00:30:51.176 A:middle
So we need to figure out
what that fraction should be.

00:30:51.516 --> 00:30:54.086 A:middle
And I'm going to do that by
storing off a deceleration

00:30:54.086 --> 00:30:54.986 A:middle
distance ratio.

00:30:55.296 --> 00:30:58.706 A:middle
We want the ratio of how
far the outer ScrollView has

00:30:58.706 --> 00:31:01.536 A:middle
to move compared to how far the
inner ScrollView has to move,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:30:58.706 --> 00:31:01.536 A:middle
to move compared to how far the
inner ScrollView has to move,

00:31:01.726 --> 00:31:03.486 A:middle
and then we're going to
slow down the scrolling

00:31:03.486 --> 00:31:05.666 A:middle
of the outer ScrollView
by that proportion.

00:31:06.846 --> 00:31:09.676 A:middle
OK, so how can we detect that
we're decelerating back to zero?

00:31:09.886 --> 00:31:14.796 A:middle
We can do this by implementing
an additional ScrollView

00:31:14.796 --> 00:31:17.726 A:middle
delegate method,
scrollView WillEndDragging:

00:31:17.926 --> 00:31:19.746 A:middle
withVelocity:target
ContentOffset.

00:31:20.486 --> 00:31:23.256 A:middle
So, you may have seen
this method in the past.

00:31:23.256 --> 00:31:27.216 A:middle
It's often used to change the
landing position of a ScrollView

00:31:27.216 --> 00:31:28.336 A:middle
when it starts decelerating.

00:31:28.676 --> 00:31:31.286 A:middle
We're going to use it not for
that purpose but simply to find

00:31:31.286 --> 00:31:32.776 A:middle
out what the landing
position is.

00:31:33.126 --> 00:31:35.476 A:middle
Because if the landing
position is zero,

00:31:35.476 --> 00:31:37.156 A:middle
so if the target
contentOffset is zero

00:31:37.366 --> 00:31:40.436 A:middle
and our current contentOffset
isn't already zero,

00:31:40.656 --> 00:31:43.146 A:middle
it means that we're about to
start decelerating back to zero

00:31:43.146 --> 00:31:45.226 A:middle
which is what we
wanted to find out.

00:31:45.986 --> 00:31:47.756 A:middle
So, we'll grab our
current offset.

00:31:47.756 --> 00:31:53.526 A:middle
And then if the target
contentOffset.x is zero

00:31:53.746 --> 00:31:55.526 A:middle
but my current offset
is greater than zero,

00:31:55.526 --> 00:31:58.906 A:middle
that means that I am indeed
now decelerating back to zero.

00:31:58.906 --> 00:32:03.406 A:middle
And then, of course,
when the scrolling ends,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:31:58.906 --> 00:32:03.406 A:middle
And then, of course,
when the scrolling ends,

00:32:03.406 --> 00:32:05.176 A:middle
I just need to remember
to clear that flag.

00:32:05.176 --> 00:32:06.366 A:middle
We're not decelerating back

00:32:06.366 --> 00:32:07.786 A:middle
to zero once we've
stopped scrolling.

00:32:08.376 --> 00:32:11.826 A:middle
OK, so now, if we are
decelerating back to zero,

00:32:11.826 --> 00:32:14.786 A:middle
we need to figure out the
ratio of the distances

00:32:14.786 --> 00:32:17.006 A:middle
that are going to
be scrolled here.

00:32:17.386 --> 00:32:19.496 A:middle
So we already have
our own offset.

00:32:20.466 --> 00:32:24.096 A:middle
We can calculate the outer
offset which is the pull offset,

00:32:24.096 --> 00:32:25.366 A:middle
the same way that
we did it above.

00:32:26.506 --> 00:32:29.966 A:middle
And then our deceleration
distance ratio is simply the

00:32:29.966 --> 00:32:33.176 A:middle
pull offset divided by the
inner ScrollView's offset.

00:32:34.506 --> 00:32:40.316 A:middle
So now we can use that
up here in this code here

00:32:40.316 --> 00:32:42.846 A:middle
where we were calculating what
to report to the delegate.

00:32:43.266 --> 00:32:46.676 A:middle
So we were reporting that the
delegate's pull offset should

00:32:46.676 --> 00:32:49.306 A:middle
always be basically
moving together with ours.

00:32:49.906 --> 00:32:53.516 A:middle
But instead, we're going to do
something different in the case

00:32:53.566 --> 00:32:55.096 A:middle
where we're decelerating
back to zero.

00:32:55.436 --> 00:32:59.896 A:middle
So first of all, if we are
not decelerating back to zero,

00:32:59.896 --> 00:33:03.036 A:middle
we're going to do the
same thing we did before.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:32:59.896 --> 00:33:03.036 A:middle
we're going to do the
same thing we did before.

00:33:03.206 --> 00:33:07.066 A:middle
But if we are decelerating back
to zero, we're instead going

00:33:07.066 --> 00:33:10.376 A:middle
to choose a pull offset
which is our own offset times

00:33:10.376 --> 00:33:11.666 A:middle
that ratio that we calculated.

00:33:11.666 --> 00:33:14.026 A:middle
And that's going to cause
the outer paging ScrollView

00:33:14.236 --> 00:33:16.916 A:middle
to move more slowly when we're

00:33:16.916 --> 00:33:18.776 A:middle
in this decelerating
back to zero condition.

00:33:19.146 --> 00:33:22.806 A:middle
So I'm going to go
ahead and run it again.

00:33:22.976 --> 00:33:27.856 A:middle
And you can now see that if I
let go of this and let it return

00:33:27.856 --> 00:33:31.996 A:middle
to zero, they come in
for landing together.

00:33:31.996 --> 00:33:34.546 A:middle
So that's another technique
that's maybe useful.

00:33:34.706 --> 00:33:36.076 A:middle
And I'm going to turn
it back over to Josh

00:33:36.076 --> 00:33:37.086 A:middle
to talk about another topic.

00:33:38.516 --> 00:33:44.076 A:middle
[ Applause ]

00:33:44.576 --> 00:33:46.416 A:middle
>> OK, so that's
topic number one.

00:33:47.026 --> 00:33:49.456 A:middle
Now, as I mentioned, we
also want to take a look

00:33:49.456 --> 00:33:52.146 A:middle
at how we built the
Messages Interface

00:33:52.656 --> 00:33:55.016 A:middle
with those really
interesting bouncy bubbles

00:33:55.016 --> 00:33:56.856 A:middle
as you're scrolling
through conversations.

00:33:57.606 --> 00:34:00.276 A:middle
Now, this is actually a
really, really cool stuff.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:57.606 --> 00:34:00.276 A:middle
Now, this is actually a
really, really cool stuff.

00:34:00.276 --> 00:34:01.666 A:middle
And if you didn't have a chance

00:34:01.666 --> 00:34:04.996 A:middle
to watch the earlier UIKit
Dynamics talk this week,

00:34:05.346 --> 00:34:07.236 A:middle
I would strongly encourage
you to go check that out.

00:34:07.236 --> 00:34:08.565 A:middle
There's some very
cool stuff there.

00:34:08.815 --> 00:34:13.106 A:middle
This is not actually a UI
Dynamics session, so we're going

00:34:13.106 --> 00:34:15.136 A:middle
to go over a bit of stuff
here and give you an idea

00:34:15.136 --> 00:34:17.016 A:middle
of how you can use it
in this configuration,

00:34:17.016 --> 00:34:19.485 A:middle
but we're not going to go
into a huge amount of depth

00:34:19.485 --> 00:34:20.866 A:middle
on that particular API.

00:34:22.536 --> 00:34:24.565 A:middle
Similarly, we're going
to use a UICollectionView

00:34:24.565 --> 00:34:25.386 A:middle
in this demo here.

00:34:25.766 --> 00:34:27.886 A:middle
And if you haven't used
UICollectionView before,

00:34:28.286 --> 00:34:30.596 A:middle
there was a great
talk last year in 2012

00:34:30.596 --> 00:34:32.896 A:middle
about how UICollectionView
can be used,

00:34:33.226 --> 00:34:34.636 A:middle
and I'd encourage
you to go watch that.

00:34:35.085 --> 00:34:36.886 A:middle
We're going to talk about
some of the high level details

00:34:36.886 --> 00:34:39.005 A:middle
of how you use it here,
but we're not going to go

00:34:39.005 --> 00:34:40.005 A:middle
into a lot of depth again.

00:34:40.406 --> 00:34:42.436 A:middle
So the really interesting
thing that we're going

00:34:42.436 --> 00:34:45.335 A:middle
to show is the interesting
marriage of those two APIs,

00:34:45.335 --> 00:34:47.416 A:middle
CollectionView and UIDynamics,

00:34:47.706 --> 00:34:50.016 A:middle
and we'll see how they fit
together to make this kind

00:34:50.016 --> 00:34:51.856 A:middle
of interface really,
really easy to build.

00:34:52.916 --> 00:34:55.096 A:middle
So, let's take a look at what
it is that we want to build.

00:34:56.505 --> 00:34:57.796 A:middle
Some beautiful great squares.

00:34:58.156 --> 00:34:59.606 A:middle
But the interesting
thing about them is

00:34:59.606 --> 00:35:00.866 A:middle
that when our user scrolls them,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:34:59.606 --> 00:35:00.866 A:middle
that when our user scrolls them,

00:35:01.146 --> 00:35:03.136 A:middle
we're going to have them
get this really nice

00:35:03.246 --> 00:35:03.986 A:middle
bouncing effect.

00:35:04.366 --> 00:35:07.106 A:middle
I've exaggerated it here so
it's more visible than it is

00:35:07.106 --> 00:35:08.266 A:middle
in the Messages application.

00:35:08.266 --> 00:35:10.486 A:middle
You might want to tone it down
a little bit so that you don't,

00:35:10.486 --> 00:35:12.496 A:middle
you know, cause your
users to go too crazy.

00:35:12.966 --> 00:35:16.736 A:middle
But we want to build something
that looks just like that.

00:35:16.946 --> 00:35:19.056 A:middle
Now, if we didn't do anything,
of course, what would happen

00:35:19.286 --> 00:35:20.756 A:middle
as we scroll this
kind of content is

00:35:20.756 --> 00:35:22.786 A:middle
that everything would
just move, stuck together,

00:35:23.066 --> 00:35:24.306 A:middle
and it feel pretty static.

00:35:24.306 --> 00:35:26.636 A:middle
It's, you know, it's the kind
of scrolling you expect to see.

00:35:27.186 --> 00:35:28.526 A:middle
But it's not quite
as interesting

00:35:28.526 --> 00:35:29.366 A:middle
as what we're going for.

00:35:30.246 --> 00:35:33.136 A:middle
So what do we have to change
in order to make it go

00:35:33.136 --> 00:35:35.126 A:middle
from that to the bounciness?

00:35:35.936 --> 00:35:38.056 A:middle
We have to have kind
of a conceptual shift

00:35:38.056 --> 00:35:39.066 A:middle
in what we're trying to do.

00:35:39.526 --> 00:35:43.656 A:middle
So by default, UIScrollViews
scroll its content area and all

00:35:43.656 --> 00:35:46.156 A:middle
of its children just move
along with it directly pinned

00:35:46.156 --> 00:35:48.406 A:middle
under the finger, moving
with the ScrollView.

00:35:49.156 --> 00:35:52.306 A:middle
Instead, we want to
behave as if each

00:35:52.306 --> 00:35:55.886 A:middle
of these individual cells
is pinned to the super view,

00:35:55.886 --> 00:35:58.196 A:middle
pinned to that ScrollView
at their center point.

00:35:59.266 --> 00:36:01.476 A:middle
And when we scroll,
we actually want

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:35:59.266 --> 00:36:01.476 A:middle
And when we scroll,
we actually want

00:36:01.476 --> 00:36:04.486 A:middle
to move the attachment points
instead of the views themselves.

00:36:05.026 --> 00:36:07.826 A:middle
We want the individual child
elements to remain in place

00:36:07.826 --> 00:36:11.296 A:middle
and resist scrolling and just
move their attachment points.

00:36:11.846 --> 00:36:14.026 A:middle
Then we can attach
the individual cells

00:36:14.076 --> 00:36:16.326 A:middle
to their attachment
points with springs

00:36:16.816 --> 00:36:19.006 A:middle
and let the dynamic
system pull them along

00:36:19.006 --> 00:36:20.186 A:middle
and bounce into place.

00:36:20.646 --> 00:36:23.316 A:middle
So how are we going to do that?

00:36:24.036 --> 00:36:25.806 A:middle
Well, you know, you
just heard me say,

00:36:25.886 --> 00:36:28.846 A:middle
the scrollViewDidScroll delegate
method for the last sample,

00:36:29.166 --> 00:36:31.376 A:middle
we talked about that
a lot in recent years,

00:36:31.616 --> 00:36:35.406 A:middle
so you wouldn't be too surprised
if I were to say that now.

00:36:35.856 --> 00:36:36.816 A:middle
But in this case, we're going

00:36:36.816 --> 00:36:37.796 A:middle
to do something a
little bit different.

00:36:38.976 --> 00:36:41.986 A:middle
We're going to go ahead and use
a UICollectionViewFlowLayout.

00:36:42.816 --> 00:36:46.316 A:middle
A UICollectionViewFlowLayout
is the object that you use

00:36:46.356 --> 00:36:49.476 A:middle
to represent locations
of things on the screen

00:36:49.476 --> 00:36:50.766 A:middle
within a UICollectionView.

00:36:51.266 --> 00:36:53.326 A:middle
So this is the point where
if you're not really familiar

00:36:53.326 --> 00:36:55.566 A:middle
with UICollectionView,
I strongly encourage you

00:36:55.566 --> 00:36:56.726 A:middle
to read a little
bit more about it.

00:36:57.066 --> 00:36:58.646 A:middle
We're going to talk about
the details that you need

00:36:58.646 --> 00:37:00.786 A:middle
to understand in order
to build this UI,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:58.646 --> 00:37:00.786 A:middle
to understand in order
to build this UI,

00:37:00.786 --> 00:37:02.536 A:middle
but there's a lot
more depth here

00:37:02.536 --> 00:37:04.586 A:middle
that lets you do even
more powerful things

00:37:04.586 --> 00:37:07.146 A:middle
if you go a little bit further.

00:37:07.306 --> 00:37:09.656 A:middle
So once we've got our
UICollectionViewFlowLayout

00:37:09.696 --> 00:37:11.846 A:middle
subclass, we're going
to do a few things in it

00:37:11.846 --> 00:37:14.096 A:middle
to tie it together with
the UIDynamic systems.

00:37:14.906 --> 00:37:17.036 A:middle
So we're going to create
a UIDynamicAnimator

00:37:17.266 --> 00:37:19.626 A:middle
which is the main entry
point to UIKit Dynamics.

00:37:19.906 --> 00:37:22.146 A:middle
This is the thing that
represents the physics world

00:37:22.406 --> 00:37:24.016 A:middle
and lets us build
up the interface

00:37:24.426 --> 00:37:26.546 A:middle
to actually get those
bouncing effects.

00:37:27.356 --> 00:37:28.896 A:middle
Now, to create the attachments,

00:37:28.986 --> 00:37:30.286 A:middle
the springs that
we talked about,

00:37:30.516 --> 00:37:34.376 A:middle
we're going to create UIDynamic
behaviors, one for each item

00:37:34.376 --> 00:37:35.326 A:middle
in our collection view.

00:37:35.936 --> 00:37:37.236 A:middle
Now a UIDynamic--

00:37:37.726 --> 00:37:40.646 A:middle
UIAttachmentBehavior is a
particular type of behavior

00:37:40.646 --> 00:37:42.776 A:middle
that represents a spring,
and it's going to give us

00:37:42.776 --> 00:37:44.336 A:middle
that bouncing effect
that we're looking for.

00:37:45.026 --> 00:37:47.226 A:middle
So then, the only other thing
left to do in order to complete

00:37:47.226 --> 00:37:50.166 A:middle
that interface will be to
actually stretch those springs

00:37:50.166 --> 00:37:51.706 A:middle
out as the user scrolls.

00:37:52.366 --> 00:37:55.936 A:middle
And we'll do that by
stretching them out, obviously.

00:37:56.336 --> 00:37:58.066 A:middle
Now, as I mentioned, we're going

00:37:58.206 --> 00:38:00.536 A:middle
to create this
CollectionViewLayout subclass,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:37:58.206 --> 00:38:00.536 A:middle
to create this
CollectionViewLayout subclass,

00:38:00.566 --> 00:38:02.096 A:middle
so let's see what
that looks like.

00:38:03.296 --> 00:38:05.156 A:middle
And now there's three methods
that we have to implement.

00:38:05.976 --> 00:38:08.166 A:middle
We've got the prepareLayout
method,

00:38:08.516 --> 00:38:11.016 A:middle
and prepareLayout is called
by the collection view

00:38:11.276 --> 00:38:13.766 A:middle
to get your CollectionViewLayout
subclass ready

00:38:13.766 --> 00:38:15.196 A:middle
to display things on screen.

00:38:15.876 --> 00:38:18.986 A:middle
So in order to figure
out what to display

00:38:18.986 --> 00:38:20.246 A:middle
at particular locations,

00:38:20.246 --> 00:38:23.326 A:middle
you create these objects
called UICollectionView

00:38:23.326 --> 00:38:24.336 A:middle
LayoutAttributes.

00:38:24.846 --> 00:38:27.186 A:middle
A UICollectionView
LayoutAttributes object

00:38:27.186 --> 00:38:28.996 A:middle
represents the position
of an item

00:38:28.996 --> 00:38:30.666 A:middle
in the collection
view on the screen.

00:38:31.656 --> 00:38:33.266 A:middle
Now we're going to take
advantage of the fact

00:38:33.266 --> 00:38:35.666 A:middle
that we're a subclass of
UICollectionViewFlowLayout

00:38:35.886 --> 00:38:37.426 A:middle
to create these objects for us.

00:38:37.616 --> 00:38:39.906 A:middle
Our super class to, the flow
layout, already knows how

00:38:39.906 --> 00:38:41.156 A:middle
to do layout of the thing--

00:38:41.156 --> 00:38:43.206 A:middle
of things in a particular
grid-like structure,

00:38:43.626 --> 00:38:45.366 A:middle
so we can just call
through the super class

00:38:45.366 --> 00:38:47.886 A:middle
to get the initial positions
so we don't have to do any

00:38:47.886 --> 00:38:50.126 A:middle
of the math to do the
initial layout calculations.

00:38:50.506 --> 00:38:52.486 A:middle
That's really the benefit
of being a subclass

00:38:52.486 --> 00:38:53.466 A:middle
of the flow layout here.

00:38:53.696 --> 00:38:55.106 A:middle
It's going to save
us a lot of code

00:38:55.106 --> 00:38:56.746 A:middle
for doing the initial
location setup.

00:38:58.146 --> 00:38:59.026 A:middle
Then once we've got that,

00:38:59.256 --> 00:39:01.806 A:middle
we're going to create a
UIDynamicAnimator which is going

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:38:59.256 --> 00:39:01.806 A:middle
we're going to create a
UIDynamicAnimator which is going

00:39:01.806 --> 00:39:03.596 A:middle
to represent that physics world

00:39:03.936 --> 00:39:05.966 A:middle
and create all the
UIAttachmentBehaviors.

00:39:06.486 --> 00:39:08.486 A:middle
We're going to create
one UIAttachmentBehavior

00:39:08.666 --> 00:39:11.026 A:middle
for each UICollectionView
LayoutAttributes object

00:39:11.026 --> 00:39:14.116 A:middle
that we have because the layout
attributes object represents the

00:39:14.116 --> 00:39:15.966 A:middle
element on screen, its position,

00:39:16.516 --> 00:39:19.476 A:middle
and the attachment behavior
represents the spring attaching

00:39:19.476 --> 00:39:21.386 A:middle
it to its attachment
point in the ScrollView.

00:39:21.896 --> 00:39:24.246 A:middle
So we want one for
each paired together.

00:39:25.286 --> 00:39:27.286 A:middle
Now these other two methods
that we have here are going

00:39:27.286 --> 00:39:28.766 A:middle
to be really, really easy.

00:39:29.096 --> 00:39:31.536 A:middle
And so easy that I'm going to
write the code on the slide here

00:39:31.826 --> 00:39:33.226 A:middle
because it's just that simple.

00:39:33.836 --> 00:39:35.076 A:middle
A UIDynamicAnimator

00:39:35.076 --> 00:39:36.996 A:middle
and UICollectionViewFlowLayout
are designed

00:39:36.996 --> 00:39:38.206 A:middle
to work really well together.

00:39:38.686 --> 00:39:41.226 A:middle
So in this case, we've got
items for Rect as a method

00:39:41.226 --> 00:39:44.106 A:middle
on UIDynamicAnimator which
is exactly what we need

00:39:44.106 --> 00:39:45.606 A:middle
to answer the collection
view question,

00:39:45.876 --> 00:39:47.416 A:middle
layoutAttributes
ForElementInRect,

00:39:47.766 --> 00:39:49.476 A:middle
so we can just pass the
result directly back.

00:39:50.946 --> 00:39:53.956 A:middle
Additionally, we've got
this layoutAttributes

00:39:53.956 --> 00:39:57.716 A:middle
ForCellAtIndexPath, and
we can return the result

00:39:57.716 --> 00:39:59.816 A:middle
of that directly for this
other CollectionViewLayout

00:39:59.866 --> 00:40:00.626 A:middle
subclass method.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:39:59.866 --> 00:40:00.626 A:middle
subclass method.

00:40:01.216 --> 00:40:02.586 A:middle
So with those two
things implemented,

00:40:02.876 --> 00:40:04.586 A:middle
that will give us
everything we need in order

00:40:04.586 --> 00:40:06.796 A:middle
to represent our
CollectionViewLayout

00:40:07.856 --> 00:40:09.126 A:middle
with the bouncing effects.

00:40:09.186 --> 00:40:10.786 A:middle
So then the last
bit to represent all

00:40:10.786 --> 00:40:12.846 A:middle
of this is stretching
the springs.

00:40:13.276 --> 00:40:14.466 A:middle
So how do we do that?

00:40:15.206 --> 00:40:18.296 A:middle
Well, as I mentioned, we've got
the scrollViewDidScroll delegate

00:40:18.296 --> 00:40:20.256 A:middle
method that we usually
use for this kind of thing

00:40:20.256 --> 00:40:22.226 A:middle
but we're not going to
do that this time around.

00:40:22.996 --> 00:40:24.826 A:middle
And to understand why, it helps

00:40:24.826 --> 00:40:27.726 A:middle
to remember a particular
property of UIScrollViews

00:40:28.226 --> 00:40:30.996 A:middle
and that is that the
ScrollView's contentOffset is

00:40:30.996 --> 00:40:32.496 A:middle
equal to its bounds.origin.

00:40:32.896 --> 00:40:34.206 A:middle
Those two are the same thing.

00:40:35.366 --> 00:40:36.826 A:middle
Now the reason that
that is important

00:40:36.826 --> 00:40:38.606 A:middle
in this particular example is

00:40:38.606 --> 00:40:41.226 A:middle
because there's actually a
method on UICollectionViewLayout

00:40:41.256 --> 00:40:42.296 A:middle
that we can take advantage

00:40:42.296 --> 00:40:44.946 A:middle
of to get the information
we're looking

00:40:44.946 --> 00:40:47.356 A:middle
for in the CollectionViewLayout
subclass itself.

00:40:47.356 --> 00:40:49.446 A:middle
And the reason we want
to do that instead

00:40:49.446 --> 00:40:51.186 A:middle
of using the delegate method is

00:40:51.186 --> 00:40:53.996 A:middle
because we're writing all
these codes in a subclass

00:40:53.996 --> 00:40:55.546 A:middle
of UICollectionViewFlowLayout,

00:40:56.096 --> 00:40:59.756 A:middle
but the flow layout is this
layout object that exists

00:40:59.966 --> 00:41:03.086 A:middle
to help a collection view
display content on screen.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:40:59.966 --> 00:41:03.086 A:middle
to help a collection view
display content on screen.

00:41:03.946 --> 00:41:06.166 A:middle
scrollViewDidScroll is a
scrollView delegate method.

00:41:06.486 --> 00:41:08.586 A:middle
The CollectionViewLayout
is almost certainly not the

00:41:08.586 --> 00:41:09.436 A:middle
ScrollView delegate.

00:41:09.806 --> 00:41:11.466 A:middle
So if we were to try
and use that method,

00:41:11.466 --> 00:41:13.036 A:middle
we'd have to create
a tight coupling

00:41:13.256 --> 00:41:15.826 A:middle
between the collection view
and the CollectionViewLayout

00:41:16.166 --> 00:41:18.876 A:middle
by passing that information
about scrolling through

00:41:19.266 --> 00:41:21.596 A:middle
and it would create
just too much structure

00:41:21.946 --> 00:41:23.936 A:middle
when we really want to
keep those thing separated.

00:41:25.086 --> 00:41:26.846 A:middle
So instead, we can
advantage of this method.

00:41:27.116 --> 00:41:29.706 A:middle
It's called shouldInvalidate
LayoutForBoundsChange.

00:41:30.346 --> 00:41:32.986 A:middle
Now, the nice thing here is that
we're passed in the new bounds

00:41:32.986 --> 00:41:33.996 A:middle
that we're changing too

00:41:34.336 --> 00:41:36.646 A:middle
and since the bounds.origin
is the contentOffset,

00:41:36.976 --> 00:41:38.896 A:middle
we've got our new
contentOffset right there.

00:41:38.896 --> 00:41:40.756 A:middle
And at the time that
this is called,

00:41:41.026 --> 00:41:42.786 A:middle
the bounds has yet
to be changed.

00:41:43.056 --> 00:41:45.796 A:middle
So if we asked this ScrollView
for its current bounds,

00:41:45.976 --> 00:41:47.706 A:middle
we'll find out the
previous contentOffset.

00:41:48.016 --> 00:41:50.656 A:middle
So that let us find out
how much has been scrolled

00:41:50.916 --> 00:41:52.846 A:middle
since the last time
this was called.

00:41:54.236 --> 00:41:56.736 A:middle
So we can do that by just
subtracting the y-coordinate

00:41:56.736 --> 00:41:57.976 A:middle
of those two values.

00:41:58.616 --> 00:42:00.896 A:middle
We're only carrying about
vertical scrolling in this case,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:58.616 --> 00:42:00.896 A:middle
We're only carrying about
vertical scrolling in this case,

00:42:01.136 --> 00:42:02.326 A:middle
so that's really easy to do,

00:42:02.646 --> 00:42:04.206 A:middle
we just get a CGFloat
for the delta.

00:42:05.066 --> 00:42:08.116 A:middle
And once we've got that,
we can stretch our springs

00:42:08.426 --> 00:42:10.506 A:middle
by shifting the positions
of each

00:42:10.506 --> 00:42:12.156 A:middle
of those layout attributes
objects.

00:42:12.546 --> 00:42:15.866 A:middle
The layout attributes represent
the current position on screen

00:42:16.066 --> 00:42:18.756 A:middle
of the elements and we want
them to resist scrolling.

00:42:19.036 --> 00:42:20.996 A:middle
So as we scroll up, we
want to shift them back

00:42:21.066 --> 00:42:22.776 A:middle
down by the delta
that we scrolled

00:42:23.116 --> 00:42:25.586 A:middle
and let the dynamic
system pull them into place

00:42:25.586 --> 00:42:26.976 A:middle
and bounce as it goes there.

00:42:28.416 --> 00:42:31.256 A:middle
Then the last bit that we
have to remember to do is

00:42:31.256 --> 00:42:34.046 A:middle
to tell the UIDynamic system
that we've made that change.

00:42:34.436 --> 00:42:37.426 A:middle
Now, this is a bit of
implementation detail--

00:42:37.426 --> 00:42:38.436 A:middle
not implementation detail.

00:42:38.436 --> 00:42:42.756 A:middle
It's an interesting behavior
of dynamics that you have

00:42:42.756 --> 00:42:45.536 A:middle
to understand to really be
able to do this which is

00:42:45.536 --> 00:42:48.316 A:middle
that when you create
attachment behaviors

00:42:48.316 --> 00:42:50.766 A:middle
or really any behaviors
in that dynamic system,

00:42:51.386 --> 00:42:54.096 A:middle
UIKit Dynamics pull off the
values out of your models

00:42:54.326 --> 00:42:56.756 A:middle
into the dynamics
physics world at the time

00:42:56.756 --> 00:42:58.476 A:middle
that you create the
attachment behavior.

00:42:59.696 --> 00:43:02.286 A:middle
But we're going to go and update
that value by changing it,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:42:59.696 --> 00:43:02.286 A:middle
But we're going to go and update
that value by changing it,

00:43:02.286 --> 00:43:03.586 A:middle
we just saw on the
previous line,

00:43:03.916 --> 00:43:05.826 A:middle
by shifting the layout
attributes position.

00:43:06.336 --> 00:43:08.546 A:middle
If we didn't tell the dynamics
system we had done that,

00:43:08.776 --> 00:43:10.466 A:middle
it wouldn't get pulled
into the physics world,

00:43:10.766 --> 00:43:13.346 A:middle
and so the physics system
wouldn't have any pulled spring

00:43:13.346 --> 00:43:13.976 A:middle
to simulate.

00:43:14.396 --> 00:43:16.506 A:middle
So we have to let this
dynamics system know

00:43:16.506 --> 00:43:17.686 A:middle
that we've made this change.

00:43:18.246 --> 00:43:20.486 A:middle
Now, this is actually going
to be done with a method

00:43:20.486 --> 00:43:22.146 A:middle
that Eliza is going to
show you in a minute

00:43:22.146 --> 00:43:25.726 A:middle
that will be available in SID
[phonetic] 2, so you'll be able

00:43:25.726 --> 00:43:27.976 A:middle
to do this real soon now.

00:43:28.116 --> 00:43:32.026 A:middle
To get us started on
building this, Eliza is going

00:43:32.026 --> 00:43:33.056 A:middle
to come back and do our demo.

00:43:34.516 --> 00:43:39.296 A:middle
[ Applause ]

00:43:39.796 --> 00:43:42.546 A:middle
>> OK, so let's add this
springy behavior to the cells

00:43:42.546 --> 00:43:44.536 A:middle
that I've already got in
my color collection view.

00:43:44.536 --> 00:43:47.766 A:middle
In order to do that, we
need to write a subclass

00:43:47.766 --> 00:43:50.416 A:middle
of UICollectionViewFlowLayout,
so I'm going

00:43:50.416 --> 00:43:56.726 A:middle
to add that now, I think.

00:43:57.216 --> 00:43:59.096 A:middle
There we go.

00:43:59.286 --> 00:44:02.016 A:middle
So we will make a new class,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:43:59.286 --> 00:44:02.016 A:middle
So we will make a new class,

00:44:02.016 --> 00:44:07.706 A:middle
we'll call it "Springy Flow
Layout" and it's a subclass

00:44:07.706 --> 00:44:11.496 A:middle
of UICollectionViewFlowLayout,
add it to my target.

00:44:13.176 --> 00:44:15.446 A:middle
All right, now in my View
Controller's [inaudible] file

00:44:15.446 --> 00:44:18.906 A:middle
here, I'm going to zoom in a
little bit so that you can see.

00:44:19.296 --> 00:44:25.366 A:middle
I've got this ScrollView which
contains the building view

00:44:25.366 --> 00:44:27.076 A:middle
and the collection
view and then it also--

00:44:27.136 --> 00:44:30.296 A:middle
and the collection view contains
a collection view flow layout.

00:44:30.386 --> 00:44:33.206 A:middle
So to adopt this new subclass
that I'm about to write,

00:44:33.426 --> 00:44:35.396 A:middle
it's going to be simply a
matter of changing the class

00:44:36.156 --> 00:44:39.316 A:middle
of my CollectionViewFlowLayout
to be Springy Flow Layout.

00:44:39.476 --> 00:44:40.996 A:middle
It's pretty easy.

00:44:41.686 --> 00:44:44.616 A:middle
All right, so let's go ahead and
implement Springy Flow Layout.

00:44:45.176 --> 00:44:51.816 A:middle
First thing we're going to
need in this flow layout is a--

00:44:51.866 --> 00:44:53.476 A:middle
let's close this, yup.

00:44:53.806 --> 00:44:56.596 A:middle
We're going to need
a dynamic animator.

00:44:56.596 --> 00:44:59.566 A:middle
And we're going to want to
create the dynamic animator

00:44:59.936 --> 00:45:01.886 A:middle
and fill it with springs.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:44:59.936 --> 00:45:01.886 A:middle
and fill it with springs.

00:45:02.206 --> 00:45:06.516 A:middle
And we're going to do that by
overwriting the prepareLayout

00:45:06.636 --> 00:45:10.756 A:middle
method of our super class which
is UICollectionViewFlowLayout.

00:45:11.026 --> 00:45:13.646 A:middle
And we're taking advantages of
the fact that in prepareLayout,

00:45:13.646 --> 00:45:16.036 A:middle
our supper class is doing
all the math for us.

00:45:16.036 --> 00:45:18.986 A:middle
It's figuring out where all of
the different cells should go.

00:45:19.366 --> 00:45:20.706 A:middle
And it's doing that here

00:45:20.706 --> 00:45:22.726 A:middle
in the super implementation
of prepareLayout.

00:45:23.036 --> 00:45:27.056 A:middle
So now that that's been
called, we can go ahead

00:45:27.056 --> 00:45:29.516 A:middle
and create our dynamic
animator, if we haven't already.

00:45:29.866 --> 00:45:33.976 A:middle
And then we can ask
the super class for all

00:45:33.976 --> 00:45:36.076 A:middle
of the layout attributes
that it just computed.

00:45:36.936 --> 00:45:39.416 A:middle
And we'll do that by
getting our content size,

00:45:39.686 --> 00:45:41.596 A:middle
that's the collection
view content size.

00:45:41.916 --> 00:45:45.356 A:middle
And then we'll simply ask the
super class to give us an array

00:45:45.636 --> 00:45:48.406 A:middle
of all of the elements-- the
layout attributes for all

00:45:48.406 --> 00:45:51.026 A:middle
of the elements in the Rect
that is our entire content.

00:45:51.446 --> 00:45:54.986 A:middle
Now, this is a convenient
method that I'm using here.

00:45:54.986 --> 00:45:58.496 A:middle
I've got 80 cells and not
that big a collection.

00:45:58.496 --> 00:46:01.276 A:middle
If you had a collection of
hundreds of thousands of things

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:45:58.496 --> 00:46:01.276 A:middle
If you had a collection of
hundreds of thousands of things

00:46:01.276 --> 00:46:03.466 A:middle
or even maybe thousands of
things, you might not want

00:46:03.466 --> 00:46:04.816 A:middle
to load them all into
memory at a time.

00:46:04.856 --> 00:46:08.286 A:middle
So note that I am cheating
a little bit in this demo.

00:46:08.416 --> 00:46:10.516 A:middle
At that point, you might want
to tile and I'll show you

00:46:10.516 --> 00:46:12.656 A:middle
in a second where
you would do that.

00:46:13.246 --> 00:46:15.416 A:middle
But-- all right, so for now
we've got all of our items

00:46:15.766 --> 00:46:17.946 A:middle
and we're going to
iterate through them

00:46:18.396 --> 00:46:20.636 A:middle
and make springs for each one.

00:46:21.376 --> 00:46:24.566 A:middle
So a spring is
UIAttachmentBehavior.

00:46:24.856 --> 00:46:28.256 A:middle
We initialize it with the item
which is our layout attributes

00:46:28.256 --> 00:46:32.666 A:middle
for that particular cell and we
attach it to the anchor point

00:46:32.666 --> 00:46:34.406 A:middle
which is the item center.

00:46:34.476 --> 00:46:36.366 A:middle
And that center was
calculated for us

00:46:36.466 --> 00:46:39.496 A:middle
by the super implementation
of the flow layout.

00:46:39.496 --> 00:46:41.286 A:middle
It figured out where that
item was supposed to go.

00:46:42.476 --> 00:46:45.216 A:middle
So now that we've got a spring,
we need to set its length.

00:46:45.576 --> 00:46:47.146 A:middle
Now this is the--
this is important.

00:46:47.396 --> 00:46:51.026 A:middle
The spring's length has to
be zero because if you think

00:46:51.026 --> 00:46:53.666 A:middle
about it, as we scroll, the
springs are going to stretch out

00:46:53.666 --> 00:46:56.306 A:middle
and then the content is
going to bounce around.

00:46:56.636 --> 00:46:58.716 A:middle
If the spring's length
was greater than zero,

00:46:58.916 --> 00:47:00.426 A:middle
then it wouldn't be
guaranteed to come

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:46:58.916 --> 00:47:00.426 A:middle
then it wouldn't be
guaranteed to come

00:47:00.426 --> 00:47:02.476 A:middle
to rest right at
its anchor point.

00:47:02.556 --> 00:47:03.806 A:middle
It could potentially
come to rest

00:47:03.806 --> 00:47:06.656 A:middle
at an arbitrary location
somewhere near its anchor point.

00:47:06.876 --> 00:47:07.986 A:middle
That would give you
a collection view

00:47:07.986 --> 00:47:09.376 A:middle
with some really weird behavior.

00:47:09.376 --> 00:47:11.966 A:middle
When it came to rest, the cells
would be kind of overlapping

00:47:11.966 --> 00:47:13.406 A:middle
and kind of off center.

00:47:13.686 --> 00:47:15.426 A:middle
So we want our spring
to be length zero.

00:47:16.386 --> 00:47:19.316 A:middle
We also need to set the dumping
and frequency of the spring

00:47:19.316 --> 00:47:21.626 A:middle
which I've done by
trial and error.

00:47:22.016 --> 00:47:23.636 A:middle
These values turned
out to be nice.

00:47:24.196 --> 00:47:26.886 A:middle
And then we need to tell
our dynamic animator

00:47:27.096 --> 00:47:28.246 A:middle
about this spring.

00:47:28.916 --> 00:47:31.126 A:middle
So we add the spring
as a behavior

00:47:31.126 --> 00:47:32.276 A:middle
to the dynamic animator.

00:47:32.856 --> 00:47:34.946 A:middle
All right, so now we
have done this once

00:47:35.216 --> 00:47:37.506 A:middle
when the prepareLayout
method is first called

00:47:37.916 --> 00:47:41.476 A:middle
and that will be good enough.

00:47:41.556 --> 00:47:44.376 A:middle
We need to-- in addition,

00:47:44.636 --> 00:47:47.606 A:middle
we need to implement
these two other methods,

00:47:47.886 --> 00:47:48.986 A:middle
overwrite them, rather.

00:47:49.226 --> 00:47:51.246 A:middle
So there's layoutAttributes
ForElementInRect.

00:47:51.716 --> 00:47:53.336 A:middle
We have to overwrite that method

00:47:53.536 --> 00:47:58.246 A:middle
to tell our collection view
what items are currently visible

00:47:58.246 --> 00:47:59.096 A:middle
in a particular Rect.

00:47:59.416 --> 00:48:01.676 A:middle
And notice that the
super implementation

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:47:59.416 --> 00:48:01.676 A:middle
And notice that the
super implementation

00:48:01.676 --> 00:48:04.336 A:middle
of this wouldn't work
because we're moving the items

00:48:04.336 --> 00:48:06.116 A:middle
around using this
dynamic system.

00:48:06.396 --> 00:48:09.366 A:middle
So we have to ask the dynamic
animator which is keeping track

00:48:09.366 --> 00:48:13.646 A:middle
of where they really are what's
currently available in the Rect

00:48:14.216 --> 00:48:18.916 A:middle
and UIDynamics provides this
nice call through for that

00:48:18.916 --> 00:48:20.836 A:middle
and the same exact logic goes

00:48:20.836 --> 00:48:23.586 A:middle
for this layoutAttributes
ForItemAtIndexPath method.

00:48:24.806 --> 00:48:27.966 A:middle
All right, so finally, we
just need to write the code

00:48:27.966 --> 00:48:30.496 A:middle
to stretch the springs
when scrolling takes place.

00:48:30.796 --> 00:48:32.256 A:middle
And as Josh explained,
we're going to do

00:48:32.256 --> 00:48:35.356 A:middle
that in shouldInvalidate
LayoutForBoundsChange.

00:48:36.256 --> 00:48:39.506 A:middle
Let me just get this to be
higher up on the screen.

00:48:39.826 --> 00:48:44.026 A:middle
OK. So in shouldInvalidate
LayoutForBoundsChange,

00:48:44.276 --> 00:48:47.516 A:middle
what we're going to do is
grab the ScrollView out,

00:48:47.736 --> 00:48:48.926 A:middle
which is just our
collection view,

00:48:49.236 --> 00:48:53.956 A:middle
and find out what its current--
well, how much we just scrolled

00:48:53.956 --> 00:48:56.316 A:middle
because remember that
this, because the bounds

00:48:56.316 --> 00:48:59.156 A:middle
of the ScrollView
change every time

00:48:59.156 --> 00:49:00.566 A:middle
that its contentOffset changes,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:48:59.156 --> 00:49:00.566 A:middle
that its contentOffset changes,

00:49:00.796 --> 00:49:02.586 A:middle
we're going to find this
method getting called

00:49:02.586 --> 00:49:03.986 A:middle
at every frame of scrolling.

00:49:03.986 --> 00:49:07.086 A:middle
So we want to know, what is
the delta that we scrolled

00:49:07.086 --> 00:49:08.346 A:middle
since the last time
this was called?

00:49:08.346 --> 00:49:11.636 A:middle
And then we're going to go
through all of the springs

00:49:11.826 --> 00:49:14.836 A:middle
that we made above and
we're going to stretch them

00:49:14.836 --> 00:49:20.796 A:middle
by moving the item that that
spring owns by the amount

00:49:20.796 --> 00:49:21.786 A:middle
that we just scrolled.

00:49:23.056 --> 00:49:26.306 A:middle
So, we grab the item
back out from the spring

00:49:26.306 --> 00:49:32.406 A:middle
which has an array of items
and then we get the center

00:49:32.406 --> 00:49:38.106 A:middle
of the item, adjust it by the
scroll delta, set it again,

00:49:38.486 --> 00:49:40.646 A:middle
and finally call
our SUD 2 method,

00:49:40.946 --> 00:49:44.566 A:middle
Dynamic Animator Update Item
For Current State coming soon.

00:49:44.896 --> 00:49:48.016 A:middle
And that will cause the
new center to be pulled

00:49:48.016 --> 00:49:50.766 A:middle
into the dynamic
system and it will cause

00:49:50.766 --> 00:49:52.416 A:middle
that bouncy effect
to start happening.

00:49:53.436 --> 00:49:55.546 A:middle
Now, the last thing we need

00:49:55.546 --> 00:49:57.696 A:middle
to do is tell this method
whether indeed it should

00:49:57.696 --> 00:49:58.756 A:middle
invalidate its layout.

00:49:58.756 --> 00:50:03.366 A:middle
We're going to say No because
the dynamic animator is going

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:49:58.756 --> 00:50:03.366 A:middle
We're going to say No because
the dynamic animator is going

00:50:03.366 --> 00:50:04.646 A:middle
to be moving the items around

00:50:04.646 --> 00:50:07.396 A:middle
and that itself will invalidate
the layout, so we don't need

00:50:07.396 --> 00:50:08.436 A:middle
to double invalidate it.

00:50:08.436 --> 00:50:10.446 A:middle
We can say, "No, it doesn't
have to invalidate 'cause

00:50:10.446 --> 00:50:11.266 A:middle
of the bounce change."

00:50:11.496 --> 00:50:13.626 A:middle
Instead, it will be
invalidated in a second

00:50:13.856 --> 00:50:16.806 A:middle
because of the moving
of the item.

00:50:17.456 --> 00:50:19.196 A:middle
All right, so let's see
what that looks like.

00:50:19.196 --> 00:50:24.846 A:middle
All right, so I'm going to grab
this cell, purple cell here,

00:50:24.846 --> 00:50:26.766 A:middle
and I'm going to
start scrolling.

00:50:27.516 --> 00:50:30.536 A:middle
Now, you'll notice we
have a bouncy effect.

00:50:30.536 --> 00:50:32.236 A:middle
It's not really the
bouncy effect we wanted.

00:50:32.886 --> 00:50:35.726 A:middle
First of all, my
finger, as presented

00:50:35.726 --> 00:50:37.166 A:middle
by this giant mouse pointer,

00:50:37.486 --> 00:50:39.636 A:middle
is coming off the
cell that I grabbed.

00:50:39.636 --> 00:50:41.816 A:middle
See how it gets away ahead
and then when the thing comes

00:50:41.816 --> 00:50:43.416 A:middle
to rest, it's back
under the finger again?

00:50:43.806 --> 00:50:45.816 A:middle
This is really not the
behavior that we wanted.

00:50:45.816 --> 00:50:46.586 A:middle
There's two problems.

00:50:46.586 --> 00:50:47.796 A:middle
First of all, the cell right

00:50:47.796 --> 00:50:49.486 A:middle
under my finger should
track my finger.

00:50:49.486 --> 00:50:50.726 A:middle
Otherwise, you have
this weird effect

00:50:50.936 --> 00:50:53.956 A:middle
where you're not directly
manipulating the content.

00:50:54.316 --> 00:50:57.996 A:middle
And second of all, all of the
cells are bouncing together.

00:50:57.996 --> 00:50:59.636 A:middle
They're not coming
apart as we wanted.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:51:00.036 --> 00:51:03.016 A:middle
So if you look back at the code,
this is actually not surprising.

00:51:03.236 --> 00:51:05.396 A:middle
We're adjusting the
center of every single item

00:51:05.396 --> 00:51:07.906 A:middle
in our collection view by the
same amount at every frame.

00:51:08.166 --> 00:51:09.106 A:middle
So of course, they
don't come apart.

00:51:09.396 --> 00:51:12.656 A:middle
And that's also why
that content is coming

00:51:12.656 --> 00:51:13.616 A:middle
out from under my finger.

00:51:13.906 --> 00:51:17.136 A:middle
All of the cells are resisting
scrolling by the same amount.

00:51:17.136 --> 00:51:19.706 A:middle
So I'm going to turn it back
over to Josh one more time

00:51:20.096 --> 00:51:23.086 A:middle
to explain the technique
for actually fixing this

00:51:23.086 --> 00:51:24.826 A:middle
and getting the behavior
that we want.

00:51:25.516 --> 00:51:30.906 A:middle
[ Applause ]

00:51:31.406 --> 00:51:33.976 A:middle
>> OK, so we left off on
last time that we're looking

00:51:33.976 --> 00:51:37.716 A:middle
at our video of this stuff
with this exact look here,

00:51:38.226 --> 00:51:39.926 A:middle
but we didn't actually play it.

00:51:39.926 --> 00:51:42.856 A:middle
If we had let go at this point
and allowed the dynamic system

00:51:42.856 --> 00:51:44.916 A:middle
to take over and run
that spring simulation,

00:51:45.136 --> 00:51:46.986 A:middle
we would've seen
exactly what Eliza saw

00:51:47.276 --> 00:51:48.606 A:middle
of everything bouncing together.

00:51:49.376 --> 00:51:51.626 A:middle
Now, of course, if we did
that a little bit more,

00:51:51.626 --> 00:51:53.056 A:middle
you'd see we stretched
the springs

00:51:53.056 --> 00:51:54.406 A:middle
and they all move
the same amount

00:51:54.406 --> 00:51:55.466 A:middle
and everything bounces together.

00:51:55.466 --> 00:51:58.236 A:middle
It's exactly what we saw
happen in Eliza's demo

00:51:58.476 --> 00:52:00.096 A:middle
and clearly not what we
were trying to build.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:51:58.476 --> 00:52:00.096 A:middle
and clearly not what we
were trying to build.

00:52:00.816 --> 00:52:03.676 A:middle
So what change do we have to
make in order to fix this?

00:52:04.756 --> 00:52:06.316 A:middle
Well, we still want to move all

00:52:06.316 --> 00:52:08.646 A:middle
of the individual attachment
points together the same way

00:52:08.646 --> 00:52:09.556 A:middle
that we thought we were doing.

00:52:10.296 --> 00:52:12.376 A:middle
The thing that we want to do
differently is that we want

00:52:12.376 --> 00:52:14.256 A:middle
to stretch the springs
at different amount.

00:52:14.786 --> 00:52:17.226 A:middle
And we want to stretch them
by an amount that varies based

00:52:17.226 --> 00:52:19.826 A:middle
on how far they are from the
user's finger on the screen.

00:52:20.436 --> 00:52:22.646 A:middle
The ones that are directly
under the finger should stay

00:52:22.646 --> 00:52:24.126 A:middle
under the finger
and track directly.

00:52:24.386 --> 00:52:26.496 A:middle
So we don't want to stretch
those springs really at all

00:52:26.496 --> 00:52:28.976 A:middle
because we don't want that to be
springy, we want it to follow.

00:52:29.526 --> 00:52:31.516 A:middle
And the farther away the
cell gets from the finger,

00:52:31.796 --> 00:52:33.706 A:middle
the more we want to
stretch out those springs.

00:52:33.706 --> 00:52:35.876 A:middle
So that's going to look
something more like this.

00:52:36.216 --> 00:52:38.056 A:middle
The user puts their
finger down on the screen

00:52:38.056 --> 00:52:40.436 A:middle
and starts scrolling,
the cell directly

00:52:40.436 --> 00:52:43.476 A:middle
under it has stayed directly
under it, they've bunched

00:52:43.476 --> 00:52:45.666 A:middle
up in the direction that
we're scrolling towards,

00:52:46.376 --> 00:52:48.596 A:middle
and spread out in the direction
that we've scrolled away from.

00:52:48.596 --> 00:52:52.336 A:middle
And if you look at our green
lines here representing the

00:52:52.336 --> 00:52:54.316 A:middle
spring lengths, you
can tell that the ones

00:52:54.316 --> 00:52:56.676 A:middle
that are farther away from the
finger had been stretched more

00:52:56.676 --> 00:52:57.866 A:middle
than the ones that
are right underneath.

00:52:58.396 --> 00:53:03.116 A:middle
If we let that go, then
they're individually going

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:52:58.396 --> 00:53:03.116 A:middle
If we let that go, then
they're individually going

00:53:03.116 --> 00:53:04.706 A:middle
to bounce at different speeds.

00:53:05.016 --> 00:53:06.786 A:middle
Each one's going to have
a slightly different feel

00:53:07.076 --> 00:53:08.286 A:middle
and it'll get that
kind of behavior

00:53:08.286 --> 00:53:09.186 A:middle
that we were looking for.

00:53:09.186 --> 00:53:11.926 A:middle
So if we do that, we
see different amounts

00:53:11.926 --> 00:53:14.496 A:middle
of stretching varying by how
far it is from the finger,

00:53:14.776 --> 00:53:17.046 A:middle
and we get that really nice
bouncing feel we were after.

00:53:17.456 --> 00:53:19.866 A:middle
So Eliza is going to modify our
demo now to get that effect.

00:53:20.516 --> 00:53:24.146 A:middle
[ Applause ]

00:53:24.646 --> 00:53:27.396 A:middle
>> All right, so we have a
ScrollView and that turns

00:53:27.396 --> 00:53:28.396 A:middle
out to be really convenient.

00:53:28.396 --> 00:53:30.626 A:middle
We want to figure out where
did the user put their finger

00:53:30.626 --> 00:53:33.716 A:middle
down so that we can stretch
the springs that are farther

00:53:33.926 --> 00:53:36.016 A:middle
from the finger more
than the springs

00:53:36.016 --> 00:53:36.996 A:middle
that are right under the finger.

00:53:37.806 --> 00:53:39.016 A:middle
So, we'll use the fact

00:53:39.236 --> 00:53:42.546 A:middle
that ScrollViews expose
their pan gesture recognizer

00:53:42.836 --> 00:53:47.456 A:middle
and pan gesture recognizers
expose the location of the touch

00:53:47.696 --> 00:53:49.026 A:middle
in whatever view you want.

00:53:49.446 --> 00:53:53.446 A:middle
So we'll simply say the touch
location is the ScrollView's pan

00:53:53.446 --> 00:53:56.256 A:middle
gesture recognizer's
location in the ScrollView.

00:53:56.786 --> 00:53:59.366 A:middle
So now we know where the
user has the touchdown

00:53:59.656 --> 00:54:03.666 A:middle
and we can take advantage of
that to figure out how far

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:53:59.656 --> 00:54:03.666 A:middle
and we can take advantage of
that to figure out how far

00:54:03.666 --> 00:54:06.816 A:middle
that touch location is from
each individual spring.

00:54:07.156 --> 00:54:10.646 A:middle
So, we'll grab the anchor point
of the spring that represents

00:54:11.176 --> 00:54:14.676 A:middle
that particular cell's
resting position.

00:54:15.896 --> 00:54:19.016 A:middle
And the distance from the
touch is just the difference

00:54:19.086 --> 00:54:20.396 A:middle
between the y-coordinate

00:54:20.396 --> 00:54:23.726 A:middle
of the touch location
and the anchor point.

00:54:23.926 --> 00:54:28.486 A:middle
Now we want to scale the amount

00:54:28.846 --> 00:54:32.526 A:middle
that we resist the
scrolling by that distance.

00:54:32.906 --> 00:54:36.666 A:middle
So I'm going to make a variable
here, scroll resistance,

00:54:37.106 --> 00:54:38.696 A:middle
and it's just going
to be a fraction

00:54:38.696 --> 00:54:39.846 A:middle
of the distance from the touch.

00:54:40.026 --> 00:54:41.536 A:middle
Now this is something
you can play around with.

00:54:41.756 --> 00:54:44.156 A:middle
Basically, the more scroll
resistance, the bouncier.

00:54:44.456 --> 00:54:47.666 A:middle
So if I have a lot of scroll
resistance on a particular cell,

00:54:47.876 --> 00:54:49.656 A:middle
then it's going to-- the
spring is going to stretch more

00:54:49.656 --> 00:54:51.036 A:middle
and it's going to bounce more.

00:54:51.336 --> 00:54:54.106 A:middle
And so you can play with
different denominators here.

00:54:54.106 --> 00:54:56.336 A:middle
This one gets us a fair
amount of bounciness.

00:54:57.776 --> 00:55:02.956 A:middle
So now, when we adjust
the center of the item,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:54:57.776 --> 00:55:02.956 A:middle
So now, when we adjust
the center of the item,

00:55:02.956 --> 00:55:05.176 A:middle
instead of just adding the
scroll delta, what we want

00:55:05.176 --> 00:55:07.856 A:middle
to do is add the
scroll delta times

00:55:07.856 --> 00:55:10.546 A:middle
that scroll resistance
fraction that we calculated.

00:55:10.746 --> 00:55:13.916 A:middle
So when we're at a cell that's
right under the user's finger,

00:55:14.096 --> 00:55:16.036 A:middle
the distance from the touch
is going to be pretty close

00:55:16.036 --> 00:55:17.866 A:middle
to zero, so the scroll
resistance--

00:55:18.236 --> 00:55:20.976 A:middle
rather, the amount that we're
changing the center will be

00:55:20.976 --> 00:55:21.856 A:middle
very small.

00:55:22.106 --> 00:55:24.786 A:middle
And when the touch is
very far from the finger,

00:55:24.786 --> 00:55:27.196 A:middle
we'll be changing
the center by more.

00:55:27.516 --> 00:55:29.316 A:middle
So now there's one sort of--

00:55:29.736 --> 00:55:33.086 A:middle
this isn't quite right as I've
written it because we never want

00:55:33.086 --> 00:55:36.426 A:middle
to change the center
of this item by more

00:55:36.426 --> 00:55:37.266 A:middle
than the scroll delta.

00:55:37.266 --> 00:55:41.226 A:middle
We always want to be basically
adjusting it by something

00:55:41.226 --> 00:55:44.506 A:middle
in between zero and the scroll
delta because if we changed it

00:55:44.506 --> 00:55:46.266 A:middle
by more than the scroll
delta, then instead

00:55:46.266 --> 00:55:48.846 A:middle
of just resisting scrolling,
it would actually be moving

00:55:48.846 --> 00:55:50.756 A:middle
in the opposite direction
from scrolling,

00:55:50.756 --> 00:55:52.186 A:middle
and that would be very strange.

00:55:52.536 --> 00:55:57.016 A:middle
So I'm going to, in
fact, have this at one.

00:55:57.806 --> 00:56:00.356 A:middle
So we want the minimum
of the scroll delta

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:55:57.806 --> 00:56:00.356 A:middle
So we want the minimum
of the scroll delta

00:56:00.356 --> 00:56:04.516 A:middle
and then the adjusted scroll
delta by the scroll resistance.

00:56:05.046 --> 00:56:06.546 A:middle
All right, so with
that in place,

00:56:06.696 --> 00:56:08.146 A:middle
we can go ahead and build this.

00:56:09.236 --> 00:56:12.446 A:middle
Now, if I grab this
cell here and I scroll,

00:56:13.166 --> 00:56:15.606 A:middle
it stays under my
finger, which is good.

00:56:16.266 --> 00:56:17.076 A:middle
And-- oops.

00:56:17.546 --> 00:56:21.346 A:middle
And the content bounces
around exactly as we hoped.

00:56:22.126 --> 00:56:24.556 A:middle
The stuff in the direction of
scrolling gets closer together

00:56:24.786 --> 00:56:29.556 A:middle
and the stuff farther from the
scrolling gets farther apart.

00:56:30.016 --> 00:56:31.986 A:middle
So that was the effect
that we wanted.

00:56:32.326 --> 00:56:33.706 A:middle
Before I turn it
back over to Josh,

00:56:33.706 --> 00:56:36.716 A:middle
because we have another minute
or so, let me just show you

00:56:36.716 --> 00:56:40.486 A:middle
where you would do this
tiling that I mentioned.

00:56:40.486 --> 00:56:42.676 A:middle
You don't want to load all
of these springs into memory

00:56:42.676 --> 00:56:45.946 A:middle
at the same time, most
likely, in real use case.

00:56:46.276 --> 00:56:49.096 A:middle
So here where I'm adding
behaviors to the spring,

00:56:49.306 --> 00:56:53.046 A:middle
what you could basically do is
add only the behaviors that are

00:56:53.046 --> 00:56:56.126 A:middle
in near what's visible on
the screen at a given time.

00:56:56.126 --> 00:56:57.396 A:middle
And if you want to look at--

00:56:57.456 --> 00:56:58.896 A:middle
look back at some of
our previous sessions,

00:56:58.896 --> 00:57:00.106 A:middle
we talked a lot about tiling.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:56:58.896 --> 00:57:00.106 A:middle
we talked a lot about tiling.

00:57:00.106 --> 00:57:02.626 A:middle
So this is a slightly weird
use of tiling where instead

00:57:02.626 --> 00:57:05.936 A:middle
of tiling views, you're
tiling springs, just this--

00:57:05.936 --> 00:57:08.806 A:middle
you're only making the
springs that you need in order

00:57:08.806 --> 00:57:10.776 A:middle
to control the content
that's pretty close

00:57:10.776 --> 00:57:11.596 A:middle
to what's on screen.

00:57:11.756 --> 00:57:13.036 A:middle
And you can do that by--

00:57:13.536 --> 00:57:16.196 A:middle
over here in the
UIDynamicAnimator header,

00:57:16.196 --> 00:57:19.006 A:middle
you can see that you can
both add and remove behaviors

00:57:19.116 --> 00:57:20.986 A:middle
from the dynamic animator.

00:57:20.986 --> 00:57:22.366 A:middle
So if you wanted to do this

00:57:22.366 --> 00:57:24.056 A:middle
in a slightly more
memory-conscious way,

00:57:24.306 --> 00:57:26.496 A:middle
that would be the place to look.

00:57:26.496 --> 00:57:28.886 A:middle
All right, so back over to Josh.

00:57:29.516 --> 00:57:34.716 A:middle
[ Applause ]

00:57:35.216 --> 00:57:38.506 A:middle
>> So not to point out bugs,
but some of you probably noticed

00:57:38.506 --> 00:57:39.686 A:middle
that when scrolling down,

00:57:39.686 --> 00:57:41.316 A:middle
there wasn't quite
the same bouncy effect

00:57:41.316 --> 00:57:42.316 A:middle
that we were hoping for there.

00:57:42.776 --> 00:57:45.886 A:middle
That is a result of us changing
the demo late last night,

00:57:46.036 --> 00:57:48.986 A:middle
and apparently not verifying
that we had done it correctly.

00:57:49.386 --> 00:57:52.226 A:middle
There's actually-- I have made
that exact same mistake myself

00:57:52.226 --> 00:57:54.826 A:middle
at my desk when looking
at this demo in the past.

00:57:55.076 --> 00:57:57.086 A:middle
There's actually an issue
where if you do the max

00:57:57.086 --> 00:57:58.086 A:middle
in that particular way,

00:57:58.686 --> 00:58:01.706 A:middle
you actually pick the value
that's always greater than zero

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:57:58.686 --> 00:58:01.706 A:middle
you actually pick the value
that's always greater than zero

00:58:01.706 --> 00:58:03.286 A:middle
and sometimes we
want to go negative.

00:58:03.736 --> 00:58:05.296 A:middle
So max isn't always
what we want.

00:58:05.336 --> 00:58:06.736 A:middle
Sometimes we actually
want to go min.

00:58:07.076 --> 00:58:10.386 A:middle
We could go back and fix that,
but maybe live debugging it

00:58:10.386 --> 00:58:12.006 A:middle
on stage isn't the
best plan right now.

00:58:12.186 --> 00:58:15.296 A:middle
[Inaudible Remark] You can
go and find our bug later.

00:58:15.796 --> 00:58:17.606 A:middle
>> It would've helped
if I built in run.

00:58:17.696 --> 00:58:22.016 A:middle
>> So over the past few
years, we've had quite a few

00:58:22.016 --> 00:58:23.446 A:middle
of these sessions, as
I mentioned earlier.

00:58:23.706 --> 00:58:26.086 A:middle
Since 2009, there's been
a UIScrollView session

00:58:26.086 --> 00:58:27.806 A:middle
and I wanted to give you
a real quick reference

00:58:27.806 --> 00:58:30.306 A:middle
of the different kinds of topics
we'd covered in that time.

00:58:31.686 --> 00:58:33.136 A:middle
So, I don't expect
that you're going

00:58:33.136 --> 00:58:34.326 A:middle
to read all these
right here right now,

00:58:34.746 --> 00:58:36.476 A:middle
but we've covered
a lot of stuff.

00:58:36.476 --> 00:58:39.726 A:middle
We've got photo browsing,
tiling, infinite scrolling.

00:58:40.276 --> 00:58:41.536 A:middle
We did a really interesting
thing

00:58:41.536 --> 00:58:44.316 A:middle
with OpenGL scrolling last year
so that you could figure out how

00:58:44.316 --> 00:58:47.926 A:middle
to use UIScrollViews within your
OpenGL games and applications.

00:58:48.336 --> 00:58:50.606 A:middle
I'd strongly encourage you,
if you're doing anything

00:58:50.606 --> 00:58:52.916 A:middle
with UIScrollView, to come
back and look through this list

00:58:53.306 --> 00:58:55.086 A:middle
and see if there's anything
that applies to the things

00:58:55.086 --> 00:58:57.556 A:middle
that you're trying to do and
go and, you know, go back

00:58:57.556 --> 00:59:00.696 A:middle
and watch some of these sessions
in the WWDC app that Jake has,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:58:57.556 --> 00:59:00.696 A:middle
and watch some of these sessions
in the WWDC app that Jake has,

00:59:00.696 --> 00:59:02.906 A:middle
you know, kindly given
us access to this year.

00:59:03.806 --> 00:59:05.566 A:middle
If you have more
questions about this stuff,

00:59:05.876 --> 00:59:08.136 A:middle
Jake Behrens is the UI
Frameworks Evangelist--

00:59:08.496 --> 00:59:10.966 A:middle
or sorry, the App
Frameworks Evangelist now.

00:59:11.156 --> 00:59:12.176 A:middle
Documentation, of course,

00:59:12.176 --> 00:59:14.006 A:middle
we've got the UIScrollView
Programming Guide

00:59:14.156 --> 00:59:16.176 A:middle
and the Apple Developer
Forums are a great place

00:59:16.176 --> 00:59:17.366 A:middle
to find out about this stuff.

00:59:17.586 --> 00:59:18.836 A:middle
You know, I'm on
there a lot and a lot

00:59:18.836 --> 00:59:19.986 A:middle
of other folks are as well.

00:59:19.986 --> 00:59:22.246 A:middle
There are some related sessions.

00:59:22.416 --> 00:59:24.726 A:middle
If you missed it, there's
the Building User Interfaces

00:59:24.726 --> 00:59:27.846 A:middle
with iOS 7 one that was on
Tuesday, and Getting Started

00:59:27.846 --> 00:59:29.486 A:middle
with Dynamics was
also on Tuesday.

00:59:29.896 --> 00:59:31.776 A:middle
Later today, there's
an Advanced Techniques

00:59:31.776 --> 00:59:35.406 A:middle
with UIKit Dynamics
actually right here at 3:15.

00:59:36.206 --> 00:59:37.706 A:middle
So thanks very much for coming

00:59:37.706 --> 00:59:39.396 A:middle
and please enjoy
the rest of WWDC.

00:59:40.016 --> 00:59:41.016 A:middle
[Applause]

00:59:41.016 --> 00:59:51.226 A:middle
[ Silence ]