201.srt

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

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

00:00:10.096 --> 00:00:10.856 A:middle
>> Good morning.

00:00:11.356 --> 00:00:18.916 A:middle
[ Applause ]

00:00:19.416 --> 00:00:21.526 A:middle
Thanks. Welcome to Building
User Interfaces for iOS 7.

00:00:22.866 --> 00:00:24.436 A:middle
My name is Jason Beaver
and I'm going to be joined

00:00:24.436 --> 00:00:26.626 A:middle
on stage a little bit
later by Andy Matuschak.

00:00:27.306 --> 00:00:29.966 A:middle
And we both work on UIKit.

00:00:29.966 --> 00:00:31.366 A:middle
And we're going to spend
most of the morning,

00:00:31.366 --> 00:00:33.606 A:middle
talking about the changes
we've made in UIKit

00:00:33.606 --> 00:00:35.466 A:middle
to support the new
user interface.

00:00:36.486 --> 00:00:38.706 A:middle
But before we do, I want
to take a moment to talk

00:00:38.706 --> 00:00:40.896 A:middle
about the design themes that
were mentioned yesterday.

00:00:41.706 --> 00:00:44.786 A:middle
Because the change that we've
made in UIKit were really driven

00:00:44.786 --> 00:00:45.886 A:middle
by these design themes.

00:00:47.386 --> 00:00:48.636 A:middle
The first of these is clarity.

00:00:49.206 --> 00:00:52.456 A:middle
Applications in iOS 7 should
be clear and easy to use,

00:00:53.006 --> 00:00:56.526 A:middle
should strip away the irrelevant
and unimportant information

00:00:56.846 --> 00:00:58.916 A:middle
and focus on what's really
important to the user.

00:00:58.916 --> 00:01:00.446 A:middle
And the design

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

00:00:58.916 --> 00:01:00.446 A:middle
And the design

00:01:00.446 --> 00:01:04.626 A:middle
of the application should make
it clear how user uses it.

00:01:07.236 --> 00:01:09.246 A:middle
The second is deference.

00:01:10.156 --> 00:01:12.476 A:middle
The application shouldn't
get in the way

00:01:12.956 --> 00:01:14.866 A:middle
of connecting the
user to their content.

00:01:15.406 --> 00:01:18.796 A:middle
In the Weather application,
for example,

00:01:19.936 --> 00:01:22.266 A:middle
we've removed the boarders
and other extraneous bits

00:01:22.266 --> 00:01:26.046 A:middle
of the user interface and put
what the user cares about most

00:01:26.046 --> 00:01:27.676 A:middle
which is the current conditions.

00:01:28.876 --> 00:01:31.296 A:middle
Filling screens edge to
edge, in fact, it even runs

00:01:31.336 --> 00:01:32.566 A:middle
up under the status bar.

00:01:32.566 --> 00:01:36.546 A:middle
And of course, it goes
way beyond Weather.

00:01:36.546 --> 00:01:38.506 A:middle
We've done this throughout
the user interface.

00:01:39.566 --> 00:01:41.736 A:middle
The user's content is what's
really important to them

00:01:42.156 --> 00:01:43.146 A:middle
and it should fill the screen.

00:01:43.726 --> 00:01:48.736 A:middle
And the third is depth.

00:01:48.936 --> 00:01:51.586 A:middle
Applications on iOS
7 make extensive use

00:01:51.586 --> 00:01:55.466 A:middle
of blurring transparent layers
as well as new mechanisms

00:01:55.466 --> 00:01:57.336 A:middle
like dynamics and motion effects

00:01:57.866 --> 00:01:59.886 A:middle
to create rich three-dimensional
experiences

00:01:59.886 --> 00:02:00.996 A:middle
that are really engaging.

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

00:01:59.886 --> 00:02:00.996 A:middle
that are really engaging.

00:02:01.606 --> 00:02:07.196 A:middle
So let's move on and talk about
the changes we've made in UIKit

00:02:07.536 --> 00:02:09.316 A:middle
in support of these
design themes.

00:02:10.006 --> 00:02:12.846 A:middle
And one of the biggest
is typography.

00:02:14.956 --> 00:02:18.066 A:middle
Beautiful typography
is at the core of many

00:02:18.066 --> 00:02:20.746 A:middle
of the design changes
across iOS.

00:02:21.666 --> 00:02:25.666 A:middle
And our type designers and our
human interface designers worked

00:02:25.706 --> 00:02:29.366 A:middle
closely with engineering to
define an entirely new approach

00:02:29.846 --> 00:02:32.696 A:middle
to user interface typography
called Dynamic Type.

00:02:36.396 --> 00:02:38.106 A:middle
And nothing has been
tried like this

00:02:38.106 --> 00:02:39.586 A:middle
in an operating system
before and it's going

00:02:39.586 --> 00:02:41.696 A:middle
to change the way we
build application.

00:02:42.796 --> 00:02:46.426 A:middle
Dynamic Type let's us
specify fonts semantically.

00:02:46.426 --> 00:02:51.706 A:middle
We no longer specify fonts
by phase and type size.

00:02:51.916 --> 00:02:56.506 A:middle
Users have control over the size
of text in their applications

00:02:57.046 --> 00:03:02.676 A:middle
and we've made extensive
changes in the fonts

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

00:02:57.046 --> 00:03:02.676 A:middle
and we've made extensive
changes in the fonts

00:03:03.206 --> 00:03:04.786 A:middle
to make them beautiful
and easy to read

00:03:04.786 --> 00:03:06.396 A:middle
at a wide variety of sizes.

00:03:07.646 --> 00:03:10.986 A:middle
And finally, it contains
built-in support for those

00:03:10.986 --> 00:03:12.126 A:middle
who have vision impairments.

00:03:12.126 --> 00:03:14.956 A:middle
So let's talk about
these changes.

00:03:17.116 --> 00:03:21.276 A:middle
Typically, in operating systems
and in all prior versions

00:03:21.276 --> 00:03:24.516 A:middle
of iOS, fonts are
simply scaled up or down.

00:03:25.356 --> 00:03:28.206 A:middle
And this means that a
font that is easy to read

00:03:28.206 --> 00:03:32.146 A:middle
at large size become-- can
become very thin and difficult

00:03:32.146 --> 00:03:33.486 A:middle
to read it at small size.

00:03:33.996 --> 00:03:37.176 A:middle
And conversely, a font
that is comfortable to read

00:03:37.176 --> 00:03:40.626 A:middle
at a small size can be overly
heavy and uncomfortable

00:03:40.626 --> 00:03:41.786 A:middle
to read at large sizes.

00:03:43.476 --> 00:03:46.386 A:middle
But we make size-specific
adjustments

00:03:46.756 --> 00:03:49.136 A:middle
to the character weight,
the character spacing

00:03:49.136 --> 00:03:52.226 A:middle
and the line spacing to result
in fonts that are beautiful

00:03:52.226 --> 00:03:54.316 A:middle
and easy to read at
wide variety of sizes.

00:03:54.816 --> 00:03:59.106 A:middle
On top of this, we're
introducing text styles.

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

00:04:00.576 --> 00:04:03.256 A:middle
Instead of specifying
specific fonts and sizes,

00:04:04.076 --> 00:04:05.526 A:middle
you specify fonts semantically.

00:04:05.526 --> 00:04:08.466 A:middle
And these are set of fonts
that our designers have chosen

00:04:08.466 --> 00:04:09.586 A:middle
that work really well together.

00:04:10.726 --> 00:04:12.726 A:middle
And you can access
the corresponding font

00:04:12.726 --> 00:04:16.156 A:middle
for these styles using
a new method on UIFont

00:04:16.826 --> 00:04:19.236 A:middle
to get the preferred font
for a particular text style.

00:04:22.456 --> 00:04:25.176 A:middle
The users want control
over the size of text

00:04:25.176 --> 00:04:26.126 A:middle
in their applications.

00:04:26.476 --> 00:04:29.716 A:middle
Some users with great eyesight
want maximum information density

00:04:29.716 --> 00:04:30.366 A:middle
on the screen.

00:04:31.366 --> 00:04:33.236 A:middle
And others, like myself,
are getting a little older

00:04:33.236 --> 00:04:35.956 A:middle
and want a little bit bigger
text to make it comfortable

00:04:35.956 --> 00:04:37.086 A:middle
to read, wants something larger.

00:04:37.646 --> 00:04:42.046 A:middle
And so it's not just one set of
sizes our designers have chosen.

00:04:43.186 --> 00:04:44.466 A:middle
They've chose an entire family.

00:04:45.046 --> 00:04:48.226 A:middle
And everyone of these fonts
contains those careful

00:04:48.226 --> 00:04:51.006 A:middle
adjustments with literarily
pixel level accuracy

00:04:51.006 --> 00:04:52.866 A:middle
on every single font
that was scrutinized.

00:04:52.866 --> 00:04:55.966 A:middle
So let's take a look
at an application

00:04:55.966 --> 00:04:57.426 A:middle
which is adapted Dynamic Type.

00:04:57.426 --> 00:04:59.796 A:middle
This is the Mail application

00:04:59.796 --> 00:05:01.336 A:middle
and on the left you
see the message list

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

00:04:59.796 --> 00:05:01.336 A:middle
and on the left you
see the message list

00:05:01.486 --> 00:05:02.876 A:middle
and on the right you
see the message body.

00:05:03.456 --> 00:05:06.056 A:middle
And this is at the smallest
size available to the user.

00:05:07.566 --> 00:05:09.416 A:middle
And as we step up
through the sizes,

00:05:10.066 --> 00:05:12.366 A:middle
notice that not only are
the fonts getting larger,

00:05:12.366 --> 00:05:14.666 A:middle
but the layout is changing.

00:05:15.876 --> 00:05:18.136 A:middle
The space between the
lines of text and the space

00:05:18.136 --> 00:05:20.976 A:middle
between the text and adjacent
UI element is all changing

00:05:20.976 --> 00:05:25.066 A:middle
to make this application
look beautiful even

00:05:25.066 --> 00:05:26.476 A:middle
at the largest font sizes.

00:05:28.686 --> 00:05:31.326 A:middle
And notice that even at
this very large size,

00:05:32.026 --> 00:05:33.686 A:middle
the text is thin and crisp.

00:05:34.186 --> 00:05:38.326 A:middle
But even this largest size
isn't large enough for someone

00:05:38.326 --> 00:05:39.406 A:middle
with the vision impairments.

00:05:40.216 --> 00:05:42.906 A:middle
And for those users, we've
added a mechanism to expand

00:05:42.906 --> 00:05:43.886 A:middle
to that range of sizes.

00:05:43.886 --> 00:05:48.206 A:middle
This has the effect
of increasing the size

00:05:48.206 --> 00:05:51.056 A:middle
of the body font
which is the font used

00:05:51.056 --> 00:05:53.296 A:middle
to display the most important
content to the users,

00:05:53.806 --> 00:05:56.816 A:middle
given them the ability
to access their content.

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

00:06:02.216 --> 00:06:04.836 A:middle
But not all users with the
vision impairments have a

00:06:04.836 --> 00:06:07.026 A:middle
problem with the size of a text.

00:06:07.616 --> 00:06:10.376 A:middle
For some of these users it
has to do with the contrast

00:06:10.376 --> 00:06:12.026 A:middle
between the text
and its background.

00:06:13.376 --> 00:06:16.846 A:middle
So we've added another mechanism
to enhance text legibility.

00:06:18.166 --> 00:06:20.686 A:middle
And this has the effect
of increasing the weights

00:06:20.686 --> 00:06:23.356 A:middle
of the font used
across this entire grid.

00:06:26.676 --> 00:06:28.566 A:middle
For most users, the
default fonts

00:06:28.566 --> 00:06:31.726 A:middle
that our designers have
chosen work really well

00:06:31.726 --> 00:06:33.866 A:middle
and are beautiful
on retina displays.

00:06:35.036 --> 00:06:38.546 A:middle
Before those users that have
those contrast vision issues,

00:06:39.506 --> 00:06:40.236 A:middle
hopefully, you can see

00:06:40.236 --> 00:06:43.996 A:middle
on the screen how enhancing the
weight really does increase the

00:06:43.996 --> 00:06:45.756 A:middle
contrast and make this content

00:06:45.756 --> 00:06:47.026 A:middle
that makes more accessible
to the user.

00:06:47.606 --> 00:06:53.586 A:middle
So in addition to these eight
styles there are wide ranges

00:06:53.586 --> 00:06:54.956 A:middle
of variance that you can use.

00:06:56.306 --> 00:07:00.606 A:middle
From Bold and Italic variance,
to variance that have looser

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

00:06:56.306 --> 00:07:00.606 A:middle
From Bold and Italic variance,
to variance that have looser

00:07:00.606 --> 00:07:03.336 A:middle
or tighter line letting as well
as the wide variety of others.

00:07:03.336 --> 00:07:06.216 A:middle
So you've actually have an
enormous spectrum of fonts

00:07:06.216 --> 00:07:09.526 A:middle
to use to design your
application, and everyone

00:07:09.526 --> 00:07:12.816 A:middle
of those contains those
specific size adjustments

00:07:12.816 --> 00:07:14.546 A:middle
and accessibility enhancements.

00:07:16.576 --> 00:07:22.776 A:middle
So Dynamic Type includes
the text styles,

00:07:23.606 --> 00:07:27.046 A:middle
it includes user settable
sizes including enhance

00:07:27.046 --> 00:07:28.416 A:middle
to accessibility sizes

00:07:28.906 --> 00:07:33.456 A:middle
and it contains these
legibility enhancements.

00:07:33.956 --> 00:07:39.156 A:middle
And so, by simply changing
the way you specify your

00:07:39.156 --> 00:07:43.806 A:middle
application, from specifying
specific fonts, specific sizes,

00:07:44.036 --> 00:07:47.736 A:middle
to using text styles and letting
the system pick the font for you

00:07:47.986 --> 00:07:49.506 A:middle
and adjusting your
layout appropriately,

00:07:50.066 --> 00:07:53.406 A:middle
and adapting this
single new method,

00:07:53.896 --> 00:07:56.776 A:middle
you get all of these features
and users benefit from this.

00:07:56.776 --> 00:08:02.666 A:middle
So let's talk about
Letterpress for a second.

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

00:07:56.776 --> 00:08:02.666 A:middle
So let's talk about
Letterpress for a second.

00:08:04.126 --> 00:08:06.796 A:middle
Letterpress is a form of
relief printing where text

00:08:06.796 --> 00:08:08.536 A:middle
and graphics are
pressed into the paper

00:08:08.866 --> 00:08:11.076 A:middle
and it deforms the paper
creating the highlights

00:08:11.076 --> 00:08:15.166 A:middle
and shadows which creates
a real sense of depth.

00:08:16.386 --> 00:08:18.956 A:middle
And we use this to
ourselves in the notes,

00:08:18.956 --> 00:08:20.476 A:middle
in reminders applications
and we want

00:08:20.476 --> 00:08:21.756 A:middle
to make it available to you.

00:08:22.386 --> 00:08:27.216 A:middle
So you can see there're this
complex shadows and highlights.

00:08:27.216 --> 00:08:29.986 A:middle
And if you compare this to
a piece of printed text,

00:08:30.386 --> 00:08:32.006 A:middle
you can really see
how they compare.

00:08:32.006 --> 00:08:35.405 A:middle
Now this have an incredibly
complex graphical effect

00:08:35.405 --> 00:08:37.535 A:middle
but it's trivial for you to
turn on in your application.

00:08:38.496 --> 00:08:40.106 A:middle
You set a single
additional attribute

00:08:40.106 --> 00:08:42.726 A:middle
on your attributed string
and now anywhere in your UI

00:08:42.726 --> 00:08:43.775 A:middle
that you're displaying text,

00:08:43.775 --> 00:08:46.046 A:middle
you can now display
Letterpress text.

00:08:46.046 --> 00:08:46.113 A:middle
[ Applause ]

00:08:46.113 --> 00:08:57.426 A:middle
So part of beautiful typography
is kerning and ligatures.

00:08:58.266 --> 00:08:59.396 A:middle
And we've turned on kerning

00:08:59.396 --> 00:09:01.776 A:middle
and ligatures everywhere
in the OS and iOS 7.

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

00:08:59.396 --> 00:09:01.776 A:middle
and ligatures everywhere
in the OS and iOS 7.

00:09:03.046 --> 00:09:06.096 A:middle
And so text which rendered like
this in prior version of iOS,

00:09:06.606 --> 00:09:08.146 A:middle
now renders properly kerned.

00:09:08.686 --> 00:09:12.676 A:middle
And text like the word "shuffle"
here when rendered in a font

00:09:12.676 --> 00:09:15.426 A:middle
that contents ffl ligature will
automatically take advantage

00:09:15.426 --> 00:09:16.026 A:middle
of that ligature.

00:09:16.566 --> 00:09:20.426 A:middle
But it goes way beyond
simple kerning and ligatures.

00:09:21.136 --> 00:09:23.816 A:middle
In iOS 7, we've opened
the entire spectrum

00:09:23.816 --> 00:09:26.256 A:middle
of advance typographical
features to you--

00:09:26.256 --> 00:09:27.926 A:middle
for you use to use
in your applications

00:09:28.256 --> 00:09:29.556 A:middle
from ornamental ligatures

00:09:29.556 --> 00:09:31.886 A:middle
to advance rendering
effects like text etching.

00:09:32.386 --> 00:09:38.496 A:middle
[ Pause ]

00:09:38.996 --> 00:09:42.826 A:middle
I've been excited to talk about
this next topic for a long time.

00:09:43.596 --> 00:09:46.396 A:middle
We've been working on this
technology for nearly two years

00:09:47.346 --> 00:09:49.126 A:middle
and it's at the heart of all

00:09:49.126 --> 00:09:50.846 A:middle
of the advance typographic
features we see

00:09:50.846 --> 00:09:55.196 A:middle
in iOS 7, and that's Textkit.

00:09:55.196 --> 00:09:57.926 A:middle
Textkit is a modern
object-oriented,

00:09:58.146 --> 00:10:03.276 A:middle
high level text API that's
built on top of Core Text.

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

00:09:58.146 --> 00:10:03.276 A:middle
high level text API that's
built on top of Core Text.

00:10:03.686 --> 00:10:08.816 A:middle
And we've rewritten all of our
text related controls in UIKit

00:10:08.896 --> 00:10:10.976 A:middle
to take advantage of
the power of Textkit.

00:10:11.516 --> 00:10:16.536 A:middle
It gives you complete control
over the layout and rendering

00:10:16.536 --> 00:10:18.226 A:middle
of text and other
related components.

00:10:18.496 --> 00:10:20.586 A:middle
And it works great for
simple runs of texts

00:10:20.586 --> 00:10:23.166 A:middle
like this all they way
through advanced page layout

00:10:23.166 --> 00:10:27.436 A:middle
functionality including multiple
text regions, imbedded content

00:10:27.786 --> 00:10:29.736 A:middle
and either wrapping text
around arbitrary shapes

00:10:29.736 --> 00:10:31.496 A:middle
like the flowers you
see in the left corner.

00:10:33.276 --> 00:10:36.806 A:middle
TexKit is powerful and easy
enough to do all these things

00:10:37.986 --> 00:10:41.376 A:middle
and it's one to two
orders of magnitude easier

00:10:41.666 --> 00:10:43.656 A:middle
than doing the same
things in Core Text.

00:10:44.156 --> 00:10:51.106 A:middle
[ Applause ]

00:10:51.606 --> 00:10:53.176 A:middle
So there's a lot
here in Textkit.

00:10:53.986 --> 00:10:56.836 A:middle
And because of the increased
emphasis on typography in iOS 7,

00:10:56.836 --> 00:11:00.506 A:middle
I encourage you all to make
it to these sessions and find

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

00:10:56.836 --> 00:11:00.506 A:middle
I encourage you all to make
it to these sessions and find

00:11:00.506 --> 00:11:01.696 A:middle
out about Textkit and find

00:11:01.696 --> 00:11:03.836 A:middle
out how you can use this
powerful new framework

00:11:04.476 --> 00:11:05.486 A:middle
in your applications.

00:11:06.006 --> 00:11:07.936 A:middle
And with that I'd like
to turn it over to Andy,

00:11:07.936 --> 00:11:10.356 A:middle
who's going to take us through
a few more changes in UIKit.

00:11:10.356 --> 00:11:11.506 A:middle
[ Applause ]

00:11:11.506 --> 00:11:15.176 A:middle
>> Thanks Jason.

00:11:16.886 --> 00:11:20.296 A:middle
You know, text is so important
to us, and we've spent

00:11:20.586 --> 00:11:23.206 A:middle
so much time making
it better on iOS.

00:11:23.716 --> 00:11:24.896 A:middle
Not just because
of the aesthetics--

00:11:24.896 --> 00:11:25.906 A:middle
we think they're
really beautiful--

00:11:26.276 --> 00:11:28.496 A:middle
but also because
of the function.

00:11:28.996 --> 00:11:32.006 A:middle
You know, one of those principle
design themes that we considered

00:11:32.006 --> 00:11:35.336 A:middle
when designing iOS 7
was that of deference--

00:11:35.986 --> 00:11:37.486 A:middle
that the content comes first--

00:11:38.456 --> 00:11:41.686 A:middle
and the ornamentation and the
chrome of the system needs

00:11:41.686 --> 00:11:43.986 A:middle
to get out of the way
and exalt that content.

00:11:45.456 --> 00:11:49.176 A:middle
So looking now at Mail,
you notice a few things.

00:11:50.366 --> 00:11:53.386 A:middle
One, we've expanded those
photos horizontally all the way

00:11:53.386 --> 00:11:54.356 A:middle
to the edge of the screen.

00:11:55.116 --> 00:11:56.886 A:middle
But we haven't just
expanded them horizontally:

00:11:57.726 --> 00:12:02.026 A:middle
we've also expanded the main
scrolling text view vertically

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

00:11:57.726 --> 00:12:02.026 A:middle
we've also expanded the main
scrolling text view vertically

00:12:02.296 --> 00:12:05.466 A:middle
underneath the bars at the top
and the bottom of the screen.

00:12:06.006 --> 00:12:08.016 A:middle
You'll see the-- the
boy's purple shirt

00:12:08.856 --> 00:12:11.656 A:middle
and red pants scroll
underneath those bars.

00:12:11.916 --> 00:12:13.276 A:middle
That gives you a
sense of context,

00:12:14.066 --> 00:12:15.696 A:middle
and it also gives
a little more space

00:12:16.036 --> 00:12:17.756 A:middle
for the content to ring through.

00:12:19.416 --> 00:12:23.256 A:middle
So, we're actually doing this
on navigation bars, toolbars,

00:12:23.386 --> 00:12:26.466 A:middle
tab bars, all throughout our
operating system, not just Mail.

00:12:27.176 --> 00:12:30.296 A:middle
And so there are some things
you need to know about changes

00:12:30.536 --> 00:12:33.946 A:middle
in the View Controller
system and elsewhere in UIKit

00:12:34.536 --> 00:12:37.246 A:middle
that make all of this full
screen concept possible.

00:12:39.036 --> 00:12:41.886 A:middle
Now, obviously, one of the
first changes is just layout.

00:12:42.566 --> 00:12:45.986 A:middle
You'll see first
that we're not trying

00:12:45.986 --> 00:12:47.656 A:middle
to avoid those bars anymore.

00:12:48.966 --> 00:12:52.486 A:middle
We're now putting the geometry
of your View Controller's views

00:12:52.486 --> 00:12:55.396 A:middle
and your modally presented View
Controller's views all the way

00:12:55.396 --> 00:12:57.156 A:middle
up underneath the
navigation bar,

00:12:57.156 --> 00:12:59.956 A:middle
underneath the status
bar by default.

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

00:13:00.486 --> 00:13:03.776 A:middle
And those bars, yes,
they're transparent,

00:13:04.506 --> 00:13:06.756 A:middle
but they're not just
transparent in the way

00:13:06.756 --> 00:13:09.706 A:middle
that iOS 6's transparent
bars can be configured.

00:13:10.086 --> 00:13:10.986 A:middle
They're actually blurred.

00:13:12.016 --> 00:13:13.476 A:middle
And they're not even
just blurred

00:13:14.106 --> 00:13:16.076 A:middle
when there's a photo
behind them for instance.

00:13:16.476 --> 00:13:19.966 A:middle
We up the saturation of that
photo and we adjust the levels

00:13:19.966 --> 00:13:21.656 A:middle
to really make those colors pop.

00:13:22.496 --> 00:13:24.666 A:middle
And when there's text
behind those bars,

00:13:25.156 --> 00:13:27.656 A:middle
we increase the opacity
of the bars so that

00:13:27.656 --> 00:13:30.806 A:middle
that text doesn't
interfere with what's on top.

00:13:32.656 --> 00:13:36.006 A:middle
The status bar has
changed as well.

00:13:36.826 --> 00:13:39.266 A:middle
And in fact, it no longer
has a background of any kind.

00:13:39.916 --> 00:13:42.726 A:middle
What you're seeing there is
actually the navigation bar

00:13:43.086 --> 00:13:45.546 A:middle
extending up and
under the status bar.

00:13:46.956 --> 00:13:49.316 A:middle
And so, if you had a design
without a navigation bar,

00:13:49.316 --> 00:13:50.806 A:middle
you would have to make
sure that the content

00:13:50.806 --> 00:13:51.666 A:middle
that appears underneath

00:13:51.726 --> 00:13:53.756 A:middle
that status bar is
appropriate for you.

00:13:54.936 --> 00:13:58.856 A:middle
Now, when we scroll all they way
to the top of this Mail Message,

00:13:59.946 --> 00:14:01.706 A:middle
we want to make sure
that the header

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

00:13:59.946 --> 00:14:01.706 A:middle
we want to make sure
that the header

00:14:01.706 --> 00:14:05.196 A:middle
of the Mail Message still
appears below the navigation

00:14:05.196 --> 00:14:09.646 A:middle
bar, and we do this by default
in iOS 7 by automatically

00:14:09.726 --> 00:14:12.236 A:middle
and aggressively
adjusting the content insets

00:14:12.746 --> 00:14:14.506 A:middle
of your View Controller's
content views

00:14:14.506 --> 00:14:17.676 A:middle
if there are scroll views,
just to make sure that all

00:14:17.676 --> 00:14:19.526 A:middle
that content will be
visible for the user.

00:14:19.526 --> 00:14:24.246 A:middle
Now, let's take a look at
another user interface.

00:14:25.086 --> 00:14:26.876 A:middle
This is Game Center on iOS 7.

00:14:28.296 --> 00:14:31.126 A:middle
In Game Center, this content
is actually not scrollable.

00:14:31.786 --> 00:14:36.506 A:middle
And that's okay, but it might
mean that it's a little awkward

00:14:37.346 --> 00:14:39.836 A:middle
to specify this UI, which
is really appearing inside

00:14:39.836 --> 00:14:42.746 A:middle
of this gold box, with
respect to the full screen.

00:14:43.256 --> 00:14:46.556 A:middle
You might like to specify
it as you did on iOS 6.

00:14:47.046 --> 00:14:50.866 A:middle
And so there is API to
permit that kind of design.

00:14:51.806 --> 00:14:55.446 A:middle
New on UIViewController, we have
a property called Extended Edges

00:14:55.626 --> 00:15:00.226 A:middle
for Layout, which describes
the edges of the screen along

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

00:14:55.626 --> 00:15:00.226 A:middle
for Layout, which describes
the edges of the screen along

00:15:00.226 --> 00:15:01.796 A:middle
which we're going
to extend the layout

00:15:02.436 --> 00:15:03.896 A:middle
of your View Controller's views.

00:15:04.906 --> 00:15:07.216 A:middle
So by default, it's All because
we're extending them everywhere.

00:15:08.266 --> 00:15:09.756 A:middle
We want your views
to be full screen.

00:15:10.756 --> 00:15:12.836 A:middle
But if you'd like, you can
specify None, for instance,

00:15:13.156 --> 00:15:15.616 A:middle
which would put your views
pretty much as they looked

00:15:15.616 --> 00:15:19.426 A:middle
in iOS 6, trying to
avoid the bars at the top

00:15:19.426 --> 00:15:22.636 A:middle
of the bottom of the screen.

00:15:22.796 --> 00:15:25.196 A:middle
There's another layout issue
that you need to be aware of

00:15:25.726 --> 00:15:28.616 A:middle
and it looks a little bit
like here in the photos.

00:15:28.686 --> 00:15:30.686 A:middle
Now, if you look
at this HDR icon,

00:15:32.076 --> 00:15:35.736 A:middle
it's positioned just a couple of
points below the Navigation Bar.

00:15:36.316 --> 00:15:39.846 A:middle
But of course, the Navigation
Bar is a different height

00:15:40.566 --> 00:15:42.466 A:middle
in portrait and in landscape.

00:15:43.786 --> 00:15:47.716 A:middle
So the origin of that
HDR icon is different

00:15:47.716 --> 00:15:48.636 A:middle
in each orientation.

00:15:48.636 --> 00:15:51.276 A:middle
And we need a good
way to specify that,

00:15:51.796 --> 00:15:53.196 A:middle
hopefully as simply as possible,

00:15:53.196 --> 00:15:54.766 A:middle
and we've introduced
that with iOS 7.

00:15:55.096 --> 00:15:57.446 A:middle
View controllers now
have a top layout guide

00:15:57.446 --> 00:16:01.466 A:middle
and a bottom layout guide that
describe where those features

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

00:15:57.446 --> 00:16:01.466 A:middle
and a bottom layout guide that
describe where those features

00:16:01.466 --> 00:16:02.806 A:middle
at the top and bottom
of the screen

00:16:02.996 --> 00:16:04.656 A:middle
that might overlap
your content are.

00:16:05.756 --> 00:16:07.606 A:middle
And even better, you can
actually now use them

00:16:07.606 --> 00:16:08.306 A:middle
with Auto Layout.

00:16:08.576 --> 00:16:11.496 A:middle
So a single constraint
like this one would keep

00:16:11.496 --> 00:16:15.606 A:middle
that HDR icon three points
below that navigation bar.

00:16:16.446 --> 00:16:18.196 A:middle
And when you rotate from
portrait to landscape,

00:16:18.196 --> 00:16:20.296 A:middle
it would get automatically
adjusted for you.

00:16:20.946 --> 00:16:24.876 A:middle
So as I said, the status
bar styles have changed

00:16:25.476 --> 00:16:27.616 A:middle
and they don't have
a background.

00:16:28.056 --> 00:16:29.276 A:middle
They have dark content
by default.

00:16:30.176 --> 00:16:33.236 A:middle
And so what that means is that
if you're putting dark content

00:16:33.416 --> 00:16:34.986 A:middle
in your views behind
the status bar,

00:16:35.316 --> 00:16:37.956 A:middle
you probably want a light status
bar foreground, and we've made

00:16:37.956 --> 00:16:42.296 A:middle
that available to
you via this new API.

00:16:42.296 --> 00:16:47.066 A:middle
These other two APIs describe
the nature of the background

00:16:47.436 --> 00:16:49.946 A:middle
of the status bar, so they've
been deprecated in iOS 7.

00:16:50.486 --> 00:16:53.576 A:middle
And if you specify them, you'll
get the light content style.

00:16:54.266 --> 00:16:59.296 A:middle
Now, because in iOS
7, it is so important

00:16:59.736 --> 00:17:02.266 A:middle
to specify the correct
style and visibility

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

00:16:59.736 --> 00:17:02.266 A:middle
to specify the correct
style and visibility

00:17:02.266 --> 00:17:04.036 A:middle
for the status bar
due to the fact

00:17:04.036 --> 00:17:05.116 A:middle
that it doesn't have
a background,

00:17:05.896 --> 00:17:07.425 A:middle
we've made that a
little easier for you.

00:17:08.425 --> 00:17:11.256 A:middle
Rather than having to
manually manage the disposition

00:17:11.256 --> 00:17:14.486 A:middle
of the status bar across
the various UI screens

00:17:14.486 --> 00:17:18.336 A:middle
of your application, you can now
specify the styles declaratively

00:17:19.236 --> 00:17:21.506 A:middle
by using these properties
on UIViewController.

00:17:21.945 --> 00:17:24.715 A:middle
In that way, as View Controllers
are pushed and popped

00:17:25.185 --> 00:17:28.215 A:middle
or switched between on tab
controllers, modally presented

00:17:28.386 --> 00:17:31.976 A:middle
and dismissed, UIKit will
automatically manage the status

00:17:31.976 --> 00:17:32.576 A:middle
bar for you.

00:17:33.206 --> 00:17:37.616 A:middle
Now, this is a pretty big change
in behavior, so it's controlled

00:17:37.616 --> 00:17:39.066 A:middle
by a switch in the
info key list.

00:17:40.306 --> 00:17:41.596 A:middle
It's off by default in Seed I.

00:17:42.116 --> 00:17:44.866 A:middle
So if you'd like to experiment
with this API, just go ahead

00:17:44.866 --> 00:17:47.146 A:middle
and set that key to YES
because we're going to turn it

00:17:47.216 --> 00:17:48.626 A:middle
on by default in future seeds.

00:17:49.346 --> 00:17:52.596 A:middle
Now, we're going to
leave it there so that

00:17:53.816 --> 00:17:55.946 A:middle
if you have a legacy code
base which does a lot

00:17:55.946 --> 00:17:59.876 A:middle
of manual status bar management,
you can keep that code around

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

00:18:00.086 --> 00:18:02.116 A:middle
and just set this key to
NO to get the old behavior.

00:18:02.726 --> 00:18:06.966 A:middle
So that's full screen content.

00:18:08.116 --> 00:18:13.356 A:middle
But when it comes to content,
it's not just about giving it

00:18:13.356 --> 00:18:14.406 A:middle
as much space as possible.

00:18:15.486 --> 00:18:16.816 A:middle
It's also about making sure

00:18:16.816 --> 00:18:20.566 A:middle
that the user can quickly access
the part that they want to get

00:18:20.656 --> 00:18:23.896 A:middle
to and quickly perform
the actions that they want

00:18:23.896 --> 00:18:26.386 A:middle
to perform within
that application.

00:18:27.006 --> 00:18:32.216 A:middle
So we've sought to add that kind
of functionality in a number

00:18:32.216 --> 00:18:33.826 A:middle
of places throughout
the operating system,

00:18:34.286 --> 00:18:36.126 A:middle
and I'd like to talk about
one of those places now.

00:18:37.106 --> 00:18:40.396 A:middle
So here's Mail again, and note
that we can move our finger

00:18:40.716 --> 00:18:43.386 A:middle
from the edge of the screen
inwards to navigate backward.

00:18:43.386 --> 00:18:46.976 A:middle
And the navigation
controller tracks interactively

00:18:46.976 --> 00:18:47.626 A:middle
that transition.

00:18:47.626 --> 00:18:52.616 A:middle
There's a piece of API that
allows you to get access

00:18:53.136 --> 00:18:54.336 A:middle
to that gesture recognizer.

00:18:54.816 --> 00:18:58.226 A:middle
So if you need to temporarily
disable it or if you need

00:18:58.226 --> 00:18:59.896 A:middle
to specify for instance that one

00:18:59.896 --> 00:19:02.886 A:middle
of your gesture recognizers
should recognize simultaneously

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

00:18:59.896 --> 00:19:02.886 A:middle
of your gesture recognizers
should recognize simultaneously

00:19:03.306 --> 00:19:06.756 A:middle
with this interactive pop, you
can do that using this API.

00:19:07.796 --> 00:19:12.216 A:middle
But we're really excited about
what this gesture portends,

00:19:13.106 --> 00:19:16.316 A:middle
not just because it lets us
easily navigate backwards

00:19:16.616 --> 00:19:18.516 A:middle
in navigation stacks.

00:19:19.156 --> 00:19:22.866 A:middle
The transitions throughout all

00:19:22.866 --> 00:19:26.216 A:middle
of iOS 7 have been made
a great deal more fluid.

00:19:27.306 --> 00:19:28.956 A:middle
And so, you'll see
here in Calendar

00:19:29.816 --> 00:19:32.916 A:middle
that as we start tapping
from year, to month,

00:19:33.796 --> 00:19:37.476 A:middle
to day that we're zooming
on this infinite plane,

00:19:38.026 --> 00:19:41.746 A:middle
and that's communicating
something about the nature

00:19:41.746 --> 00:19:44.056 A:middle
of the information
in this application.

00:19:45.236 --> 00:19:48.876 A:middle
It's not just laid out in a
series of horizontal screens.

00:19:49.946 --> 00:19:51.876 A:middle
We're moving through
it in a new way.

00:19:53.216 --> 00:19:55.096 A:middle
It also gives the Calendar
app some personality.

00:19:56.216 --> 00:19:58.066 A:middle
So this technique is
very exciting to us.

00:19:58.946 --> 00:20:00.896 A:middle
And we're actually going
to provide it to all of you

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

00:19:58.946 --> 00:20:00.896 A:middle
And we're actually going
to provide it to all of you

00:20:01.306 --> 00:20:03.826 A:middle
in the form of a new
UIViewController API

00:20:04.406 --> 00:20:07.086 A:middle
that allows you to
specify custom animated

00:20:07.356 --> 00:20:09.836 A:middle
and interactive transitions
for your View Controllers.

00:20:09.836 --> 00:20:15.436 A:middle
We're using it in a number of
places throughout the system,

00:20:15.836 --> 00:20:17.216 A:middle
and I'd like to show
you this one

00:20:17.606 --> 00:20:21.686 A:middle
because this is a Collection
View, and we've made this kind

00:20:21.686 --> 00:20:23.766 A:middle
of transition even easier.

00:20:24.436 --> 00:20:28.856 A:middle
So here's Photos, and we'll zoom
in from years, to collections,

00:20:29.626 --> 00:20:31.086 A:middle
to moments, to a single photo.

00:20:31.896 --> 00:20:34.546 A:middle
Note that we get this new
spatial representation

00:20:34.896 --> 00:20:36.916 A:middle
of the information, and
we'll zoom all the way back

00:20:36.916 --> 00:20:39.906 A:middle
out to SpringBoard, and you see

00:20:39.906 --> 00:20:43.036 A:middle
that concept is reinforced
throughout the system.

00:20:43.606 --> 00:20:47.346 A:middle
So we've made it really easy
for you to implement these kinds

00:20:47.346 --> 00:20:51.196 A:middle
of transitions, if you're using
UICollectionView in iOS 7.

00:20:51.526 --> 00:20:53.756 A:middle
And I'd like to briefly describe
how that works to you now.

00:20:54.736 --> 00:20:56.796 A:middle
So to make it easy
we're just going

00:20:56.796 --> 00:20:59.286 A:middle
to consider the top two levels
of that navigation stack,

00:20:59.856 --> 00:21:03.146 A:middle
the year's user interface, and
the collection's user interface.

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

00:20:59.856 --> 00:21:03.146 A:middle
the year's user interface, and
the collection's user interface.

00:21:04.386 --> 00:21:06.526 A:middle
And I just want to run
through how you'd go

00:21:06.526 --> 00:21:07.336 A:middle
about implementing them.

00:21:07.396 --> 00:21:11.456 A:middle
Now you would start with perhaps
a Collection View flow layout

00:21:11.926 --> 00:21:13.786 A:middle
that you've customized
to make your layout,

00:21:13.786 --> 00:21:16.916 A:middle
and that would describe the
geometry of that user interface,

00:21:16.916 --> 00:21:19.266 A:middle
and then you'd make a
Collection View Controller

00:21:19.466 --> 00:21:21.566 A:middle
with that layout, and the
Collection View controller would

00:21:21.566 --> 00:21:23.136 A:middle
manage the Collection
View as you see here.

00:21:24.606 --> 00:21:28.756 A:middle
Now, this is going to be a
hierarchy, so you would push

00:21:28.756 --> 00:21:31.806 A:middle
that Collection View Controller
onto a navigation stack.

00:21:33.516 --> 00:21:36.706 A:middle
Turning our attention now
to the "collections" view,

00:21:37.636 --> 00:21:39.216 A:middle
we would similarly
create a layout for it

00:21:39.216 --> 00:21:41.706 A:middle
and make a Collection
View Controller for that.

00:21:42.926 --> 00:21:46.076 A:middle
But before we push it on, we're
going to use this new piece

00:21:46.076 --> 00:21:49.756 A:middle
of API, usesLayoutToLayout
NavigationTransitions.

00:21:50.826 --> 00:21:52.256 A:middle
And when we set that to YES

00:21:52.476 --> 00:21:55.336 A:middle
on the second Collection
View Controller and push it

00:21:55.336 --> 00:21:56.506 A:middle
on the navigation stack,

00:21:57.336 --> 00:21:59.456 A:middle
behind the scenes UIKit
is actually going to use

00:21:59.456 --> 00:22:02.806 A:middle
that same Collection View
for both View Controllers.

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

00:21:59.456 --> 00:22:02.806 A:middle
that same Collection View
for both View Controllers.

00:22:03.796 --> 00:22:05.676 A:middle
And it's going to
animate the transition

00:22:06.216 --> 00:22:07.836 A:middle
between the CollectionV
iew layouts

00:22:07.836 --> 00:22:11.076 A:middle
at each level alongside
the navigation transition.

00:22:12.216 --> 00:22:15.176 A:middle
And in fact, if the user scrubs
their finger along the side

00:22:15.176 --> 00:22:16.766 A:middle
of the screen like I was
showing you with Mail,

00:22:17.016 --> 00:22:18.836 A:middle
we'll actually scrub
through the transition

00:22:18.836 --> 00:22:19.656 A:middle
between those layouts.

00:22:20.296 --> 00:22:22.766 A:middle
And you can even define your own
interactions which drive those

00:22:22.766 --> 00:22:23.786 A:middle
like a pinch for instance.

00:22:24.836 --> 00:22:28.556 A:middle
So we're really excited about
what you can do with these kinds

00:22:28.556 --> 00:22:30.586 A:middle
of custom animated transitions

00:22:30.586 --> 00:22:32.276 A:middle
and the custom interactions
that drive them.

00:22:33.026 --> 00:22:36.446 A:middle
We're using them throughout
iOS in order to communicate

00:22:36.446 --> 00:22:39.006 A:middle
where information is in the
applications and in order

00:22:39.006 --> 00:22:40.926 A:middle
to give our applications
a personality.

00:22:40.926 --> 00:22:43.326 A:middle
So we have a whole talk
that goes into more detail

00:22:43.646 --> 00:22:48.526 A:middle
of how all this stuff works, and
I encourage you to check it out.

00:22:48.806 --> 00:22:52.226 A:middle
Now, another way we're
communicating in iOS 7 is

00:22:52.296 --> 00:22:53.166 A:middle
through the use of color.

00:22:53.876 --> 00:22:58.206 A:middle
We stripped out a lot of
ornamentation in this interface.

00:22:58.886 --> 00:23:03.136 A:middle
But in order to make sure
that things are still clear,

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

00:22:58.886 --> 00:23:03.136 A:middle
But in order to make sure
that things are still clear,

00:23:04.636 --> 00:23:09.166 A:middle
we're using color to signify
interactivity and selection.

00:23:09.996 --> 00:23:13.376 A:middle
So you'll see for instance
that those buttons on the top

00:23:13.376 --> 00:23:16.766 A:middle
and bottom bars are red, whereas
the rest of the content is black

00:23:16.766 --> 00:23:20.186 A:middle
and white, except of course for
that 11 which is the day's date.

00:23:21.276 --> 00:23:23.476 A:middle
So it quickly draws the
user's eye to those things.

00:23:23.476 --> 00:23:28.636 A:middle
And that red also creates a
nice theme for the Calendar app.

00:23:29.026 --> 00:23:29.746 A:middle
It's cohesive.

00:23:30.126 --> 00:23:31.196 A:middle
And as we look at Notes,

00:23:31.466 --> 00:23:33.246 A:middle
you'll see that we're
using yellow there,

00:23:33.966 --> 00:23:35.046 A:middle
and purple in Game Center.

00:23:36.156 --> 00:23:37.806 A:middle
So this is one of the
techniques that we've used

00:23:37.806 --> 00:23:40.556 A:middle
to create an identity for
each of these applications

00:23:41.206 --> 00:23:44.716 A:middle
in the user interface which
is otherwise explicitly devoid

00:23:45.186 --> 00:23:47.016 A:middle
of the ornamentation and imagery

00:23:47.266 --> 00:23:49.566 A:middle
that we might have
previously used to do that.

00:23:50.896 --> 00:23:53.396 A:middle
So this is all made
possible available to you

00:23:54.056 --> 00:23:55.986 A:middle
through a new top
level UIKit API.

00:23:56.526 --> 00:23:57.806 A:middle
We've promoted tint color

00:23:58.826 --> 00:24:01.356 A:middle
from certain UIControls
all the way up to UIView.

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

00:23:58.826 --> 00:24:01.356 A:middle
from certain UIControls
all the way up to UIView.

00:24:01.356 --> 00:24:03.726 A:middle
You can set it on any UIView.

00:24:04.206 --> 00:24:06.966 A:middle
And it's actually a
hierarchical property.

00:24:07.406 --> 00:24:10.886 A:middle
And so for instance, if you were
to set red color on your window,

00:24:11.746 --> 00:24:15.536 A:middle
then any UIViews in
that window which looked

00:24:15.536 --> 00:24:18.376 A:middle
at tint color would get red.

00:24:19.346 --> 00:24:22.886 A:middle
By default, that includes
all default UIKit controls,

00:24:23.346 --> 00:24:27.366 A:middle
but we encourage you to
implement any kind of custom UIs

00:24:27.366 --> 00:24:30.016 A:middle
in your application which
take advantage of key colors

00:24:30.066 --> 00:24:33.116 A:middle
in this way using this API.

00:24:33.856 --> 00:24:36.176 A:middle
The reason for that is what
I'm about to show you here,

00:24:36.806 --> 00:24:44.296 A:middle
and that's that when we present
an action sheet, we dim that UI.

00:24:44.966 --> 00:24:46.006 A:middle
It's no longer interactive.

00:24:46.466 --> 00:24:47.316 A:middle
It's no longer selected.

00:24:47.316 --> 00:24:48.766 A:middle
It's no longer important
to the user.

00:24:49.516 --> 00:24:52.356 A:middle
We're trying to make clear
that the buttons at the bottom

00:24:52.356 --> 00:24:54.056 A:middle
of the screen are what
you need to address.

00:24:54.056 --> 00:24:58.256 A:middle
And we actually, we
haven't just laid a grain--

00:24:58.256 --> 00:25:01.326 A:middle
a gray overlay over
that Notes Back button.

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

00:24:58.256 --> 00:25:01.326 A:middle
a gray overlay over
that Notes Back button.

00:25:01.966 --> 00:25:04.416 A:middle
Take a look at that Back
button for a second.

00:25:04.416 --> 00:25:06.636 A:middle
If we had laid a gray overlay

00:25:06.636 --> 00:25:08.366 A:middle
over that button,
it would like this.

00:25:08.366 --> 00:25:13.416 A:middle
Now, there's still some yellow
there, and that yellow distracts

00:25:13.866 --> 00:25:17.616 A:middle
from the buttons of the bottom
of the screen and it's also kind

00:25:17.616 --> 00:25:19.806 A:middle
on muddy because we've mixed
a bunch of gray with it.

00:25:19.896 --> 00:25:23.616 A:middle
So instead we're desaturating
the tint color that you give us.

00:25:24.756 --> 00:25:27.856 A:middle
And so, if you have any custom
UIViews in your application

00:25:28.066 --> 00:25:30.606 A:middle
which should desaturate in
the same way, all you have

00:25:30.606 --> 00:25:33.596 A:middle
to do is implement
tintColorDidChange

00:25:34.116 --> 00:25:34.826 A:middle
on those views.

00:25:35.216 --> 00:25:38.726 A:middle
And then when you next consult
the tint color you'll get the

00:25:38.816 --> 00:25:41.326 A:middle
saturated or desaturated version

00:25:41.406 --> 00:25:46.056 A:middle
as appropriate given the
application's present state.

00:25:46.256 --> 00:25:51.926 A:middle
Now, customization in UIKit
has changed a great deal

00:25:52.556 --> 00:25:53.256 A:middle
with this new look.

00:25:53.306 --> 00:25:57.036 A:middle
A lot of UIAppearance methods
have different semantics.

00:25:57.996 --> 00:25:59.826 A:middle
And of course we're
using color in new ways

00:25:59.866 --> 00:26:01.156 A:middle
that I've barely
scratched the surface

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

00:25:59.866 --> 00:26:01.156 A:middle
that I've barely
scratched the surface

00:26:01.206 --> 00:26:03.056 A:middle
of in this brief discussion.

00:26:03.966 --> 00:26:07.396 A:middle
So later this week, we have a
talk specifically on this topic,

00:26:07.396 --> 00:26:12.446 A:middle
and I encourage to check out how
you can use UIAppearance calls

00:26:12.446 --> 00:26:15.326 A:middle
and some new APIs that we've
created especially for tinting

00:26:15.326 --> 00:26:18.246 A:middle
and color to make your
application look unique,

00:26:18.316 --> 00:26:22.666 A:middle
to give it an identity
on the platform,

00:26:22.666 --> 00:26:24.936 A:middle
and to pursue the
same kinds of things

00:26:24.936 --> 00:26:29.166 A:middle
that you were using the existing
UIAppearance APIs for on iOS 6.

00:26:30.276 --> 00:26:32.556 A:middle
So with that, I'd like to
turn it back over to Jason.

00:26:32.556 --> 00:26:34.556 A:middle
He's going to show you some
more of the great stuff

00:26:34.556 --> 00:26:43.696 A:middle
that we've been doing in iOS
7 for your user interfaces.

00:26:43.696 --> 00:26:44.356 A:middle
[ Applause ]

00:26:44.356 --> 00:26:47.206 A:middle
>> Thanks Andy.

00:26:47.506 --> 00:26:51.806 A:middle
Table Views are one of those
commonly used controls in UIKit

00:26:53.006 --> 00:26:57.226 A:middle
and we've change the appearance
fairly significantly in iOS 7

00:26:57.226 --> 00:26:59.866 A:middle
and there have always been
two styles of Table View,

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

00:27:00.756 --> 00:27:02.496 A:middle
a plain Table View you see
on the left and a grouped

00:27:02.596 --> 00:27:03.436 A:middle
that you see on the right.

00:27:04.916 --> 00:27:06.916 A:middle
We made most of the changes
to the grouped style.

00:27:07.326 --> 00:27:10.116 A:middle
We've removed the rounded
rects and background textures

00:27:10.506 --> 00:27:12.666 A:middle
and extended the
content edge to edge.

00:27:13.506 --> 00:27:15.466 A:middle
This is because we're
trying to put the focus

00:27:15.916 --> 00:27:17.086 A:middle
on the user's content.

00:27:17.526 --> 00:27:22.136 A:middle
We've also change the way we're
using Separators in Table Views.

00:27:23.116 --> 00:27:26.286 A:middle
They're now indented a little
bit to help show relationship

00:27:26.406 --> 00:27:28.066 A:middle
between related items
in the table view.

00:27:28.066 --> 00:27:31.496 A:middle
You have control
over this indentation

00:27:31.586 --> 00:27:33.996 A:middle
with the new property on table
view cell called Separator

00:27:33.996 --> 00:27:34.356 A:middle
in Set.

00:27:34.736 --> 00:27:38.276 A:middle
And we respect for the left and
the right in set on a separator.

00:27:41.576 --> 00:27:44.826 A:middle
Alert views have also changed
appearance fairly significantly

00:27:45.656 --> 00:27:46.316 A:middle
in iOS 7.

00:27:46.316 --> 00:27:49.356 A:middle
But we haven't changed the
API with one exception.

00:27:50.176 --> 00:27:51.506 A:middle
We've added the ability for you

00:27:51.506 --> 00:27:54.026 A:middle
to insert your own
content into Alert Views.

00:27:54.526 --> 00:28:01.156 A:middle
[ Applause ]

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

00:27:54.526 --> 00:28:01.156 A:middle
[ Applause ]

00:28:01.656 --> 00:28:03.276 A:middle
We know a lot of you guys
have been doing this,

00:28:03.276 --> 00:28:04.456 A:middle
have been asking
for way to do it.

00:28:05.136 --> 00:28:06.256 A:middle
It's actually super simple.

00:28:07.536 --> 00:28:09.646 A:middle
There's just a content new
property on the alert view.

00:28:10.176 --> 00:28:12.896 A:middle
And we'll adjust the layout
to add your content in.

00:28:13.396 --> 00:28:16.156 A:middle
[ Applause ]

00:28:16.656 --> 00:28:18.716 A:middle
All right let's take a walk

00:28:18.716 --> 00:28:20.566 A:middle
through the remaining
controls in UIKit.

00:28:20.996 --> 00:28:22.206 A:middle
And first off is buttons.

00:28:23.476 --> 00:28:25.746 A:middle
Buttons have a dramatically
simpler look.

00:28:26.336 --> 00:28:28.956 A:middle
They're just represented by
a piece of text or an icon.

00:28:29.136 --> 00:28:30.786 A:middle
We've remove the back--

00:28:30.786 --> 00:28:32.516 A:middle
the borders and the
background textures

00:28:32.516 --> 00:28:34.236 A:middle
and exactly the same
way we did for the bars.

00:28:34.236 --> 00:28:38.096 A:middle
And for the same reason, because
those heavyweight controls

00:28:38.096 --> 00:28:41.096 A:middle
distract the user from the
content, from what's important.

00:28:41.616 --> 00:28:46.586 A:middle
We've added a new system style

00:28:46.646 --> 00:28:49.336 A:middle
and deprecated the old rounded
rect style in support of this.

00:28:49.766 --> 00:28:53.756 A:middle
And we've done a similar
thing for bar button items

00:28:54.006 --> 00:28:55.356 A:middle
with a new plain style.

00:28:55.956 --> 00:29:01.936 A:middle
A segmented controls
in iOS 7 also look

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

00:28:55.956 --> 00:29:01.936 A:middle
A segmented controls
in iOS 7 also look

00:29:01.936 --> 00:29:02.876 A:middle
significantly different.

00:29:03.886 --> 00:29:06.866 A:middle
They're largely transparent now
and they support tint color.

00:29:07.716 --> 00:29:10.996 A:middle
And so they look great across
a variety of backgrounds.

00:29:11.586 --> 00:29:13.826 A:middle
And because of this we don't
need multiple styles anymore.

00:29:13.826 --> 00:29:16.756 A:middle
And so we've deprecated the
segmented control style.

00:29:17.646 --> 00:29:21.586 A:middle
And so whether you're
looking at a white background

00:29:21.706 --> 00:29:25.596 A:middle
such as Calendar here with a red
tint color or black background

00:29:25.596 --> 00:29:28.636 A:middle
of an application like Stocks
with a blue tint color.

00:29:28.886 --> 00:29:30.306 A:middle
Segmented controls look great.

00:29:30.816 --> 00:29:33.686 A:middle
And we've done a very
similar thing for steppers.

00:29:33.686 --> 00:29:35.086 A:middle
They are also largely
transparent.

00:29:35.656 --> 00:29:37.876 A:middle
They also support tint colors
so they, too, will look great

00:29:37.876 --> 00:29:39.276 A:middle
over a wide variety
of backgrounds.

00:29:42.196 --> 00:29:43.716 A:middle
Now we haven't changed the API

00:29:43.716 --> 00:29:46.956 A:middle
for switches and--
switches and sliders.

00:29:48.156 --> 00:29:49.616 A:middle
But we have changed the metrics.

00:29:49.616 --> 00:29:50.646 A:middle
They're different size now.

00:29:51.296 --> 00:29:53.896 A:middle
And if you haven't yet
adapted Auto Layout

00:29:53.896 --> 00:29:57.766 A:middle
in your application this is
a fantastic way to account

00:29:57.766 --> 00:29:59.976 A:middle
for metrics changes like
this in the operating system.

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

00:30:03.516 --> 00:30:06.726 A:middle
PickerViews have a beautiful
new three-dimensional appearance

00:30:07.006 --> 00:30:07.826 A:middle
in iOS 7.

00:30:08.396 --> 00:30:11.866 A:middle
We haven't changed the
API for PickerViews,

00:30:11.866 --> 00:30:16.406 A:middle
but we are changing the way we
are encouraging you to use them.

00:30:16.616 --> 00:30:19.786 A:middle
Previously, PickerViews were
often presented as input views

00:30:19.786 --> 00:30:20.776 A:middle
on the bottom of the screen.

00:30:20.776 --> 00:30:24.096 A:middle
In fact, they often came in
as part of the navigation push

00:30:24.606 --> 00:30:26.756 A:middle
which brought in an
entirely new view controller

00:30:26.756 --> 00:30:28.776 A:middle
to allow the user to
interact with their content.

00:30:29.896 --> 00:30:31.026 A:middle
We're now encouraging you

00:30:31.026 --> 00:30:33.116 A:middle
to present these
PickerViews in line.

00:30:33.686 --> 00:30:34.926 A:middle
So we look at the Calendar here.

00:30:35.396 --> 00:30:38.866 A:middle
When the user edits the time,
you'll see that TableView opens

00:30:38.866 --> 00:30:41.086 A:middle
up revealing the
picker and it goes away

00:30:41.086 --> 00:30:41.986 A:middle
when they no longer need it.

00:30:42.596 --> 00:30:44.866 A:middle
This creates a more
lively engaging interface,

00:30:45.006 --> 00:30:46.036 A:middle
but it's also a lighter way

00:30:46.036 --> 00:30:48.476 A:middle
that doesn't involve this big
heavy weight context shift

00:30:48.476 --> 00:30:49.186 A:middle
for the user.

00:30:53.796 --> 00:30:56.266 A:middle
For applications that use
the SearchDisplayController,

00:30:56.826 --> 00:31:00.146 A:middle
we're not typically displaying
the search bar inside the

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

00:30:56.826 --> 00:31:00.146 A:middle
we're not typically displaying
the search bar inside the

00:31:00.146 --> 00:31:01.046 A:middle
navigation bar.

00:31:01.626 --> 00:31:04.266 A:middle
And this is, again,
because we want

00:31:04.266 --> 00:31:06.176 A:middle
to put the focus on the content.

00:31:06.176 --> 00:31:07.676 A:middle
We want the chrome to
get out of the way.

00:31:07.676 --> 00:31:10.586 A:middle
And when you're searching,
you don't need to have excess

00:31:10.766 --> 00:31:11.736 A:middle
to the navigation bar.

00:31:12.286 --> 00:31:14.856 A:middle
It's just easy for
you to do yourself

00:31:14.856 --> 00:31:16.906 A:middle
with a simple additional
Boolean property

00:31:16.906 --> 00:31:19.186 A:middle
on SearchDisplayController
to indicate that you want

00:31:19.186 --> 00:31:22.036 A:middle
to put the search bar
inside the navigation bar.

00:31:22.586 --> 00:31:26.616 A:middle
And finally, I want
to talk a moment

00:31:26.616 --> 00:31:28.076 A:middle
about Adaptive Multitasking.

00:31:28.656 --> 00:31:33.776 A:middle
It's very important
to users in iOS 7--

00:31:34.506 --> 00:31:36.786 A:middle
their applications feel
like they're always running

00:31:37.106 --> 00:31:38.926 A:middle
and always up-to-date.

00:31:39.716 --> 00:31:41.656 A:middle
So we have several
new mechanisms

00:31:42.626 --> 00:31:45.066 A:middle
to allow your application
to get launched and updated

00:31:45.066 --> 00:31:47.326 A:middle
in the background
and updated snapshot.

00:31:48.316 --> 00:31:51.276 A:middle
So when the user goes into
the multitasking switcher,

00:31:51.836 --> 00:31:55.196 A:middle
when they launch your app,
they see up-to-date content,

00:31:55.646 --> 00:31:57.806 A:middle
giving the impression that your
application has been running all

00:31:57.806 --> 00:32:00.026 A:middle
along and is always up-to-date.

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

00:31:57.806 --> 00:32:00.026 A:middle
along and is always up-to-date.

00:32:02.016 --> 00:32:04.316 A:middle
We have a session
about this afternoon,

00:32:04.316 --> 00:32:05.596 A:middle
at 2 o'clock in this room.

00:32:05.856 --> 00:32:07.586 A:middle
And I encourage you
all to come to this,

00:32:07.886 --> 00:32:09.976 A:middle
so that you can make your
application still exactly the

00:32:09.976 --> 00:32:11.056 A:middle
same way to your users.

00:32:12.076 --> 00:32:14.416 A:middle
With that, I'd like to turn it
back over to Andy to take us

00:32:14.416 --> 00:32:22.946 A:middle
through the remaining
changes in UIKit for iOS 7.

00:32:22.946 --> 00:32:23.066 A:middle
[ Applause ]

00:32:23.066 --> 00:32:23.696 A:middle
>> Thanks Jason.

00:32:24.836 --> 00:32:28.156 A:middle
Now, we've talked
a lot about clarity

00:32:28.326 --> 00:32:30.376 A:middle
and deference so
far in this talk.

00:32:31.506 --> 00:32:33.766 A:middle
And I'd like to steer
the direction

00:32:33.766 --> 00:32:36.326 A:middle
of our discussion
now towards depth.

00:32:37.636 --> 00:32:41.816 A:middle
If we look at iOS
7's Lock screen,

00:32:42.926 --> 00:32:44.916 A:middle
we see it's been
totally redesigned and

00:32:44.916 --> 00:32:45.976 A:middle
yet it's very familiar.

00:32:46.736 --> 00:32:50.466 A:middle
And one of the aspects of
that familiarity is the Camera

00:32:50.466 --> 00:32:51.716 A:middle
button, down in the lower right.

00:32:52.876 --> 00:32:55.306 A:middle
So as I'm upgrading from iOS
6 to iOS 7, I still know--

00:32:55.666 --> 00:32:57.746 A:middle
if I drag my finger up along
the right side of the screen,

00:32:59.036 --> 00:32:59.826 A:middle
I can get to the camera.

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

00:33:00.936 --> 00:33:03.636 A:middle
But look at the way it responds,
it bounces differently,

00:33:03.666 --> 00:33:05.506 A:middle
from different heights,
I can even throw it down,

00:33:06.666 --> 00:33:08.166 A:middle
and it creates this
wonderful bounce effect.

00:33:08.226 --> 00:33:11.686 A:middle
It feels like the user
interface is responding to me,

00:33:11.686 --> 00:33:15.536 A:middle
it feels like a much
more rich interaction.

00:33:16.916 --> 00:33:18.936 A:middle
And, of course, we could
have done this before.

00:33:19.506 --> 00:33:23.236 A:middle
But with iOS 7, we're
introducing a piece

00:33:23.236 --> 00:33:28.726 A:middle
of technology that made it easy
to do this, has made it easy

00:33:28.726 --> 00:33:31.286 A:middle
to do this kind of thing
throughout the operating system

00:33:31.426 --> 00:33:34.186 A:middle
and will make it incredibly
easy for you all to do this kind

00:33:34.186 --> 00:33:35.696 A:middle
of thing in your applications.

00:33:37.006 --> 00:33:38.046 A:middle
That's UIKit dynamics.

00:33:38.896 --> 00:33:43.826 A:middle
The idea behind UIKit
dynamics is

00:33:43.826 --> 00:33:47.356 A:middle
that you'll specify high
level, physics like behaviors

00:33:47.546 --> 00:33:49.976 A:middle
for your application, so
that you can really quickly

00:33:50.226 --> 00:33:52.706 A:middle
with just a few lines
of code get these kinds

00:33:52.706 --> 00:33:55.496 A:middle
of rich interactions that
I've just been showing you.

00:33:56.206 --> 00:33:57.876 A:middle
So for instance, for
this Lock screen here,

00:33:58.336 --> 00:33:59.826 A:middle
all we have to do is specify

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

00:34:00.336 --> 00:34:02.956 A:middle
that the Lock screen has a
certain amount of gravity,

00:34:03.676 --> 00:34:06.966 A:middle
a certain amount of bounciness,
that it should collide

00:34:06.966 --> 00:34:09.326 A:middle
with the edges of the
screen-- just a few lines--

00:34:09.746 --> 00:34:11.666 A:middle
and we got this lovely effect.

00:34:13.255 --> 00:34:15.826 A:middle
We're using in multiple places
throughout the operating system:

00:34:16.626 --> 00:34:17.775 A:middle
Messages for instance.

00:34:19.246 --> 00:34:22.846 A:middle
We create kind of a playful
feel for the chat bubbles.

00:34:25.505 --> 00:34:27.956 A:middle
You see that they lag a
moment behind scrolling.

00:34:29.466 --> 00:34:32.326 A:middle
We're able to do that
using attachment behaviors

00:34:32.626 --> 00:34:34.196 A:middle
in UIKit dynamics
which allow you

00:34:34.196 --> 00:34:37.396 A:middle
to specify spring-like
behaviors for elements

00:34:37.396 --> 00:34:38.235 A:middle
in your user interface.

00:34:39.045 --> 00:34:41.976 A:middle
Now, we have a number of talks

00:34:42.116 --> 00:34:43.295 A:middle
on this topic throughout
the week.

00:34:43.876 --> 00:34:45.376 A:middle
And so I don't need to
go into the details.

00:34:46.025 --> 00:34:47.886 A:middle
Two full talks on
UIKit dynamics,

00:34:48.416 --> 00:34:51.626 A:middle
and we'll also discuss a
new spring animation API

00:34:51.626 --> 00:34:54.166 A:middle
that we've added to UIView
and we're very excited about.

00:34:55.306 --> 00:34:58.526 A:middle
I'd like to also direct your
attention towards the ScrollView

00:34:58.576 --> 00:35:01.046 A:middle
talk which is always
amazing year after year.

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

00:34:58.576 --> 00:35:01.046 A:middle
talk which is always
amazing year after year.

00:35:01.666 --> 00:35:05.226 A:middle
But this year in particular,
it's going to have a demo

00:35:05.226 --> 00:35:08.886 A:middle
that specifically goes into
that Messages bouncy effect

00:35:09.156 --> 00:35:11.396 A:middle
that you all just
reacted so positively to.

00:35:11.956 --> 00:35:13.986 A:middle
And I know a lot of you are
really curious how we did that.

00:35:14.476 --> 00:35:15.466 A:middle
So check out that talk.

00:35:15.956 --> 00:35:18.196 A:middle
It will give you all the
details, live code demos.

00:35:18.476 --> 00:35:21.606 A:middle
It's going to be great.

00:35:21.606 --> 00:35:26.876 A:middle
Now we've looked at the Lock
screen, this is the Home screen.

00:35:27.446 --> 00:35:30.126 A:middle
But the Home screen
doesn't stay like this.

00:35:30.936 --> 00:35:35.276 A:middle
As soon as you pick the phone
up and you start interacting

00:35:35.276 --> 00:35:37.326 A:middle
with it in your hand
making small movements,

00:35:38.566 --> 00:35:40.016 A:middle
the UI in the Home
screen changes,

00:35:40.666 --> 00:35:43.286 A:middle
starts to communicate depth.

00:35:43.286 --> 00:35:47.626 A:middle
Let's look at the stars at
the edges of the screen.

00:35:49.186 --> 00:35:50.806 A:middle
They move in and out
in a way that suggests

00:35:51.096 --> 00:35:53.906 A:middle
that background is
recessed beneath the screen.

00:35:54.856 --> 00:35:57.816 A:middle
And if we look at that
red "1" badge on top

00:35:57.816 --> 00:36:00.816 A:middle
of the Messages icon, it's
moving in a way that suggests

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

00:35:57.816 --> 00:36:00.816 A:middle
of the Messages icon, it's
moving in a way that suggests

00:36:00.816 --> 00:36:01.976 A:middle
that it's really floating there.

00:36:01.976 --> 00:36:06.756 A:middle
Now you've seen this slide
because Toby stole my slides.

00:36:07.456 --> 00:36:09.746 A:middle
But there are more places

00:36:09.746 --> 00:36:10.866 A:middle
where we're using this
throughout the system.

00:36:12.176 --> 00:36:12.796 A:middle
Here's Safari.

00:36:13.076 --> 00:36:15.646 A:middle
Look at how when we tilt back,
we can see more of each tab,

00:36:16.556 --> 00:36:17.666 A:middle
and here it's hiding
a little bit.

00:36:18.866 --> 00:36:21.546 A:middle
And actually, the wallpaper
is even behind those tabs

00:36:21.956 --> 00:36:24.936 A:middle
and it's moving consistently
with the last slide as well

00:36:25.366 --> 00:36:28.966 A:middle
to create this very
rich sense of depth.

00:36:29.156 --> 00:36:30.926 A:middle
And here, we're actually
using it

00:36:30.926 --> 00:36:32.996 A:middle
in standard system UI elements.

00:36:33.286 --> 00:36:40.216 A:middle
Look at the way that
alert floats.

00:36:40.216 --> 00:36:40.283 A:middle
[ Applause ]

00:36:40.283 --> 00:36:41.766 A:middle
So even without you doing
anything, you're going

00:36:41.766 --> 00:36:43.996 A:middle
to get this kind of effect
in your application, alerts,

00:36:44.756 --> 00:36:48.086 A:middle
action sheets, activity
view controller, popovers.

00:36:49.446 --> 00:36:51.556 A:middle
And I just want to
show you a quick A/B

00:36:51.766 --> 00:36:53.366 A:middle
of what the screen looks
like with and without.

00:36:54.686 --> 00:36:55.916 A:middle
I don't have to tell
you which is which.

00:36:56.636 --> 00:37:01.476 A:middle
I could watch this
all day [laughter].

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

00:36:56.636 --> 00:37:01.476 A:middle
I could watch this
all day [laughter].

00:37:03.596 --> 00:37:05.886 A:middle
The best news I have is not
just that we've done this thing,

00:37:06.746 --> 00:37:09.486 A:middle
Bbt similarly to the
UIKit dynamics case,

00:37:10.286 --> 00:37:13.046 A:middle
because we think this feeling
of depth is so important

00:37:13.526 --> 00:37:16.696 A:middle
in communicating richness
in your interface and also

00:37:16.696 --> 00:37:20.036 A:middle
in explaining how information
is organized in your interface,

00:37:20.936 --> 00:37:22.726 A:middle
we want to make it really easy.

00:37:23.316 --> 00:37:26.686 A:middle
So we've made an API for it:
it's called motion effects.

00:37:28.046 --> 00:37:30.806 A:middle
It's going to be really easy
for you all to adopt this kind

00:37:30.806 --> 00:37:34.456 A:middle
of behavior in your
application as well.

00:37:34.666 --> 00:37:37.136 A:middle
Now motion effects
works by using all

00:37:37.136 --> 00:37:41.776 A:middle
of the advanced sensors on our
devices in order to estimate

00:37:41.776 --> 00:37:46.796 A:middle
in any given moment where
the device is facing relative

00:37:46.836 --> 00:37:47.306 A:middle
to the user.

00:37:47.306 --> 00:37:52.576 A:middle
And it can handle things like
subtle shifts in position,

00:37:52.576 --> 00:37:55.206 A:middle
if I'm lying in bed and
I roll over to my side,

00:37:55.856 --> 00:37:58.446 A:middle
or even dramatic shifts,
like, I turn my phone around

00:37:58.446 --> 00:38:01.966 A:middle
and hand it to my friend.

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

00:37:58.446 --> 00:38:01.966 A:middle
and hand it to my friend.

00:38:01.966 --> 00:38:04.426 A:middle
And once you know
the disposition

00:38:04.426 --> 00:38:05.536 A:middle
of the phone's arrangement,

00:38:06.226 --> 00:38:09.616 A:middle
you can easily specify how your
user interface should react

00:38:10.066 --> 00:38:11.196 A:middle
in response to that motion.

00:38:11.696 --> 00:38:15.816 A:middle
Well, this effect isn't
free and you wouldn't want

00:38:15.816 --> 00:38:17.526 A:middle
to put it everywhere
in your application due

00:38:17.526 --> 00:38:20.346 A:middle
to the battery implications,
but we've done a great deal

00:38:20.346 --> 00:38:23.906 A:middle
of work all the way up and
down the stack to make sure

00:38:23.906 --> 00:38:25.916 A:middle
that the impact of
this is as low

00:38:25.916 --> 00:38:28.076 A:middle
as we could possibly pull off.

00:38:28.426 --> 00:38:30.066 A:middle
So if you're going to
implement this kind of effect

00:38:30.066 --> 00:38:32.366 A:middle
in your application, we
encourage you to use this API.

00:38:32.366 --> 00:38:36.776 A:middle
I want to show you in
particular what's going

00:38:36.776 --> 00:38:39.936 A:middle
on on-screen while this
motion is happening.

00:38:40.046 --> 00:38:44.886 A:middle
So on the screen to the right
you'll see what's on the display

00:38:44.886 --> 00:38:46.226 A:middle
of the device in the left.

00:38:46.226 --> 00:38:50.836 A:middle
So as it starts moving,
we adjust the position

00:38:50.836 --> 00:38:53.916 A:middle
of the alert along with
the rotation of the device.

00:38:55.146 --> 00:38:58.186 A:middle
We're adjusting the lighting
of the shadows between the tabs

00:38:59.306 --> 00:39:00.856 A:middle
in order to create a
nice shading effect.

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

00:38:59.306 --> 00:39:00.856 A:middle
in order to create a
nice shading effect.

00:39:00.856 --> 00:39:04.736 A:middle
And then we're doing this
perspective skew distortion

00:39:04.736 --> 00:39:05.626 A:middle
on the tab as well.

00:39:06.906 --> 00:39:08.996 A:middle
So you can specify
any kinds of effects

00:39:08.996 --> 00:39:10.296 A:middle
for your application
using this API.

00:39:10.436 --> 00:39:11.996 A:middle
It's not just positioning.

00:39:12.466 --> 00:39:14.426 A:middle
So later this week, we have--

00:39:15.836 --> 00:39:18.356 A:middle
going to have a talk that I
think you'll all very excited

00:39:18.356 --> 00:39:21.706 A:middle
to attend called "Implementing,
Engaging UI on iOS",

00:39:21.866 --> 00:39:25.536 A:middle
where there are going to be live
code demos and examples of how

00:39:25.536 --> 00:39:28.556 A:middle
to get this kind of beautiful
effect in your applications.

00:39:32.716 --> 00:39:37.686 A:middle
There's one more big way that
we're using depth on iOS,

00:39:39.256 --> 00:39:41.956 A:middle
and that's with these
blurring layers.

00:39:42.836 --> 00:39:45.156 A:middle
So you'll see here,
we have these albums.

00:39:45.676 --> 00:39:47.716 A:middle
We're even starting to
suggest depth by the way

00:39:47.716 --> 00:39:48.836 A:middle
that they're stacking up here.

00:39:49.426 --> 00:39:52.266 A:middle
But I want to draw your
attention specifically

00:39:52.266 --> 00:39:54.336 A:middle
to what happens when I
pressed this Edit button.

00:39:55.076 --> 00:39:57.206 A:middle
You see that green
album through this sheet

00:39:57.206 --> 00:40:01.536 A:middle
and that helps communicate
without really getting

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

00:39:57.206 --> 00:40:01.536 A:middle
and that helps communicate
without really getting

00:40:01.536 --> 00:40:04.156 A:middle
in the way or taking
up space on screen

00:40:04.776 --> 00:40:07.186 A:middle
that that content is
still underneath this

00:40:07.186 --> 00:40:08.066 A:middle
modal ViewController.

00:40:09.146 --> 00:40:11.826 A:middle
If I were to dismiss it, I know
it's still going to be there

00:40:11.826 --> 00:40:14.256 A:middle
because I can see it right now.

00:40:14.486 --> 00:40:16.216 A:middle
Similarly, you'll see
a Notification Center

00:40:17.666 --> 00:40:19.986 A:middle
that your content is
visible behind it.

00:40:21.106 --> 00:40:23.746 A:middle
And as I mentioned earlier
with the navigation bars,

00:40:23.916 --> 00:40:26.406 A:middle
we're doing a bunch of
processing to make sure

00:40:26.406 --> 00:40:30.376 A:middle
that while we communicate
depth in this way, we don't get

00:40:30.376 --> 00:40:33.266 A:middle
in the way of the
concept which is on top

00:40:33.266 --> 00:40:34.386 A:middle
of the Notification Center.

00:40:34.736 --> 00:40:36.696 A:middle
So you can see that
that text is still crisp

00:40:37.126 --> 00:40:39.956 A:middle
and readable even while
we see the icons through.

00:40:40.496 --> 00:40:44.296 A:middle
We have different styles for
each of these blurring effects

00:40:44.616 --> 00:40:47.036 A:middle
that we're using to
communicate different materials.

00:40:47.556 --> 00:40:49.546 A:middle
And so you'll see for
Control Center for instance,

00:40:50.436 --> 00:40:51.366 A:middle
it's a much lighter style.

00:40:51.366 --> 00:40:53.676 A:middle
It feels almost as
if someone has turned

00:40:53.676 --> 00:40:58.886 A:middle
on an extra backlight
underneath the screen.

00:40:59.106 --> 00:41:03.806 A:middle
So, in order to make this kind
of advance image processing fast

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

00:40:59.106 --> 00:41:03.806 A:middle
So, in order to make this kind
of advance image processing fast

00:41:04.526 --> 00:41:07.016 A:middle
and easy for you and
your applications,

00:41:07.386 --> 00:41:08.626 A:middle
one of the things
we're introducing

00:41:08.626 --> 00:41:12.696 A:middle
with iOS 7 is radically
faster snapshotting APIs.

00:41:13.196 --> 00:41:19.436 A:middle
[ Applause ]

00:41:19.936 --> 00:41:21.346 A:middle
And this method is
coming in Seed II.

00:41:22.176 --> 00:41:23.996 A:middle
There's a method in Seed I
that you can use for a number

00:41:23.996 --> 00:41:25.986 A:middle
of application, although,
not this blurring effect,

00:41:26.076 --> 00:41:28.046 A:middle
that will be discussed
later on this week.

00:41:28.366 --> 00:41:31.906 A:middle
But this method will allow you
to get an image representation

00:41:32.376 --> 00:41:33.826 A:middle
of a hierarchy in
your application.

00:41:34.376 --> 00:41:35.316 A:middle
And you could have
done this before.

00:41:35.656 --> 00:41:38.356 A:middle
But this particular piece
of API is turbo charged.

00:41:38.356 --> 00:41:40.446 A:middle
It's about an order
of magnitude faster.

00:41:41.666 --> 00:41:44.206 A:middle
So it'll make possible a
number of really wonderful

00:41:44.206 --> 00:41:47.316 A:middle
and advanced image processing
effects in your applications.

00:41:48.006 --> 00:41:52.076 A:middle
That same talk which is going
to go over motion effects

00:41:52.076 --> 00:41:54.966 A:middle
and show you more of what
you can do with them is going

00:41:54.966 --> 00:41:56.066 A:middle
to give you more information

00:41:56.356 --> 00:41:58.486 A:middle
on implementing these
blurring layers

00:41:58.606 --> 00:42:00.586 A:middle
for communicating depth
in your applications.

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

00:41:58.606 --> 00:42:00.586 A:middle
for communicating depth
in your applications.

00:42:01.526 --> 00:42:07.106 A:middle
So I think this one is
going to be a must-see.

00:42:07.406 --> 00:42:09.656 A:middle
So we've toured around
the system.

00:42:10.696 --> 00:42:12.716 A:middle
We've talked about
everything we've changed.

00:42:13.656 --> 00:42:16.686 A:middle
But I'm sure that one
of the chief questions

00:42:16.686 --> 00:42:21.676 A:middle
on your minds is, okay,
what do I have to change?

00:42:21.846 --> 00:42:23.636 A:middle
And so I'd like to
close out this session

00:42:24.006 --> 00:42:27.506 A:middle
by discussing strategies
and tips

00:42:27.636 --> 00:42:30.326 A:middle
for adapting your
application to iOS 7.

00:42:30.326 --> 00:42:34.746 A:middle
And I thought that a nice way to
do that might be to discuss some

00:42:34.746 --> 00:42:36.386 A:middle
of those strategies we used

00:42:36.666 --> 00:42:39.706 A:middle
with our own applications
moving them to iOS 7.

00:42:39.816 --> 00:42:47.326 A:middle
So as we've been saying, the
change to the user interface

00:42:47.326 --> 00:42:50.536 A:middle
in the iOS 7 is not
just an aesthetic one.

00:42:51.936 --> 00:42:53.266 A:middle
It's a highly functional one.

00:42:53.856 --> 00:42:56.526 A:middle
And so for each application,

00:42:56.636 --> 00:42:59.736 A:middle
the first thing we did
was we broke it down.

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

00:43:00.686 --> 00:43:04.696 A:middle
We asked ourselves, "What is the
primary information the user is

00:43:04.696 --> 00:43:06.196 A:middle
trying to access in
this application?

00:43:06.656 --> 00:43:10.076 A:middle
What are the primary actions
the user is trying to perform?

00:43:11.486 --> 00:43:13.496 A:middle
What's secondary,
what's tertiary?"

00:43:14.406 --> 00:43:16.836 A:middle
Once we have those lists,
we were able to build

00:43:16.836 --> 00:43:20.106 A:middle
that application back
up in order to make sure

00:43:20.106 --> 00:43:23.676 A:middle
that what was primary, the
content, the chief task,

00:43:24.466 --> 00:43:28.716 A:middle
were easy to access, were
beautiful, were available.

00:43:29.326 --> 00:43:32.206 A:middle
That secondary tasks
are just a moment away,

00:43:32.276 --> 00:43:35.266 A:middle
or where they are hard to get
to in previous versions of iOS,

00:43:35.836 --> 00:43:38.836 A:middle
we would create interactions
or change the architecture

00:43:38.836 --> 00:43:40.486 A:middle
around to make them
easier to access.

00:43:41.906 --> 00:43:44.606 A:middle
And unnecessary elements
of our application,

00:43:45.396 --> 00:43:47.406 A:middle
we realized in the study
that we could strip away.

00:43:47.966 --> 00:43:50.426 A:middle
But we didn't just strip away.

00:43:51.766 --> 00:43:54.546 A:middle
In so many cases, we made
these interactions much richer,

00:43:54.546 --> 00:43:59.226 A:middle
and we did that using the
new physics-like system

00:43:59.316 --> 00:44:01.386 A:middle
that I've been describing
to you, UIKit dynamics.

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

00:43:59.316 --> 00:44:01.386 A:middle
that I've been describing
to you, UIKit dynamics.

00:44:02.286 --> 00:44:03.716 A:middle
We did it with the
motion effects.

00:44:04.216 --> 00:44:05.666 A:middle
We did it with these
blurring layers.

00:44:05.936 --> 00:44:08.036 A:middle
We did it with use of
color and typography.

00:44:08.576 --> 00:44:16.916 A:middle
And where it made sense,
we took special advantage

00:44:17.526 --> 00:44:20.516 A:middle
of those beautiful and
dense retina displays

00:44:21.026 --> 00:44:22.106 A:middle
that we have in our devices.

00:44:23.716 --> 00:44:26.516 A:middle
No longer is all of our
art, simply a scaled up

00:44:26.516 --> 00:44:29.706 A:middle
and more detailed
version of the 1X work.

00:44:30.786 --> 00:44:33.076 A:middle
You see that right off
with the typography,

00:44:33.636 --> 00:44:36.076 A:middle
which is taking full advantage
of the retina display in order

00:44:36.076 --> 00:44:39.536 A:middle
to create these extremely crisp,
beautiful, but readable lines.

00:44:40.366 --> 00:44:44.906 A:middle
But also in many places where
we wanted to avoid competing

00:44:45.176 --> 00:44:49.276 A:middle
with the application's content,
we would lower the visual weight

00:44:49.646 --> 00:44:53.536 A:middle
of the system's chrome
by using 1 pixel elements

00:44:53.846 --> 00:44:55.496 A:middle
on retina displays,
1 pixel hairlines.

00:44:56.536 --> 00:44:59.036 A:middle
And so you'll see those kinds
of touches throughout iOS 7.

00:44:59.586 --> 00:45:05.126 A:middle
That is all very
abstract and we've gone

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

00:44:59.586 --> 00:45:05.126 A:middle
That is all very
abstract and we've gone

00:45:05.126 --> 00:45:06.366 A:middle
over a lot of API today.

00:45:07.016 --> 00:45:11.246 A:middle
So I would like now to
turn our attention to some

00:45:11.246 --> 00:45:13.456 A:middle
of the most important
things that we've called

00:45:13.456 --> 00:45:15.166 A:middle
out from this session
that I encourage you

00:45:15.166 --> 00:45:16.856 A:middle
to adapt first in
your application.

00:45:17.436 --> 00:45:22.136 A:middle
We've been harping on this
idea that content comes first.

00:45:23.236 --> 00:45:24.566 A:middle
And so often content is text.

00:45:25.516 --> 00:45:26.876 A:middle
That's why we spent
so much time on it.

00:45:27.976 --> 00:45:30.206 A:middle
And so I would encourage
you, first thing,

00:45:30.296 --> 00:45:32.826 A:middle
to adopt these new text APIs.

00:45:33.556 --> 00:45:36.676 A:middle
They'll make sure that the text
in your application is beautiful

00:45:36.676 --> 00:45:40.296 A:middle
at all sizes, it will make
sure that it looks and fits

00:45:40.296 --> 00:45:42.246 A:middle
in with the rest of
the operating systems,

00:45:42.246 --> 00:45:43.826 A:middle
is part of that cohesive
design theme.

00:45:44.846 --> 00:45:47.836 A:middle
We'll make sure that users with
accessibility means will be able

00:45:47.936 --> 00:45:50.516 A:middle
to use your application
and get access

00:45:50.516 --> 00:45:51.506 A:middle
to all that great content.

00:45:52.876 --> 00:45:54.366 A:middle
We'll make your application
look better than ever.

00:45:54.816 --> 00:45:56.326 A:middle
It's absolutely fantastic.

00:45:57.656 --> 00:45:59.626 A:middle
Secondly, again, with
the theme of content,

00:45:59.916 --> 00:46:01.216 A:middle
your controllers are
going full screen,

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

00:45:59.916 --> 00:46:01.216 A:middle
your controllers are
going full screen,

00:46:01.926 --> 00:46:04.056 A:middle
that's the default behavior,
you don't have to turn that on.

00:46:04.526 --> 00:46:06.606 A:middle
And so if you have
custom layout methods

00:46:06.826 --> 00:46:09.836 A:middle
on your ViewController's views,
you may need to adapt them

00:46:10.326 --> 00:46:13.796 A:middle
to this new reality, or may
need to take advantage of some

00:46:13.796 --> 00:46:15.256 A:middle
of the APIs that
I've been discussing

00:46:15.256 --> 00:46:16.226 A:middle
in order to make that happen.

00:46:16.226 --> 00:46:20.946 A:middle
But once you do, I think, you'll
see that giving content all

00:46:20.946 --> 00:46:23.746 A:middle
that more room to breathe
is a really wonderful thing.

00:46:23.746 --> 00:46:26.526 A:middle
It helps suggest place
in your application

00:46:27.276 --> 00:46:30.786 A:middle
and it gives a much richer
sense of motion as you scroll.

00:46:30.786 --> 00:46:34.386 A:middle
You'll see that content moving
up underneath the navigation bar

00:46:34.386 --> 00:46:37.306 A:middle
and the toolbar, it's
going to be great.

00:46:38.676 --> 00:46:40.576 A:middle
The Adaptive Multitasking,
we only touched

00:46:40.576 --> 00:46:42.906 A:middle
on today in this talk.

00:46:42.906 --> 00:46:45.586 A:middle
And we're going to go into a lot
more detail just later today.

00:46:45.966 --> 00:46:46.326 A:middle
Oh, goodness.

00:46:47.756 --> 00:46:50.506 A:middle
A lot more detail
just later today.

00:46:51.236 --> 00:46:56.286 A:middle
But I want to describe just
again how important the Adaptive

00:46:56.286 --> 00:46:59.406 A:middle
Multitasking API is not just to
the functionality of the system

00:46:59.406 --> 00:47:00.756 A:middle
or the convenience
that, for instance,

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

00:46:59.406 --> 00:47:00.756 A:middle
or the convenience
that, for instance,

00:47:01.146 --> 00:47:03.216 A:middle
your users will have their
content all the time.

00:47:03.216 --> 00:47:03.746 A:middle
That's true.

00:47:03.796 --> 00:47:04.936 A:middle
And that will be really great

00:47:05.376 --> 00:47:07.016 A:middle
because functionality
is extremely important.

00:47:07.896 --> 00:47:10.756 A:middle
But the other thing this
Adaptive Multitasking system

00:47:10.756 --> 00:47:13.446 A:middle
does is when we wake
your application

00:47:13.446 --> 00:47:17.146 A:middle
up to fetch any data,
once you're done,

00:47:17.426 --> 00:47:18.226 A:middle
we take a screen shot.

00:47:18.976 --> 00:47:21.576 A:middle
And then we use that screen
shot in the app switcher,

00:47:21.576 --> 00:47:24.236 A:middle
and also when you're
launching applications.

00:47:25.196 --> 00:47:27.686 A:middle
And so if we have a recent
screen shot, it's up to date

00:47:27.686 --> 00:47:31.216 A:middle
because you've adopted this
API, it really feels to the user

00:47:31.496 --> 00:47:33.266 A:middle
like your App is
running all the time.

00:47:34.376 --> 00:47:36.696 A:middle
And it's the best of both
worlds, because it feels

00:47:36.696 --> 00:47:39.016 A:middle
that way, it's a
really persuasive trick,

00:47:39.876 --> 00:47:43.226 A:middle
even while you're not paying
the enormous performance

00:47:43.226 --> 00:47:45.496 A:middle
ramifications that
would be necessary

00:47:45.496 --> 00:47:46.626 A:middle
to actually make that true.

00:47:46.626 --> 00:47:50.426 A:middle
It makes the whole
experience fluid and fast;

00:47:50.976 --> 00:47:55.226 A:middle
it's great; adopt this API.

00:47:55.556 --> 00:47:58.396 A:middle
So we have a lot less
ornamentation in iOS 7,

00:47:58.396 --> 00:48:00.286 A:middle
and we're really
pleased about that

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

00:47:58.396 --> 00:48:00.286 A:middle
and we're really
pleased about that

00:48:00.366 --> 00:48:03.926 A:middle
because it gives the
content room to shine.

00:48:04.116 --> 00:48:07.126 A:middle
And in exchange for that
change in ornamentation,

00:48:07.386 --> 00:48:08.876 A:middle
you're not conveying
the personality

00:48:08.876 --> 00:48:12.856 A:middle
of your application using
this heavy, dense imagery.

00:48:13.336 --> 00:48:14.566 A:middle
You're not conveying
the structure

00:48:14.566 --> 00:48:15.976 A:middle
of your application
using that either.

00:48:16.916 --> 00:48:18.286 A:middle
We'd like to encourage you to--

00:48:18.286 --> 00:48:21.346 A:middle
now use these advanced
animated transitions

00:48:21.686 --> 00:48:23.556 A:middle
between the various labs
of your application.

00:48:24.636 --> 00:48:29.266 A:middle
In order to create these new
kinds of rich feelings to moving

00:48:29.266 --> 00:48:32.066 A:middle
through screens and
also in order

00:48:32.066 --> 00:48:35.516 A:middle
to help give the user
some more detailed context

00:48:35.596 --> 00:48:37.816 A:middle
for what's happening as
they're zooming into a month

00:48:38.056 --> 00:48:39.176 A:middle
in the Calendar for instance.

00:48:40.016 --> 00:48:42.536 A:middle
They can create a mental model
with that much more easily

00:48:42.796 --> 00:48:45.136 A:middle
than simple navigation
controller transitions.

00:48:45.686 --> 00:48:46.916 A:middle
We've given you a
lot of power here

00:48:46.986 --> 00:48:49.866 A:middle
and I encourage you to use it.

00:48:50.196 --> 00:48:53.396 A:middle
Finally, where it's appropriate,
we think these new dynamics

00:48:53.396 --> 00:48:55.476 A:middle
and motions effects
APIs are going

00:48:55.476 --> 00:48:58.776 A:middle
to create some really
amazing designs.

00:48:59.826 --> 00:49:01.966 A:middle
Obviously, it's important to
be tasteful with these effects

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

00:48:59.826 --> 00:49:01.966 A:middle
Obviously, it's important to
be tasteful with these effects

00:49:02.036 --> 00:49:02.816 A:middle
because they're dramatic.

00:49:04.156 --> 00:49:06.156 A:middle
But when they're executed well,

00:49:06.776 --> 00:49:08.736 A:middle
they make the phone
feel so lively.

00:49:09.586 --> 00:49:12.046 A:middle
When you pick the phone up
off the desk, it's responding

00:49:12.046 --> 00:49:13.256 A:middle
to you before you've
even touch it.

00:49:14.716 --> 00:49:17.886 A:middle
And with the physics-like
effects in the dynamic system,

00:49:18.176 --> 00:49:22.466 A:middle
the interactions, feel so
much deeper and more rich.

00:49:23.936 --> 00:49:24.506 A:middle
It's really lovely.

00:49:24.506 --> 00:49:31.046 A:middle
Now I'd like to spend
a moment on the issue

00:49:31.046 --> 00:49:34.316 A:middle
of supporting both
iOS 6 and iOS 7.

00:49:35.686 --> 00:49:37.286 A:middle
Why are you laughing?

00:49:39.406 --> 00:49:41.036 A:middle
[laughter] And you
saw-- you saw yesterday,

00:49:41.096 --> 00:49:44.196 A:middle
you saw our upgrade numbers
they are really exciting.

00:49:45.456 --> 00:49:46.886 A:middle
People are moving
to new versions

00:49:46.886 --> 00:49:49.716 A:middle
of iOS at a ridiculous pace.

00:49:50.656 --> 00:49:53.956 A:middle
And iOS 7 is so exciting that
we're confident people are going

00:49:53.956 --> 00:49:56.216 A:middle
to move to it at the same pace.

00:49:56.796 --> 00:50:01.056 A:middle
And so we would suggest that you
consider focusing your efforts

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

00:49:56.796 --> 00:50:01.056 A:middle
And so we would suggest that you
consider focusing your efforts

00:50:01.056 --> 00:50:02.336 A:middle
on iOS 7 first.

00:50:03.556 --> 00:50:06.106 A:middle
Now, I know that's not going
to be possible for all of you.

00:50:07.156 --> 00:50:10.166 A:middle
So if you need to support
both operating systems,

00:50:10.166 --> 00:50:11.906 A:middle
I have a few words of
advice for you here.

00:50:12.946 --> 00:50:17.496 A:middle
In particular first, the iOS
7 UI Transition Guide goes

00:50:17.496 --> 00:50:21.666 A:middle
into a fair amount of detail,
the nitty-gritty of doing this.

00:50:22.046 --> 00:50:23.246 A:middle
And it gives you
some code samples

00:50:23.386 --> 00:50:24.766 A:middle
that will make the
tasks somewhat easier.

00:50:26.046 --> 00:50:27.376 A:middle
It talks about some of
the pitfalls as well.

00:50:28.236 --> 00:50:29.496 A:middle
So I would encourage
you to check that out.

00:50:29.976 --> 00:50:30.516 A:middle
It's on our website.

00:50:30.516 --> 00:50:33.796 A:middle
I'm going to be giving
you a link in a moment.

00:50:33.936 --> 00:50:36.316 A:middle
Jason mentioned earlier that
Auto Layout will help you deal

00:50:36.316 --> 00:50:38.596 A:middle
with metrics, that's
absolutely true.

00:50:39.076 --> 00:50:41.856 A:middle
But it's really essential
in dealing

00:50:41.856 --> 00:50:44.916 A:middle
with supporting both
iOS 6 and iOS 7.

00:50:45.326 --> 00:50:47.076 A:middle
It will do so much of the
heavy lifting for you.

00:50:47.596 --> 00:50:50.226 A:middle
So if you've already adopted
Auto Layout, I think you'll find

00:50:50.226 --> 00:50:52.636 A:middle
that at least around
standard controls and bars,

00:50:52.816 --> 00:50:54.656 A:middle
a lot of the layout work
has taken cared for you.

00:50:54.656 --> 00:50:56.926 A:middle
And if you haven't already
adopted Auto Layout,

00:50:57.446 --> 00:51:01.186 A:middle
now might be a good
time to start.

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

00:50:57.446 --> 00:51:01.186 A:middle
now might be a good
time to start.

00:51:01.386 --> 00:51:07.206 A:middle
Finally, as you're considering
design for your application,

00:51:08.696 --> 00:51:10.716 A:middle
perhaps reviewing the themes
we've been discussing today:

00:51:10.716 --> 00:51:15.106 A:middle
a lot of what's new in
iOS 7 is not aesthetic.

00:51:15.956 --> 00:51:16.576 A:middle
It's structural.

00:51:17.106 --> 00:51:24.106 A:middle
And so, as you consider the
design, I would encourage you

00:51:24.106 --> 00:51:28.156 A:middle
to consider a user interface
which is structurally

00:51:28.556 --> 00:51:33.106 A:middle
in the spirit of iOS 7, even
if it's not aesthetically

00:51:33.686 --> 00:51:35.446 A:middle
in the spirit of iOS 7 on iOS 6.

00:51:36.746 --> 00:51:39.676 A:middle
So start with the structure
and get the aesthetics right

00:51:39.676 --> 00:51:40.896 A:middle
on iOS 7, too, of course.

00:51:41.456 --> 00:51:45.586 A:middle
And then move the structure
backwards to iOS 6 rather

00:51:45.586 --> 00:51:47.866 A:middle
than taking an iOS
6 application,

00:51:48.666 --> 00:51:50.206 A:middle
keeping all of its
structure the same,

00:51:51.606 --> 00:51:54.696 A:middle
and moving the aesthetics
to iOS 7's style.

00:51:55.886 --> 00:51:59.306 A:middle
I think that will yield a less
satisfying result for users.

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

00:52:00.036 --> 00:52:05.316 A:middle
Now, if you have more questions
about this topic or any

00:52:05.316 --> 00:52:06.766 A:middle
of the things that we've
been discussing today,

00:52:07.436 --> 00:52:09.346 A:middle
I'd encourage you to email
Jake Behrens, the gentlemen

00:52:09.346 --> 00:52:10.076 A:middle
on the right over here.

00:52:10.616 --> 00:52:12.816 A:middle
His email address is right there
and he'll be happy to help you

00:52:12.856 --> 00:52:13.546 A:middle
with anything you need.

00:52:14.376 --> 00:52:15.976 A:middle
The Transition Guide
is available

00:52:15.976 --> 00:52:16.906 A:middle
on our developer website.

00:52:17.806 --> 00:52:19.026 A:middle
And, of course, we encourage you

00:52:19.026 --> 00:52:20.056 A:middle
to help each other
on the forums.

00:52:21.186 --> 00:52:22.906 A:middle
Now we've pointed you at
a lot of sessions today.

00:52:23.596 --> 00:52:26.466 A:middle
These are a few of the ones
we think are most important.

00:52:27.146 --> 00:52:30.066 A:middle
And right up next, Chris Parker
will be telling you about all

00:52:30.066 --> 00:52:32.076 A:middle
of the wonderful things
we've added to our APIs

00:52:32.076 --> 00:52:35.346 A:middle
that are not specifically of
how the new user interface.

00:52:36.456 --> 00:52:38.516 A:middle
And so we're really
excited about that as well.

00:52:39.016 --> 00:52:48.720 A:middle
[ Silence ]