210.srt

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

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

00:00:09.956 --> 00:00:14.496 A:middle
>> Hi. I'm Ian Baird, iOS
Text Kit Lead Engineer.

00:00:15.056 --> 00:00:16.966 A:middle
And today, I would
like to talk to you

00:00:16.966 --> 00:00:20.546 A:middle
about what I personally think
is one of the coolest features

00:00:21.036 --> 00:00:23.246 A:middle
in iOS 7, and I know
you're going to want

00:00:23.246 --> 00:00:24.826 A:middle
to use it in your app.

00:00:24.956 --> 00:00:28.766 A:middle
I want to introduce
you to Text Kit.

00:00:30.956 --> 00:00:34.036 A:middle
First, let's lay out an
agenda for today's talk.

00:00:35.006 --> 00:00:37.166 A:middle
We're going to talk a little
bit about the motivation,

00:00:37.516 --> 00:00:40.786 A:middle
why we created Text Kit.

00:00:40.996 --> 00:00:44.306 A:middle
Next, we're going to talk
about what is Text Kit,

00:00:44.616 --> 00:00:46.846 A:middle
how it's composed, and
why you should care.

00:00:47.556 --> 00:00:54.326 A:middle
And then we're going to give
you a quick tour of some

00:00:54.326 --> 00:00:55.956 A:middle
of the headline features
in Text Kit,

00:00:55.956 --> 00:00:57.926 A:middle
and I think you're
going to be impressed.

00:00:59.346 --> 00:01:00.636 A:middle
And finally, we're going to wrap

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

00:00:59.346 --> 00:01:00.636 A:middle
And finally, we're going to wrap

00:01:00.636 --> 00:01:05.396 A:middle
up with an awesome demo
showing you how to use

00:01:05.636 --> 00:01:10.036 A:middle
and display Rich Text inside
of your app in noble ways

00:01:10.036 --> 00:01:12.806 A:middle
that you can only
do using iOS 7.

00:01:14.396 --> 00:01:15.566 A:middle
So let's get started.

00:01:15.986 --> 00:01:16.626 A:middle
Motivation.

00:01:17.296 --> 00:01:19.326 A:middle
Why did we do Text Kit?

00:01:20.636 --> 00:01:24.256 A:middle
Well, quite simply, we
needed it to realize the type

00:01:24.256 --> 00:01:30.226 A:middle
of graphically heavy and complex
designs that you see in iOS 7.

00:01:30.866 --> 00:01:38.196 A:middle
In the beginning,
we had NSString --

00:01:38.196 --> 00:01:41.916 A:middle
sorry, we had String
Drawing and we had WebKit

00:01:42.476 --> 00:01:45.696 A:middle
which were both based on
Core Text and Core Graphics.

00:01:46.216 --> 00:01:50.826 A:middle
And upon the stack, we were
able to build almost all

00:01:50.826 --> 00:01:53.146 A:middle
of the UIText components.

00:01:53.686 --> 00:01:55.926 A:middle
And this worked really
well for many people.

00:01:55.926 --> 00:01:58.266 A:middle
And like yourself, I was
a third-party developer

00:01:58.546 --> 00:02:00.786 A:middle
and I made great
apps using the stack.

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

00:01:58.546 --> 00:02:00.786 A:middle
and I made great
apps using the stack.

00:02:00.786 --> 00:02:03.926 A:middle
But occasionally,
it wasn't enough.

00:02:04.776 --> 00:02:07.466 A:middle
You'd have to drop down to
Core Text to turn on kerning

00:02:08.006 --> 00:02:10.226 A:middle
or to have ligated glyphs.

00:02:11.226 --> 00:02:16.866 A:middle
And as we all know, Core
Text is very advanced.

00:02:17.436 --> 00:02:19.346 A:middle
I read your tweets.

00:02:19.576 --> 00:02:20.736 A:middle
I saw what you guys said.

00:02:22.376 --> 00:02:24.986 A:middle
As a matter of fact,
somebody even called it a rite

00:02:25.686 --> 00:02:27.586 A:middle
of passage.

00:02:27.706 --> 00:02:30.946 A:middle
And this complexity is really
just inherent in the system

00:02:31.186 --> 00:02:34.696 A:middle
because Core Text is an
advanced Unicode layout engine.

00:02:35.796 --> 00:02:38.976 A:middle
You use it to build
a complex text system

00:02:39.576 --> 00:02:42.206 A:middle
or a web toolkit on top of it.

00:02:42.536 --> 00:02:46.606 A:middle
It's really overkill to use it
to render a label especially

00:02:46.606 --> 00:02:48.746 A:middle
when all you want to
do is kern your text.

00:02:50.076 --> 00:02:54.626 A:middle
So that being said, the
great thing about Text Kit

00:02:54.806 --> 00:02:59.656 A:middle
and Text Kit's design is that if
you've invested the time to come

00:02:59.656 --> 00:03:04.436 A:middle
up to speed on Core Text,
this time is not lost.

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

00:02:59.656 --> 00:03:04.436 A:middle
up to speed on Core Text,
this time is not lost.

00:03:04.916 --> 00:03:06.206 A:middle
The way the system is layered,

00:03:06.536 --> 00:03:10.096 A:middle
most concepts are Toll-Free
Bridged to Text Kit.

00:03:10.716 --> 00:03:14.926 A:middle
You can use a CTFont for a
UIFont, a UIFont descriptor

00:03:15.236 --> 00:03:16.586 A:middle
for a CTFont descriptor.

00:03:16.696 --> 00:03:17.476 A:middle
It's that easy.

00:03:18.516 --> 00:03:23.856 A:middle
[ Applause ]

00:03:24.356 --> 00:03:26.546 A:middle
You know what, if you
couldn't use Core Text,

00:03:28.006 --> 00:03:31.526 A:middle
a lot of you would embed
rich web content inside

00:03:31.526 --> 00:03:32.416 A:middle
of your application.

00:03:32.926 --> 00:03:33.776 A:middle
And this is great.

00:03:34.396 --> 00:03:38.106 A:middle
UIWebView is awesome for
embedding web content.

00:03:38.606 --> 00:03:42.146 A:middle
And the reason it's awesome is
because it's built on WebKit

00:03:42.636 --> 00:03:46.676 A:middle
and WebKit is the preeminent
HTML rendering system

00:03:46.676 --> 00:03:47.756 A:middle
for the mobile platform.

00:03:47.936 --> 00:03:50.346 A:middle
It's awesome, it kicks ass.

00:03:51.016 --> 00:03:52.836 A:middle
Unfortunately, there
are a couple of places

00:03:52.836 --> 00:03:55.836 A:middle
where you can't really use
it, like in ScrollViews.

00:03:56.486 --> 00:03:59.366 A:middle
And this had unfortunate
consequences

00:03:59.946 --> 00:04:03.286 A:middle
for UIText components
that were built on top

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

00:03:59.946 --> 00:04:03.286 A:middle
for UIText components
that were built on top

00:04:03.286 --> 00:04:04.826 A:middle
of WebViews like TextView.

00:04:05.126 --> 00:04:07.886 A:middle
It made it really hard
to use them in places

00:04:07.926 --> 00:04:11.636 A:middle
like collection view or
table view cells or anything

00:04:11.636 --> 00:04:13.086 A:middle
which required animations.

00:04:14.356 --> 00:04:18.396 A:middle
So we were faced with all
these challenges and we looked

00:04:18.396 --> 00:04:20.245 A:middle
around the company to
see what we could do.

00:04:20.245 --> 00:04:23.976 A:middle
How could we expose
the power or Core Text

00:04:24.286 --> 00:04:28.806 A:middle
without exposing our developers
to the necessary complexity

00:04:28.906 --> 00:04:31.506 A:middle
of an advanced Unicode
layout engine?

00:04:32.266 --> 00:04:34.576 A:middle
And I think you're going
to love our answer to this.

00:04:35.426 --> 00:04:40.826 A:middle
Our answer to this
problem is Text Kit.

00:04:42.276 --> 00:04:43.596 A:middle
So what is Text Kit?

00:04:44.676 --> 00:04:47.566 A:middle
Well, if you are going
to take away one point

00:04:47.986 --> 00:04:52.096 A:middle
from my talk today, I'd like you
to know that Text Kit is a fast,

00:04:52.556 --> 00:04:55.446 A:middle
modern text layout
and rendering engine.

00:04:56.996 --> 00:05:00.206 A:middle
It's built on top of Core Text.

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

00:04:56.996 --> 00:05:00.206 A:middle
It's built on top of Core Text.

00:05:01.216 --> 00:05:02.436 A:middle
And so this is awesome.

00:05:02.606 --> 00:05:05.486 A:middle
It gives you all the power
and flexibility of Core Text

00:05:05.626 --> 00:05:09.116 A:middle
without exposing you
to the hairy API.

00:05:09.836 --> 00:05:12.636 A:middle
A hairy API which uses CF types

00:05:12.636 --> 00:05:14.126 A:middle
which as we know are
not necessarily --

00:05:14.126 --> 00:05:17.466 A:middle
aren't friendly or developer --
or easy for developers to use.

00:05:19.116 --> 00:05:22.956 A:middle
And even better,
it features great,

00:05:23.606 --> 00:05:26.396 A:middle
and I mean great
integration with UIKit.

00:05:27.006 --> 00:05:27.976 A:middle
What does this do for you?

00:05:33.076 --> 00:05:38.606 A:middle
Well, it gives you
everything that you want

00:05:38.686 --> 00:05:39.726 A:middle
because it's built --

00:05:40.876 --> 00:05:45.296 A:middle
everything, all of the
UIText components are built

00:05:45.586 --> 00:05:47.236 A:middle
on top of Text Kit.

00:05:48.516 --> 00:05:54.086 A:middle
[ Applause ]

00:05:54.586 --> 00:05:56.116 A:middle
And as I was saying
a moment ago,

00:05:56.416 --> 00:06:00.226 A:middle
this gives you complete control
over all of the text rendering

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

00:05:56.416 --> 00:06:00.226 A:middle
this gives you complete control
over all of the text rendering

00:06:01.006 --> 00:06:02.776 A:middle
in your UIText elements.

00:06:04.176 --> 00:06:07.266 A:middle
UITextField, UITextView,

00:06:07.566 --> 00:06:13.726 A:middle
and UILabel were completely
rebuilt on top of Text Kit.

00:06:14.206 --> 00:06:17.316 A:middle
And so this gives you seamless
integration with animations,

00:06:17.806 --> 00:06:20.386 A:middle
UICollectionView,
and UITableView.

00:06:20.586 --> 00:06:22.316 A:middle
You won't get white
flashes anymore.

00:06:22.316 --> 00:06:23.746 A:middle
Things scroll onto screen.

00:06:26.166 --> 00:06:30.256 A:middle
It also features an extensible
object-oriented architecture

00:06:30.776 --> 00:06:34.306 A:middle
with support for customization
features like subclassing,

00:06:36.816 --> 00:06:42.346 A:middle
delegation, and even has rich
support for notifications.

00:06:42.646 --> 00:06:46.996 A:middle
If you're already using UIKit
and other Cocoa frameworks,

00:06:47.116 --> 00:06:48.596 A:middle
you know how to use Text Kit.

00:06:49.316 --> 00:06:50.976 A:middle
You know how to bend
it to your will.

00:06:55.536 --> 00:06:57.326 A:middle
So, that's Text Kit.

00:06:58.346 --> 00:07:00.866 A:middle
The next thing I want to tell
you about today is I want

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

00:06:58.346 --> 00:07:00.866 A:middle
The next thing I want to tell
you about today is I want

00:07:00.866 --> 00:07:04.556 A:middle
to give you a high-level
overview of some

00:07:04.556 --> 00:07:07.006 A:middle
of the headline features
inside of Text Kit

00:07:07.336 --> 00:07:09.676 A:middle
and how I think you can
use them in your app.

00:07:11.106 --> 00:07:13.636 A:middle
And the first thing I'd like
to start out with is something

00:07:13.636 --> 00:07:14.976 A:middle
that was difficult to do

00:07:15.236 --> 00:07:18.166 A:middle
in years past using text
components we gave you.

00:07:19.076 --> 00:07:23.596 A:middle
Now, using Text Kit, it's easy
to create paginated layouts.

00:07:24.176 --> 00:07:27.266 A:middle
It's easy to lay
out text in columns.

00:07:29.146 --> 00:07:31.096 A:middle
Text wrapping around
arbitrary figures

00:07:31.096 --> 00:07:35.276 A:middle
and shapes, that's simple too.

00:07:35.516 --> 00:07:39.386 A:middle
And again, as I said, you
even have superior control

00:07:39.626 --> 00:07:43.816 A:middle
over Rich Text editing inside
of your app, and this allows you

00:07:43.816 --> 00:07:48.716 A:middle
to have access to features
like interactive text coloring.

00:07:49.026 --> 00:07:52.636 A:middle
As the user types into your
app, you can change attributes.

00:07:53.186 --> 00:07:59.646 A:middle
Let's pretend I'm building
an interactive client

00:07:59.936 --> 00:08:02.876 A:middle
for a popular internet
messaging service.

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

00:07:59.936 --> 00:08:02.876 A:middle
for a popular internet
messaging service.

00:08:04.606 --> 00:08:06.106 A:middle
Just pretend, this
is hypothetical.

00:08:07.676 --> 00:08:11.096 A:middle
I type in my friend's handle,
and it just sort of sits there

00:08:11.096 --> 00:08:12.806 A:middle
in the content, just
blending in.

00:08:13.386 --> 00:08:15.516 A:middle
And you know what I'd like
to do, I'd like to view this

00:08:15.516 --> 00:08:18.866 A:middle
with meaning, I'd like to make
a pop out to user by coloring it

00:08:18.936 --> 00:08:20.956 A:middle
and making it stand out from
the rest of the content.

00:08:21.326 --> 00:08:25.846 A:middle
This is now easy to do with Text
Kit, just a few lines of code.

00:08:27.636 --> 00:08:31.246 A:middle
Text folding is also
easy to accomplish

00:08:31.246 --> 00:08:34.486 A:middle
with just a few lines
of code in Text Kit.

00:08:35.785 --> 00:08:38.666 A:middle
And next, this is one of the
features I think you're going

00:08:38.666 --> 00:08:41.376 A:middle
to think is the coolest,
custom truncation.

00:08:42.635 --> 00:08:45.636 A:middle
Well, the great thing about the
iPhone and one of the reasons

00:08:45.636 --> 00:08:47.836 A:middle
that we love it is that
it fits in your pocket.

00:08:48.566 --> 00:08:51.496 A:middle
The downside of that is the
screen is incredibly small,

00:08:52.826 --> 00:08:55.116 A:middle
even on the new iPhone 5.

00:08:56.486 --> 00:09:00.546 A:middle
And sometimes, especially
when you're using some

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

00:08:56.486 --> 00:09:00.546 A:middle
And sometimes, especially
when you're using some

00:09:00.546 --> 00:09:04.256 A:middle
of the new text styles,
not all of the content

00:09:04.256 --> 00:09:06.746 A:middle
that your user has
selected or you want to show

00:09:06.746 --> 00:09:09.046 A:middle
to the user will actually
fit on that display.

00:09:10.076 --> 00:09:12.476 A:middle
So in the past, you were
stuck with tail truncation,

00:09:12.756 --> 00:09:14.936 A:middle
head truncation, or
middle truncation.

00:09:15.636 --> 00:09:17.626 A:middle
Using Text Kit and
a few lines of code,

00:09:17.626 --> 00:09:24.836 A:middle
you can have custom
truncation now.

00:09:25.406 --> 00:09:29.986 A:middle
Also enhanced in iOS 7, all
of these techniques work

00:09:29.986 --> 00:09:32.686 A:middle
in standard controls, you
don't have to subclass TextView

00:09:32.686 --> 00:09:34.636 A:middle
to have custom truncation
or text folding.

00:09:35.106 --> 00:09:35.596 A:middle
Isn't that cool?

00:09:36.516 --> 00:09:40.746 A:middle
[ Applause ]

00:09:41.246 --> 00:09:44.686 A:middle
And building on our
heritage from iOS 6,

00:09:44.686 --> 00:09:46.976 A:middle
in the attributed text support
that we've brought to you

00:09:46.976 --> 00:09:51.516 A:middle
in iOS 6, we have now extended
UITextView and UITextField

00:09:51.516 --> 00:09:53.926 A:middle
to support all text attributes.

00:09:54.516 --> 00:09:58.566 A:middle
[ Applause ]

00:09:59.066 --> 00:10:01.206 A:middle
And as Toby and Jason
and everyone else

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

00:09:59.066 --> 00:10:01.206 A:middle
And as Toby and Jason
and everyone else

00:10:01.206 --> 00:10:04.146 A:middle
with Toby this week,
we've extended kerning

00:10:04.146 --> 00:10:05.516 A:middle
and ligature support everywhere

00:10:05.516 --> 00:10:06.836 A:middle
and we've turned
it on by default.

00:10:07.446 --> 00:10:14.556 A:middle
And we've even given you
simple single attribute access

00:10:15.056 --> 00:10:18.096 A:middle
to advanced text
effects like Letterpress.

00:10:18.656 --> 00:10:22.666 A:middle
If you want to know more
about this, I would suggest

00:10:22.666 --> 00:10:25.526 A:middle
that you see the session
Advanced Text Layouts

00:10:25.686 --> 00:10:27.626 A:middle
and Effects with Text Kit.

00:10:28.976 --> 00:10:33.126 A:middle
So, the next thing I'm going to
tell you about is another thing

00:10:33.126 --> 00:10:36.166 A:middle
that I think is just
incredibly awesome in Text Kit.

00:10:36.616 --> 00:10:39.136 A:middle
And Jason and Toby
and everyone else

00:10:39.136 --> 00:10:41.186 A:middle
and Chris have been
talking about this all week.

00:10:42.156 --> 00:10:42.976 A:middle
It's Dynamic Type.

00:10:43.796 --> 00:10:44.656 A:middle
What's Dynamic Type?

00:10:45.576 --> 00:10:48.806 A:middle
Well, Dynamic Type is a
set of designed type styles

00:10:49.226 --> 00:10:52.146 A:middle
which are made for you
to use in your app.

00:10:53.336 --> 00:10:57.726 A:middle
They're optimized for
legibility, so they're easy

00:10:57.726 --> 00:10:59.106 A:middle
for your users to read.

00:10:59.716 --> 00:11:02.666 A:middle
And again, it's user-centric.

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

00:10:59.716 --> 00:11:02.666 A:middle
And again, it's user-centric.

00:11:02.666 --> 00:11:04.756 A:middle
Your user is able
to pick the size.

00:11:05.296 --> 00:11:09.226 A:middle
They can go small,
medium, or large.

00:11:09.826 --> 00:11:11.816 A:middle
And there's rich support

00:11:11.816 --> 00:11:15.106 A:middle
for accessibility built
right in to Dynamic Type.

00:11:15.656 --> 00:11:20.206 A:middle
And there's great support
for Dynamic Type in Xcode 5.

00:11:23.356 --> 00:11:28.336 A:middle
So, to really utilize Dynamic
Type to its fullest potential,

00:11:28.826 --> 00:11:30.116 A:middle
you're going to want to know

00:11:30.116 --> 00:11:32.256 A:middle
about the next feature
I'm about to show you.

00:11:33.806 --> 00:11:34.726 A:middle
Font descriptors.

00:11:35.926 --> 00:11:37.976 A:middle
Now, for those of you
coming from Core Text,

00:11:38.426 --> 00:11:40.306 A:middle
this is not necessarily
all that new.

00:11:40.836 --> 00:11:45.526 A:middle
But for the rest of us
who have been using iOS 6

00:11:45.526 --> 00:11:48.706 A:middle
and previous versions,
it's really, really cool.

00:11:49.546 --> 00:11:52.796 A:middle
Font descriptors are a way of
specifying one or more fonts,

00:11:53.436 --> 00:11:55.326 A:middle
and you can interact
with the font system

00:11:55.696 --> 00:11:57.506 A:middle
by using a font descriptor
for query --

00:11:57.506 --> 00:12:02.746 A:middle
to query for a font and it will
return the results in the form

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

00:11:57.506 --> 00:12:02.746 A:middle
to query for a font and it will
return the results in the form

00:12:02.836 --> 00:12:05.906 A:middle
of more font descriptors which
then you can hand to the system

00:12:05.906 --> 00:12:08.286 A:middle
and tell it, "Hey, create a
font for this font descriptor."

00:12:09.406 --> 00:12:11.436 A:middle
This is a big improvement
over the past.

00:12:11.436 --> 00:12:15.386 A:middle
In the past, you have to create
a font, change the point size,

00:12:15.936 --> 00:12:18.196 A:middle
apply a trait, a symbolic
trait of some variety,

00:12:18.196 --> 00:12:19.486 A:middle
and everytime you
were doing this,

00:12:19.536 --> 00:12:21.106 A:middle
the system was creating a font

00:12:21.336 --> 00:12:23.766 A:middle
to back this UIFont
instance in the background.

00:12:24.496 --> 00:12:26.306 A:middle
You don't have to do that
with font descriptors.

00:12:26.306 --> 00:12:28.116 A:middle
They're super cheap
and lightweight.

00:12:29.216 --> 00:12:30.146 A:middle
They can be archived.

00:12:30.786 --> 00:12:34.966 A:middle
And if you want to know more
about using fonts with Text Kit,

00:12:35.206 --> 00:12:38.626 A:middle
I urge you to see the session
Using Fonts with Text Kit.

00:12:38.956 --> 00:12:40.576 A:middle
It's going to be really awesome.

00:12:41.266 --> 00:12:45.346 A:middle
So you have these fonts and
they're working well for you.

00:12:46.296 --> 00:12:51.926 A:middle
But, maybe you get a design that
says, "The new fonts are great

00:12:51.926 --> 00:12:53.746 A:middle
but we just need bold here."

00:12:53.956 --> 00:12:54.946 A:middle
How are you going to do that?

00:12:54.946 --> 00:12:57.276 A:middle
Well, you're going to do
that with symbolic traits.

00:12:57.806 --> 00:13:02.936 A:middle
You can see here we have our
regular unadorned type styles,

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

00:12:57.806 --> 00:13:02.936 A:middle
You can see here we have our
regular unadorned type styles,

00:13:03.246 --> 00:13:04.156 A:middle
a nice list of them.

00:13:04.876 --> 00:13:08.076 A:middle
Let's apply bold and italic
attributes, and you can see --

00:13:08.076 --> 00:13:09.556 A:middle
or sorry, symbolic traits

00:13:10.016 --> 00:13:12.986 A:middle
and you can see what
it does to those fonts.

00:13:14.346 --> 00:13:17.036 A:middle
We also have support for the
expanded and condensed traits.

00:13:17.556 --> 00:13:20.866 A:middle
And if you want to
affect the line spacing,

00:13:21.196 --> 00:13:22.536 A:middle
we even have traits for that.

00:13:23.076 --> 00:13:26.076 A:middle
For example, the
tight trait allows you

00:13:26.076 --> 00:13:29.006 A:middle
to pack more text
into a smaller area.

00:13:29.696 --> 00:13:31.976 A:middle
Now, when you do this,
and I wouldn't recommend

00:13:31.976 --> 00:13:34.436 A:middle
that you do it all the time,
but you can do it in places

00:13:34.486 --> 00:13:38.346 A:middle
like summary fields where
information density is

00:13:38.346 --> 00:13:39.856 A:middle
at a premium for your user,

00:13:40.156 --> 00:13:42.946 A:middle
and you don't want sacrificing
a little bit of legibility.

00:13:42.946 --> 00:13:44.946 A:middle
So you wouldn't want to
do this all over your app.

00:13:46.576 --> 00:13:50.956 A:middle
And if you're embedding rich
web content inside your app,

00:13:51.256 --> 00:13:52.526 A:middle
I've got great news for you.

00:13:52.916 --> 00:13:54.986 A:middle
All of this is supported
by WebKit.

00:13:55.556 --> 00:13:59.876 A:middle
And if you want to know more
about the great enhancements

00:13:59.876 --> 00:14:03.056 A:middle
to fonts in WebKit, you should
see the session What's New

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

00:13:59.876 --> 00:14:03.056 A:middle
to fonts in WebKit, you should
see the session What's New

00:14:03.056 --> 00:14:05.816 A:middle
in Safari and WebKit
for developers.

00:14:07.546 --> 00:14:12.286 A:middle
Next, I'd like to show you how
we built one of the components

00:14:12.766 --> 00:14:16.316 A:middle
in the UIText world,
the TextView.

00:14:17.556 --> 00:14:22.596 A:middle
Here's our simple TextView and
it has a nursery rhyme in it.

00:14:23.216 --> 00:14:24.876 A:middle
Well, how was it built now?

00:14:24.876 --> 00:14:26.926 A:middle
In the past, it had a
WebView backing everything.

00:14:27.496 --> 00:14:29.676 A:middle
The first thing you're
going to see

00:14:29.676 --> 00:14:33.246 A:middle
when you pull it apart is
the NSTextContainer instance.

00:14:33.596 --> 00:14:38.826 A:middle
NSTextContainer is giving the
NSLayoutManager the bounds,

00:14:38.826 --> 00:14:41.686 A:middle
the geometry to render
the text into.

00:14:42.626 --> 00:14:47.216 A:middle
And NSLayoutManager is
taking all of the text

00:14:47.436 --> 00:14:53.456 A:middle
from your NSTextStorage
and turning it into lines

00:14:53.456 --> 00:14:55.696 A:middle
of glyphs inside
of your TextView.

00:14:56.826 --> 00:14:59.266 A:middle
But now that you understand
how TextView is built,

00:14:59.576 --> 00:15:01.236 A:middle
this unlocks other
features for you.

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

00:14:59.576 --> 00:15:01.236 A:middle
this unlocks other
features for you.

00:15:02.236 --> 00:15:03.606 A:middle
Like, again, when
we were talking

00:15:03.606 --> 00:15:06.766 A:middle
about exclusion paths before,
the way you do this inside

00:15:06.766 --> 00:15:09.496 A:middle
of a TextView, the way you
get support for simple figures

00:15:09.496 --> 00:15:12.336 A:middle
and cutouts in your
UITextView is

00:15:12.996 --> 00:15:15.056 A:middle
to first create an
exclusion path.

00:15:15.056 --> 00:15:17.836 A:middle
In this case, we're creating an
exclusion path for a butterfly.

00:15:18.586 --> 00:15:20.676 A:middle
And then you would take
this exclusion path,

00:15:21.086 --> 00:15:24.446 A:middle
you'd pack into an array, and
you'd set it on the text --

00:15:24.446 --> 00:15:26.676 A:middle
the exclusion path's
property of the text container

00:15:26.676 --> 00:15:28.586 A:middle
which is associated
with your TextView.

00:15:28.586 --> 00:15:30.436 A:middle
And that's all you'd have to do.

00:15:30.606 --> 00:15:33.416 A:middle
At that point, the text
just magically wraps

00:15:33.416 --> 00:15:34.136 A:middle
around your figure.

00:15:34.236 --> 00:15:35.166 A:middle
It's that simple.

00:15:36.516 --> 00:15:40.526 A:middle
[ Applause ]

00:15:41.026 --> 00:15:41.386 A:middle
Thank you.

00:15:42.916 --> 00:15:44.616 A:middle
It's an easy and
declarative model.

00:15:46.086 --> 00:15:47.846 A:middle
You'll notice, there
was no subclassing

00:15:47.846 --> 00:15:49.106 A:middle
or delegation involved.

00:15:49.136 --> 00:15:53.416 A:middle
So let's talk a bit more
about text container.

00:15:53.776 --> 00:15:54.996 A:middle
What is a text container?

00:15:55.576 --> 00:15:59.006 A:middle
A text container defines a
coordinate system and geometry

00:15:59.286 --> 00:16:00.806 A:middle
for an NSLayoutManager.

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

00:15:59.286 --> 00:16:00.806 A:middle
for an NSLayoutManager.

00:16:01.646 --> 00:16:04.586 A:middle
As we talked about,
exclusion paths live entirely

00:16:04.836 --> 00:16:08.686 A:middle
in the NSTextContainer's
coordinate space.

00:16:09.226 --> 00:16:11.756 A:middle
Hit-testing is also done

00:16:11.756 --> 00:16:13.616 A:middle
in the NSTextContainer's
coordinate space,

00:16:13.616 --> 00:16:16.206 A:middle
and I'm teasing another big
feature that we've enabled

00:16:16.206 --> 00:16:19.146 A:middle
for you in TextViews in iOS 7.

00:16:19.806 --> 00:16:21.606 A:middle
Hit-testing.

00:16:22.416 --> 00:16:24.536 A:middle
In the past, whenever
we laid out text --

00:16:25.516 --> 00:16:29.426 A:middle
[ Applause ]

00:16:29.926 --> 00:16:30.716 A:middle
I'm glad you like it.

00:16:31.776 --> 00:16:33.746 A:middle
In the past, when
we laid out text,

00:16:33.966 --> 00:16:36.176 A:middle
we immediately threw away
all of the information,

00:16:36.276 --> 00:16:39.626 A:middle
all of the extents, the glyph
IDs, everything just went away

00:16:39.626 --> 00:16:41.276 A:middle
and we gave you back a bit map.

00:16:41.976 --> 00:16:45.236 A:middle
Now, NSLayoutManager
keeps all of this around.

00:16:45.556 --> 00:16:47.666 A:middle
And this is useful
for you because now,

00:16:47.666 --> 00:16:50.966 A:middle
if you want to resolve a tap to
a character index, all you have

00:16:50.966 --> 00:16:52.296 A:middle
to do is call this API.

00:16:53.016 --> 00:16:54.166 A:middle
User's finger comes down.

00:16:55.326 --> 00:16:57.736 A:middle
You get the index into
your text storage, and bam,

00:16:57.846 --> 00:16:58.736 A:middle
you have your character.

00:16:58.886 --> 00:16:59.956 A:middle
It's that simple.

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

00:17:00.136 --> 00:17:05.726 A:middle
In order to understand the next
few features, we have to go

00:17:05.726 --> 00:17:07.376 A:middle
over some front matter
about glyphs.

00:17:07.866 --> 00:17:08.736 A:middle
What is a glyph?

00:17:09.846 --> 00:17:12.665 A:middle
A glyph represents
one or more characters

00:17:12.665 --> 00:17:14.236 A:middle
on the screen or
the printed page.

00:17:14.906 --> 00:17:17.106 A:middle
An important thing to
remember about glyphs is

00:17:17.106 --> 00:17:21.006 A:middle
that there's not necessarily a
one-to-one mapping from a glyph

00:17:21.546 --> 00:17:23.786 A:middle
to a set of characters
or vice-versa.

00:17:24.746 --> 00:17:27.566 A:middle
Now, you may wonder, "How
do I do this mapping then?"

00:17:28.066 --> 00:17:31.596 A:middle
Well, the answer is our
friend again, NSLayoutManager.

00:17:32.116 --> 00:17:37.506 A:middle
NSLayoutManager maintains
this mapping of glyph ranges

00:17:37.676 --> 00:17:42.246 A:middle
to character ranges and
it's really easy to use.

00:17:42.706 --> 00:17:47.826 A:middle
Just call this API, pass in the
glyph range and it will map,

00:17:48.046 --> 00:17:50.696 A:middle
in the case, the
FFI ligated glyph

00:17:51.156 --> 00:17:53.436 A:middle
to the three characters
it's representing

00:17:53.776 --> 00:17:54.896 A:middle
and it can go the other way.

00:17:55.136 --> 00:17:55.896 A:middle
It's that easy.

00:17:55.896 --> 00:17:58.856 A:middle
And it will maintain this
mapping through edits,

00:17:59.206 --> 00:18:02.486 A:middle
programmatic manipulations,
attribute changes,

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

00:17:59.206 --> 00:18:02.486 A:middle
programmatic manipulations,
attribute changes,

00:18:02.486 --> 00:18:06.546 A:middle
whatever you do, NSLayoutManager
always stays up-to-date.

00:18:09.816 --> 00:18:11.546 A:middle
There are a whole host

00:18:11.766 --> 00:18:14.556 A:middle
of new interaction
features in TextView.

00:18:15.236 --> 00:18:17.526 A:middle
Now, in the past, you may say,
"Well, you can always interact

00:18:17.526 --> 00:18:19.426 A:middle
with links," and
that's absolutely true.

00:18:19.426 --> 00:18:23.386 A:middle
But what it necessitated was
it necessitated using data

00:18:23.386 --> 00:18:28.436 A:middle
detectors and putting in a
web style, maybe HTTP link.

00:18:29.026 --> 00:18:32.066 A:middle
What's new in iOS 7, and what
I think you're going to love,

00:18:32.336 --> 00:18:35.596 A:middle
is that you can turn
any arbitrary text range

00:18:36.466 --> 00:18:38.856 A:middle
into a link now using
NSLink attribute.

00:18:39.516 --> 00:18:43.226 A:middle
[ Applause ]

00:18:43.726 --> 00:18:46.536 A:middle
Associate a URL with
it, and now,

00:18:46.536 --> 00:18:49.776 A:middle
you have a rich interaction
model right out of the box

00:18:49.926 --> 00:18:52.796 A:middle
that your users are
going to love.

00:18:53.386 --> 00:18:55.596 A:middle
We still support data
detectors, they're there.

00:18:55.596 --> 00:18:58.366 A:middle
You see, we have the
Moscone Center address.

00:18:59.236 --> 00:19:01.226 A:middle
The user taps or long-presses,

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

00:18:59.236 --> 00:19:01.226 A:middle
The user taps or long-presses,

00:19:01.556 --> 00:19:06.176 A:middle
and up comes an action sheet
filled with useful interactions

00:19:06.176 --> 00:19:07.346 A:middle
for the user to choose from.

00:19:08.006 --> 00:19:12.236 A:middle
Now, in order to understand the
next feature, I want to tell you

00:19:12.236 --> 00:19:14.096 A:middle
about text attachments.

00:19:14.556 --> 00:19:17.066 A:middle
The text attachments have
been a long time coming

00:19:17.066 --> 00:19:19.996 A:middle
to our platform, but they're
really cool and really useful.

00:19:21.016 --> 00:19:23.346 A:middle
And they're totally distinct
from exclusion paths,

00:19:23.626 --> 00:19:24.636 A:middle
and I'm going to tell you why.

00:19:25.626 --> 00:19:28.096 A:middle
Attachments live with your data.

00:19:28.466 --> 00:19:31.046 A:middle
They actually live inside
of your NSTextStorage.

00:19:31.286 --> 00:19:34.116 A:middle
There's a character
which is interpreted

00:19:34.116 --> 00:19:37.456 A:middle
and has the attachment
data associated with it.

00:19:37.456 --> 00:19:39.206 A:middle
They can refer to an
image or something else.

00:19:39.876 --> 00:19:43.316 A:middle
An exclusion path lives
inside of the text container.

00:19:43.406 --> 00:19:45.626 A:middle
It actually changes the geometry

00:19:45.626 --> 00:19:48.796 A:middle
that the layout manager
uses to flow text into.

00:19:49.006 --> 00:19:49.956 A:middle
That's the difference.

00:19:50.996 --> 00:19:53.276 A:middle
So what do you generally
use a text attachment for?

00:19:53.566 --> 00:19:56.546 A:middle
A text attachment is usually
used for inline images.

00:19:57.976 --> 00:20:00.966 A:middle
It affects text layout and
it's affected by text layout.

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

00:19:57.976 --> 00:20:00.966 A:middle
It affects text layout and
it's affected by text layout.

00:20:02.426 --> 00:20:05.706 A:middle
And, of course, it
contains the geometry

00:20:06.176 --> 00:20:10.456 A:middle
for the contained data
including a baseline offset.

00:20:10.606 --> 00:20:13.226 A:middle
NSLayoutManager is going
to use this information

00:20:13.556 --> 00:20:20.436 A:middle
to place the text attachment in
line with the rest of your data.

00:20:20.616 --> 00:20:24.636 A:middle
And, of course, it has another
simple interaction model.

00:20:25.436 --> 00:20:28.506 A:middle
The user long-presses
on the picture,

00:20:28.746 --> 00:20:30.596 A:middle
and up comes another
action sheet.

00:20:30.866 --> 00:20:33.006 A:middle
Again, this is built
right into the system.

00:20:34.026 --> 00:20:36.266 A:middle
To show you some of the
stuff and how you can use it

00:20:36.266 --> 00:20:38.976 A:middle
in your app, I'm going to invite
my colleague Jordan Breeding

00:20:38.976 --> 00:20:40.966 A:middle
to the stage to give
you guys a quick demo.

00:20:42.516 --> 00:20:48.416 A:middle
[ Applause ]

00:20:48.916 --> 00:20:49.446 A:middle
>> Thank you, Ian.

00:20:50.856 --> 00:20:51.966 A:middle
The first part of the demo we'd

00:20:51.966 --> 00:20:54.906 A:middle
like to show you today is the
show for our demo application.

00:20:55.726 --> 00:20:57.866 A:middle
As you can see, I already have
it running in the simulator.

00:20:58.786 --> 00:21:00.586 A:middle
What I'd like to call out is

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

00:20:58.786 --> 00:21:00.586 A:middle
What I'd like to call out is

00:21:00.586 --> 00:21:04.186 A:middle
that this collection view is
backed by collection view cells.

00:21:04.876 --> 00:21:07.546 A:middle
They contain UILabels
and UITextViews.

00:21:08.336 --> 00:21:08.786 A:middle
That's right.

00:21:09.216 --> 00:21:12.266 A:middle
It's a full-blown UITextViews
in collection view cells.

00:21:12.996 --> 00:21:13.856 A:middle
They scroll well.

00:21:14.236 --> 00:21:15.656 A:middle
There's no synchronization
issues.

00:21:15.966 --> 00:21:18.366 A:middle
I didn't have to deal
with any main thread

00:21:18.366 --> 00:21:19.966 A:middle
and web thread synchronization.

00:21:22.136 --> 00:21:25.196 A:middle
To show you that I didn't
actually do anything tricky,

00:21:25.806 --> 00:21:31.676 A:middle
I'm going to open my storyboard,
go into my cell, and now,

00:21:31.676 --> 00:21:34.876 A:middle
I'm showing you that inside
of my background container,

00:21:35.476 --> 00:21:40.436 A:middle
I have a UILabel and a
UITextView, and I'd also

00:21:40.436 --> 00:21:43.686 A:middle
like to call out a specific
feature that Ian pointed out.

00:21:45.006 --> 00:21:47.736 A:middle
New in Xcode 5, into
interface builder,

00:21:48.336 --> 00:21:52.336 A:middle
you can directly select the
text style that you would

00:21:52.336 --> 00:21:54.436 A:middle
like instead of the
old system choices.

00:21:54.856 --> 00:21:58.886 A:middle
In this case, I had selected
the text style of body

00:21:59.166 --> 00:22:01.916 A:middle
because this represents some
body text inside of our cells.

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

00:21:59.166 --> 00:22:01.916 A:middle
because this represents some
body text inside of our cells.

00:22:02.346 --> 00:22:06.796 A:middle
Now if I build and run again --

00:22:11.976 --> 00:22:15.106 A:middle
I can enter our first
section of the real demo.

00:22:15.846 --> 00:22:17.686 A:middle
This is the basic
interaction demo.

00:22:17.686 --> 00:22:21.166 A:middle
What we're showing you here
is that we have some blocks

00:22:21.166 --> 00:22:23.536 A:middle
of texts which do not
match any data detectors.

00:22:24.166 --> 00:22:26.316 A:middle
And if you go in right
now, you'll notice

00:22:26.316 --> 00:22:29.146 A:middle
that neither the phone
number nor the URL is

00:22:29.146 --> 00:22:30.036 A:middle
actually interactive.

00:22:30.566 --> 00:22:32.796 A:middle
We'd like to make
it interactive.

00:22:33.876 --> 00:22:37.396 A:middle
So we go back into Xcode,
into interface builder.

00:22:39.356 --> 00:22:42.446 A:middle
We select the view that
contains that data.

00:22:43.036 --> 00:22:48.376 A:middle
And just like in iOS 6, it's
as easy as turning on the links

00:22:49.156 --> 00:22:52.856 A:middle
and phone numbers data
detectors which I've just done.

00:22:54.226 --> 00:23:00.436 A:middle
Now, if I build and run,
building and running now,

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

00:22:54.226 --> 00:23:00.436 A:middle
Now, if I build and run,
building and running now,

00:23:02.256 --> 00:23:03.856 A:middle
going into basic interaction.

00:23:05.156 --> 00:23:09.506 A:middle
You'll notice that phone
numbers and URLs work perfectly.

00:23:10.146 --> 00:23:14.116 A:middle
Now, something that you
might have had to do

00:23:14.116 --> 00:23:17.686 A:middle
in the past is customize that
behavior that you just saw.

00:23:18.476 --> 00:23:20.626 A:middle
You might not want your
users to go to Safari

00:23:20.626 --> 00:23:22.226 A:middle
when they tap on
a particular link.

00:23:23.096 --> 00:23:25.116 A:middle
In the past, to achieve
this, many times,

00:23:25.116 --> 00:23:27.356 A:middle
you had to layout your
content in a UIWebView

00:23:27.826 --> 00:23:30.706 A:middle
and use the interaction
model with their delegates

00:23:31.166 --> 00:23:33.326 A:middle
to then force it to open
in your application.

00:23:34.476 --> 00:23:37.396 A:middle
I'd like to show you that
today, we've given you just

00:23:37.396 --> 00:23:40.636 A:middle
that directly in
UITextViews in iOS 7.

00:23:41.166 --> 00:23:45.256 A:middle
Going to go into the
view controller for this.

00:23:45.816 --> 00:23:50.836 A:middle
And what I'd like to
show you is right here,

00:23:51.936 --> 00:23:53.226 A:middle
I implement the delegate.

00:23:53.436 --> 00:23:54.296 A:middle
I've set myself

00:23:54.296 --> 00:23:57.266 A:middle
as the TextView's
delegate in my storyboard.

00:23:58.196 --> 00:23:59.306 A:middle
And as you can see here,

00:23:59.426 --> 00:24:03.286 A:middle
I just implement TextView should
interact with URL in range.

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

00:23:59.426 --> 00:24:03.286 A:middle
I just implement TextView should
interact with URL in range.

00:24:04.356 --> 00:24:09.366 A:middle
In this case, I compare the
host of the URL to www.apple.com

00:24:10.246 --> 00:24:11.306 A:middle
and if that's what it is,

00:24:11.726 --> 00:24:13.876 A:middle
then I open my own
WebViewController instead

00:24:13.876 --> 00:24:14.386 A:middle
of Safari.

00:24:16.276 --> 00:24:18.836 A:middle
Building and running
to show you that now.

00:24:20.586 --> 00:24:24.056 A:middle
And now, when you're user
goes to the apple URL,

00:24:24.436 --> 00:24:26.566 A:middle
you'll see that it opens
a WebViewController.

00:24:27.136 --> 00:24:28.946 A:middle
Your user stays in
your application,

00:24:29.246 --> 00:24:31.036 A:middle
doesn't leave your experience.

00:24:32.516 --> 00:24:36.356 A:middle
[ Applause ]

00:24:36.856 --> 00:24:41.006 A:middle
We thought you might like that.

00:24:41.216 --> 00:24:47.116 A:middle
Next, our designer gave us a
spec for an exclusion path demo.

00:24:47.276 --> 00:24:49.686 A:middle
Our designers specified
some body text upfront

00:24:50.166 --> 00:24:51.776 A:middle
and gave us a butterfly
image to put

00:24:51.776 --> 00:24:53.006 A:middle
on the bottom right-hand corner.

00:24:54.436 --> 00:24:56.876 A:middle
They also specified that we
should have a pan gesture

00:24:56.876 --> 00:24:59.826 A:middle
recognizer so that the user
could move the butterfly around.

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

00:25:01.956 --> 00:25:04.266 A:middle
The issue that you
have upfront is

00:25:04.266 --> 00:25:07.386 A:middle
that when the user moves
the butterfly, the butterfly

00:25:07.386 --> 00:25:10.276 A:middle
and its drop shadow affect
the text and overlay it.

00:25:11.216 --> 00:25:13.466 A:middle
We'd like to show you how
easy it is to fix that issue

00:25:13.796 --> 00:25:15.896 A:middle
in iOS 7 with UITextViews.

00:25:16.446 --> 00:25:21.026 A:middle
I'm going to go into my
exclusion path view controller.

00:25:24.456 --> 00:25:27.766 A:middle
First thing I'm going
to do is drop

00:25:27.766 --> 00:25:29.836 A:middle
in a method that
I wrote upfront.

00:25:30.906 --> 00:25:34.286 A:middle
This grabs my precalculated
Bezier Path for my butterfly.

00:25:34.776 --> 00:25:36.166 A:middle
In this case, I can
precalculate it

00:25:36.166 --> 00:25:38.286 A:middle
because the image never
changes, just its position.

00:25:39.266 --> 00:25:45.056 A:middle
I pull my plist out of my
bundle, then I need to make sure

00:25:45.056 --> 00:25:47.046 A:middle
that my image rect
for my butterfly is

00:25:47.046 --> 00:25:48.336 A:middle
in the correct coordinate space.

00:25:49.626 --> 00:25:52.966 A:middle
And finally, I transform
my Bezier Path to match

00:25:53.026 --> 00:25:55.876 A:middle
where the butterfly currently
is on screen and return

00:25:55.876 --> 00:25:59.376 A:middle
that Bezier Path here.

00:25:59.596 --> 00:26:03.786 A:middle
In viewDidLload, I'll use
the new one line support

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

00:25:59.596 --> 00:26:03.786 A:middle
In viewDidLload, I'll use
the new one line support

00:26:04.256 --> 00:26:10.656 A:middle
in UITextView to set the
exclusion paths then I'll handle

00:26:10.656 --> 00:26:13.026 A:middle
the case of layout
occurring again.

00:26:14.076 --> 00:26:15.696 A:middle
Whenever layout occurs, we know

00:26:15.696 --> 00:26:17.516 A:middle
that the butterfly could
have moved and we need

00:26:17.516 --> 00:26:19.646 A:middle
to match the Bezier
Path to the butterfly.

00:26:20.686 --> 00:26:22.796 A:middle
So, I dropped in
some code there,

00:26:23.746 --> 00:26:26.526 A:middle
do a viewDidLayout
subviews method and go ahead

00:26:26.526 --> 00:26:29.126 A:middle
and update the exclusion
paths there as well

00:26:29.416 --> 00:26:33.626 A:middle
on our UITextView's
text container.

00:26:33.706 --> 00:26:37.016 A:middle
Lastly, in our pan gesture
recognizer action method,

00:26:37.856 --> 00:26:40.276 A:middle
we know that the butterfly
has also moved in this case.

00:26:40.676 --> 00:26:42.696 A:middle
So again, we drop
in the one liner

00:26:42.696 --> 00:26:44.186 A:middle
to update the exclusion paths.

00:26:45.056 --> 00:26:46.976 A:middle
Now, I'll build and run.

00:26:51.886 --> 00:26:56.976 A:middle
And now, in the exclusion paths,
you can see how fluidly --

00:26:57.516 --> 00:27:03.606 A:middle
[ Applause ]

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

00:26:57.516 --> 00:27:03.606 A:middle
[ Applause ]

00:27:04.106 --> 00:27:05.276 A:middle
You can see how fluidly

00:27:05.276 --> 00:27:07.506 A:middle
that butterfly moved
throughout the text

00:27:07.566 --> 00:27:09.906 A:middle
and let everything
flow back around it.

00:27:11.636 --> 00:27:14.006 A:middle
So, what did you
see in that demo?

00:27:15.046 --> 00:27:17.366 A:middle
You saw that we still
support data detectors

00:27:17.396 --> 00:27:20.556 A:middle
for basic interaction in
TextViews but you also saw

00:27:20.766 --> 00:27:23.006 A:middle
that now you can
provide a delegate

00:27:23.106 --> 00:27:25.556 A:middle
and you can customize some
of your user's behavior

00:27:25.556 --> 00:27:27.616 A:middle
when they interact
with that information.

00:27:29.066 --> 00:27:33.296 A:middle
You saw brand new in iOS 7
that TextViews can be used

00:27:33.506 --> 00:27:36.316 A:middle
in collection view cells and
everything worked perfectly.

00:27:38.936 --> 00:27:41.656 A:middle
You saw how to use some
of the new text styles

00:27:41.656 --> 00:27:44.686 A:middle
in interface builder
and in Xcode.

00:27:45.146 --> 00:27:48.606 A:middle
You can also use them in code.

00:27:48.776 --> 00:27:52.806 A:middle
And lastly, you saw our one
line support for exclusion paths

00:27:52.976 --> 00:27:54.716 A:middle
so that you can make
great looking interfaces

00:27:54.716 --> 00:27:55.596 A:middle
for your users.

00:27:56.846 --> 00:28:00.786 A:middle
Next, I'd like to turn it back
over to my colleague, Ian Baird.

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

00:27:56.846 --> 00:28:00.786 A:middle
Next, I'd like to turn it back
over to my colleague, Ian Baird.

00:28:01.516 --> 00:28:06.616 A:middle
[ Applause ]

00:28:07.116 --> 00:28:08.266 A:middle
>> That was a great demo.

00:28:09.706 --> 00:28:12.626 A:middle
So now that you're faced
with all of this coolness,

00:28:13.526 --> 00:28:15.196 A:middle
the reality is probably
starting to sink

00:28:15.196 --> 00:28:18.696 A:middle
in that there might be some
work involved in realizing some

00:28:18.696 --> 00:28:21.606 A:middle
of these new designs that your
designers and your clients

00:28:22.116 --> 00:28:24.406 A:middle
and maybe even your friends
and families start throwing

00:28:24.406 --> 00:28:26.156 A:middle
at you once they see iOS 7.

00:28:26.836 --> 00:28:29.156 A:middle
So now we're going to tell
you a little bit about some

00:28:29.156 --> 00:28:31.276 A:middle
of the techniques you can
employ to realize some

00:28:31.276 --> 00:28:32.756 A:middle
of these designs
you're going to see.

00:28:32.966 --> 00:28:39.706 A:middle
So that you can work on creating
apps like messages and mail.

00:28:40.606 --> 00:28:42.476 A:middle
If you look at the design
of messages and mail,

00:28:42.776 --> 00:28:45.946 A:middle
you can see that the text
is precisely positioned.

00:28:46.726 --> 00:28:48.866 A:middle
Everything looks
balanced and clean.

00:28:49.156 --> 00:28:51.006 A:middle
And the content is
front and center.

00:28:52.556 --> 00:28:56.126 A:middle
Well, I'm going to tell you, you
want to get as far down the road

00:28:56.126 --> 00:28:58.006 A:middle
as you can with Auto
Layout because it's going

00:28:58.006 --> 00:28:59.916 A:middle
to make your life
incredibly easy.

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

00:29:01.376 --> 00:29:04.556 A:middle
But, once you get past what
Auto Layout can do for you,

00:29:04.886 --> 00:29:05.476 A:middle
you're going to need

00:29:05.476 --> 00:29:07.746 A:middle
to understand a few
more tips and tricks.

00:29:08.536 --> 00:29:09.676 A:middle
Let's start with an example.

00:29:11.136 --> 00:29:17.716 A:middle
The new mail view is
broken up into sections.

00:29:17.796 --> 00:29:19.746 A:middle
You can see there are a
couple of header sections

00:29:19.746 --> 00:29:21.536 A:middle
and then there's a body section.

00:29:22.126 --> 00:29:27.816 A:middle
Each section is separated
by a gray key line,

00:29:28.446 --> 00:29:32.496 A:middle
and this key line is
important, it's very important

00:29:32.496 --> 00:29:36.946 A:middle
to get our text spaced
exactly in the perfect place

00:29:38.196 --> 00:29:41.156 A:middle
with respect to the
positioning of the key line.

00:29:41.726 --> 00:29:44.376 A:middle
And our designer has driven
this home by saying that we need

00:29:44.376 --> 00:29:45.596 A:middle
to put the first line

00:29:45.596 --> 00:29:49.636 A:middle
of the body text 0.8
times the cap height away

00:29:49.756 --> 00:29:50.606 A:middle
from the key line.

00:29:51.026 --> 00:29:52.286 A:middle
You may ask, "What is this?"

00:29:52.696 --> 00:29:54.666 A:middle
To understand some
of these new designs,

00:29:55.116 --> 00:29:57.816 A:middle
you need to understand a few
things about font metrics.

00:29:58.306 --> 00:30:00.986 A:middle
So again, if you have a detailed
spec like the one we showed you

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

00:29:58.306 --> 00:30:00.986 A:middle
So again, if you have a detailed
spec like the one we showed you

00:30:00.986 --> 00:30:03.426 A:middle
in Mail, you'll need
to become familiarized

00:30:03.426 --> 00:30:04.976 A:middle
with things like line height.

00:30:06.016 --> 00:30:09.406 A:middle
This encompasses the
ascender and descender

00:30:09.946 --> 00:30:11.306 A:middle
of each glyph on the line.

00:30:11.306 --> 00:30:13.536 A:middle
As a matter of fact, it's
called the typographic balance

00:30:13.536 --> 00:30:15.506 A:middle
in this case of the line.

00:30:15.506 --> 00:30:19.876 A:middle
And you can get this
from the font

00:30:20.666 --> 00:30:22.706 A:middle
by asking for its line height.

00:30:23.356 --> 00:30:24.666 A:middle
The next thing you're
going to want

00:30:24.666 --> 00:30:26.616 A:middle
to understand is cap height.

00:30:27.406 --> 00:30:30.246 A:middle
Cap height is the distance
from the bottom of the baseline

00:30:30.616 --> 00:30:33.676 A:middle
to the top -- the capital letter
in this case like the flat line

00:30:33.676 --> 00:30:35.906 A:middle
of the A or the -- if
you have a capital H,

00:30:35.906 --> 00:30:39.376 A:middle
it's basically the two top
parts, and that was the distance

00:30:39.426 --> 00:30:40.906 A:middle
that our designers specified

00:30:40.906 --> 00:30:43.686 A:middle
that we should position
our text relative to.

00:30:45.666 --> 00:30:47.886 A:middle
Next, you're going to want
to understand leading.

00:30:48.186 --> 00:30:50.536 A:middle
Leading is the space
between the lines of text,

00:30:51.016 --> 00:30:54.086 A:middle
and using Dynamic Type, remember

00:30:54.086 --> 00:30:58.096 A:middle
that this leading can be
negative to drive the lines

00:30:58.096 --> 00:30:59.416 A:middle
of text closer together.

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

00:31:00.336 --> 00:31:04.276 A:middle
This causes the descenders
from the line above to overlap

00:31:04.566 --> 00:31:06.796 A:middle
with the ascenders
from the line below.

00:31:08.316 --> 00:31:11.906 A:middle
Now, all of these designs
need to be responsive

00:31:11.906 --> 00:31:13.746 A:middle
and the user gets
to derive the size.

00:31:14.076 --> 00:31:14.926 A:middle
How do you do this?

00:31:15.396 --> 00:31:18.986 A:middle
We're going to want to listen
for UIContentSizeCategoryDid

00:31:18.986 --> 00:31:20.176 A:middle
ChangeNotification.

00:31:20.676 --> 00:31:21.866 A:middle
Thankfully, we have
auto complete,

00:31:22.846 --> 00:31:27.586 A:middle
and this will be omitted when
the users selects new size.

00:31:28.216 --> 00:31:30.946 A:middle
You want to setup this
observation probably inside

00:31:30.946 --> 00:31:33.496 A:middle
of your view controller,
and maybe your app,

00:31:33.496 --> 00:31:34.976 A:middle
and probably your
view controller.

00:31:35.696 --> 00:31:38.726 A:middle
And you want to re-layout
your UI when you receive this.

00:31:39.076 --> 00:31:41.336 A:middle
Well, if you're using Auto
Layout, again, as we told you,

00:31:41.336 --> 00:31:42.286 A:middle
you should probably do,

00:31:43.756 --> 00:31:46.386 A:middle
you'll need to invalidate
the intrinsic content size

00:31:46.386 --> 00:31:48.876 A:middle
of your UIKitViews
positioned by Auto Layout.

00:31:48.876 --> 00:31:52.346 A:middle
And this is a mouthful and
it really boils down to,

00:31:52.346 --> 00:31:55.916 A:middle
if it's a UITextView, or a
text field, or a UILabel,

00:31:56.096 --> 00:31:57.786 A:middle
simply resetting the font

00:31:58.696 --> 00:32:02.106 A:middle
on that view will invalidate
the intrinsic content size

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

00:31:58.696 --> 00:32:02.106 A:middle
on that view will invalidate
the intrinsic content size

00:32:02.106 --> 00:32:04.196 A:middle
and Auto Layout will just
layout everything for you.

00:32:04.196 --> 00:32:04.816 A:middle
It's that simple.

00:32:06.106 --> 00:32:08.706 A:middle
However, if you're doing
pixel perfect positioning

00:32:08.896 --> 00:32:10.546 A:middle
like the stuff I was
talking about earlier,

00:32:11.256 --> 00:32:13.136 A:middle
you'll want to call
setNeedsLayout

00:32:13.216 --> 00:32:14.616 A:middle
on probably a parent view

00:32:15.026 --> 00:32:18.136 A:middle
to reposition all the child
views using whatever magic

00:32:18.136 --> 00:32:20.586 A:middle
formula you and your
designer have come up with

00:32:20.736 --> 00:32:22.486 A:middle
to position these views.

00:32:23.056 --> 00:32:25.936 A:middle
Another key thing to
remember is that you need

00:32:25.936 --> 00:32:28.416 A:middle
to invalidate any
cached preferred fonts

00:32:28.416 --> 00:32:31.726 A:middle
or font descriptors because
these guys are no longer valid

00:32:31.966 --> 00:32:35.126 A:middle
in the context of your
user's new chosen font size.

00:32:36.826 --> 00:32:40.456 A:middle
So, there's a lot there but
it's actually pretty simple.

00:32:40.816 --> 00:32:42.226 A:middle
It shouldn't be too
intimidating.

00:32:42.226 --> 00:32:44.086 A:middle
And to show you just
how easy it is,

00:32:44.416 --> 00:32:46.896 A:middle
I'd like to invite my
colleague Jordan Breeding

00:32:47.036 --> 00:32:49.626 A:middle
up to the stage again to
give you another demo.

00:32:50.516 --> 00:32:55.496 A:middle
[ Applause ]

00:32:55.996 --> 00:32:56.486 A:middle
>> Thank you, Ian.

00:32:57.226 --> 00:33:00.356 A:middle
The next thing we'd like to show
you in this demo is how to deal

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

00:32:57.226 --> 00:33:00.356 A:middle
The next thing we'd like to show
you in this demo is how to deal

00:33:00.356 --> 00:33:04.836 A:middle
with some of these complex
designs and also how to account

00:33:04.836 --> 00:33:07.576 A:middle
for your user changing their
preferred content size.

00:33:08.126 --> 00:33:13.306 A:middle
Now, the first thing I'd like
to show you is a user changing

00:33:13.306 --> 00:33:14.566 A:middle
their preferred content size.

00:33:15.156 --> 00:33:18.496 A:middle
In this case, you can see what
our current collection view

00:33:18.496 --> 00:33:18.916 A:middle
looks like.

00:33:19.616 --> 00:33:24.236 A:middle
And as the user goes
over to settings

00:33:24.766 --> 00:33:26.736 A:middle
and changes their
preferred content size --

00:33:32.766 --> 00:33:35.336 A:middle
-- going back to our
demo, you'll notice

00:33:35.336 --> 00:33:36.066 A:middle
that nothing happened.

00:33:37.466 --> 00:33:41.416 A:middle
Now, that's a very
inconsistent user experience.

00:33:42.086 --> 00:33:44.036 A:middle
Your users expect
their content to change

00:33:44.036 --> 00:33:45.486 A:middle
when they change
the content size.

00:33:46.626 --> 00:33:49.146 A:middle
So in this case, I'm going to go

00:33:49.146 --> 00:33:51.516 A:middle
to my collection
view cells instead

00:33:51.516 --> 00:33:53.166 A:middle
of the collection
view controller

00:33:53.316 --> 00:33:54.966 A:middle
because the cells
themselves know

00:33:54.966 --> 00:33:56.676 A:middle
about which content
needs to change.

00:33:57.276 --> 00:34:01.726 A:middle
First thing I'm going to
do is declare a method

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

00:33:57.276 --> 00:34:01.726 A:middle
First thing I'm going to
do is declare a method

00:34:02.656 --> 00:34:05.176 A:middle
that our notification
can call when it happens.

00:34:06.446 --> 00:34:09.346 A:middle
In this case, I'm calling it
PreferredContentSizeChanged.

00:34:11.356 --> 00:34:15.025 A:middle
Next, while I'm setting up
our initial layout and state,

00:34:15.856 --> 00:34:18.906 A:middle
I'll actually listen
for that notification

00:34:18.906 --> 00:34:19.896 A:middle
that Ian mentioned earlier.

00:34:21.636 --> 00:34:24.646 A:middle
UIContentCategory -- sorry.

00:34:25.295 --> 00:34:27.636 A:middle
UIContentSizeCategoryDid

00:34:27.636 --> 00:34:28.656 A:middle
ChangeNotification.

00:34:29.196 --> 00:34:32.235 A:middle
When that notification fires,

00:34:32.516 --> 00:34:34.815 A:middle
it will call our
PreferredContentSizeChanged

00:34:35.616 --> 00:34:35.766 A:middle
method.

00:34:36.696 --> 00:34:39.025 A:middle
Lastly, I'll drop
in an implementation

00:34:39.356 --> 00:34:41.036 A:middle
of PreferredContentSizeChanged.

00:34:42.016 --> 00:34:43.985 A:middle
In this case, I wrote
a method upfront

00:34:44.076 --> 00:34:48.025 A:middle
that just grabs the new fonts,
places them on the views.

00:34:48.446 --> 00:34:49.176 A:middle
Everything is happy.

00:34:49.985 --> 00:34:50.976 A:middle
So I'll build and run.

00:34:56.416 --> 00:34:58.766 A:middle
Now, you'll see that
things are laid

00:34:58.766 --> 00:35:01.426 A:middle
out a little bit differently.

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

00:34:58.766 --> 00:35:01.426 A:middle
out a little bit differently.

00:35:01.426 --> 00:35:06.056 A:middle
And again, when your users goes
to change their text size --

00:35:06.666 --> 00:35:09.306 A:middle
oh, actually, I think I --

00:35:09.306 --> 00:35:15.166 A:middle
yeah, I did build instead
of a build and run.

00:35:15.386 --> 00:35:19.726 A:middle
Now we'll see that the
content is different.

00:35:19.726 --> 00:35:24.646 A:middle
And as we go back down,

00:35:24.846 --> 00:35:26.356 A:middle
everything lays out
automatically.

00:35:27.066 --> 00:35:27.876 A:middle
In this case --

00:35:28.516 --> 00:35:31.816 A:middle
[ Applause ]

00:35:32.316 --> 00:35:34.886 A:middle
In this case, another thing we'd
like to point out is that each

00:35:34.886 --> 00:35:38.406 A:middle
of these UITextViews was
actually positioned inside

00:35:38.406 --> 00:35:39.956 A:middle
of the cell using Auto Layout.

00:35:40.436 --> 00:35:43.686 A:middle
So all we did was set the
font on the UITextView

00:35:43.966 --> 00:35:46.866 A:middle
and it automatically invalidated
the intrinsic content size

00:35:46.866 --> 00:35:50.126 A:middle
and caused layout to happen.

00:35:50.226 --> 00:35:54.346 A:middle
The next thing we'd like to show
you is a design specification

00:35:54.476 --> 00:35:55.096 A:middle
from a designer.

00:35:56.496 --> 00:36:00.206 A:middle
In this case, our designer
wanted a profile picture

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

00:35:56.496 --> 00:36:00.206 A:middle
In this case, our designer
wanted a profile picture

00:36:00.206 --> 00:36:01.526 A:middle
in the upper left
as you can see.

00:36:02.726 --> 00:36:07.346 A:middle
A name, some text, and then
a large run of text below it.

00:36:08.636 --> 00:36:10.316 A:middle
I'd like to show you
how we actually achieved

00:36:10.316 --> 00:36:11.666 A:middle
that using Auto Layout.

00:36:12.196 --> 00:36:18.796 A:middle
In Xcode 5, we were able
to select the picture

00:36:18.796 --> 00:36:20.226 A:middle
which was the most
important element.

00:36:20.676 --> 00:36:22.956 A:middle
Our designer had told us
that the element needed

00:36:22.956 --> 00:36:25.756 A:middle
to be exactly eight
points from the key line

00:36:25.756 --> 00:36:27.036 A:middle
and from the left-hand margin.

00:36:27.556 --> 00:36:31.026 A:middle
And if I show you here, you can
see some of these constraints.

00:36:32.516 --> 00:36:35.116 A:middle
Then the label flows from that,

00:36:36.206 --> 00:36:37.926 A:middle
it's eight points
from the image view.

00:36:38.476 --> 00:36:42.296 A:middle
And then some of the rest of
the layout flows from there.

00:36:42.846 --> 00:36:46.186 A:middle
This container is positioned
based on the left-hand side

00:36:46.186 --> 00:36:48.206 A:middle
of the label above it
and the right-hand side

00:36:48.206 --> 00:36:49.076 A:middle
of the label above it.

00:36:49.076 --> 00:36:52.636 A:middle
And the final TextView is eight
points from the things above it,

00:36:52.896 --> 00:36:54.796 A:middle
and it's left and right
margins are aligned

00:36:54.796 --> 00:36:55.836 A:middle
with the items above it.

00:36:57.176 --> 00:36:58.616 A:middle
The reason that we did this is

00:36:58.616 --> 00:37:01.676 A:middle
that you can adjust just a
few things at the top and all

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

00:36:58.616 --> 00:37:01.676 A:middle
that you can adjust just a
few things at the top and all

00:37:01.676 --> 00:37:03.506 A:middle
of the rest of your layout
will flow from there.

00:37:04.816 --> 00:37:10.066 A:middle
So, if we build and run again
just to show you, all right.

00:37:10.936 --> 00:37:14.426 A:middle
And in this case, I
could show you that --

00:37:14.876 --> 00:37:17.206 A:middle
if I go in and set the
preferred content size,

00:37:17.406 --> 00:37:18.676 A:middle
it's not currently responding.

00:37:18.866 --> 00:37:22.406 A:middle
So we need to make that happen.

00:37:22.616 --> 00:37:27.076 A:middle
What I do there is I go into
my view controller superclass

00:37:28.406 --> 00:37:31.596 A:middle
and I implement the same
PreferredContentSizeChanged

00:37:31.596 --> 00:37:31.956 A:middle
method.

00:37:32.546 --> 00:37:36.686 A:middle
In viewDidLoad, I know
that I need to listen

00:37:36.686 --> 00:37:37.776 A:middle
for the notification again

00:37:38.156 --> 00:37:40.096 A:middle
and call
PreferredContentSizeChanged,

00:37:41.256 --> 00:37:44.836 A:middle
and have a base implementation
of that.

00:37:45.086 --> 00:37:48.666 A:middle
Lastly, in the view controller
for our designed part,

00:37:50.036 --> 00:37:53.026 A:middle
we know that we need
to override that method

00:37:53.466 --> 00:37:55.656 A:middle
and do some extra setting
of fonts and things.

00:37:56.716 --> 00:37:57.976 A:middle
So, I build and run.

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

00:38:04.446 --> 00:38:09.846 A:middle
And now you'll see that if I go
in and change my content size,

00:38:12.376 --> 00:38:14.096 A:middle
everything lays out
automatically.

00:38:16.516 --> 00:38:20.276 A:middle
[ Applause ]

00:38:20.776 --> 00:38:21.066 A:middle
Thank you.

00:38:21.246 --> 00:38:25.426 A:middle
The one thing that you might
notice is that the short block

00:38:25.426 --> 00:38:27.746 A:middle
of description text
truncated in a way

00:38:27.746 --> 00:38:29.406 A:middle
that wasn't very
pleasing to our user.

00:38:30.556 --> 00:38:32.346 A:middle
We didn't like this and
neither did our designer.

00:38:33.456 --> 00:38:36.676 A:middle
So we're going to implement one
last thing, brand new in iOS 7.

00:38:37.356 --> 00:38:43.396 A:middle
We can now set the line break
mode on the text container

00:38:43.396 --> 00:38:45.896 A:middle
of the TextView to
get truncation

00:38:46.156 --> 00:38:49.226 A:middle
by the text container instead
of by the line or paragraph.

00:38:50.226 --> 00:38:52.076 A:middle
So instead of truncating
to a single line

00:38:52.076 --> 00:38:53.296 A:middle
or even a single paragraph,

00:38:53.296 --> 00:38:55.136 A:middle
I've inserted this
single line of code.

00:38:55.966 --> 00:38:56.826 A:middle
I'll build and run.

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

00:39:02.616 --> 00:39:06.136 A:middle
And this time, you'll notice
that we truncated nicely

00:39:06.746 --> 00:39:08.746 A:middle
at the end of the
text container itself.

00:39:09.906 --> 00:39:14.626 A:middle
So, going back over to
what we saw in that demo,

00:39:14.826 --> 00:39:17.606 A:middle
we saw how you can realize
fairly complex designs still

00:39:17.606 --> 00:39:20.846 A:middle
using Auto Layout in Xcode
5 with interface builder.

00:39:22.336 --> 00:39:25.616 A:middle
We saw how you can respond
to the change notification

00:39:25.816 --> 00:39:28.006 A:middle
when your user changes
their preferred content size

00:39:28.436 --> 00:39:32.216 A:middle
and cause layout to occur again.

00:39:32.436 --> 00:39:36.476 A:middle
And we saw how in iOS 7, you
can now customize the text

00:39:36.476 --> 00:39:38.726 A:middle
containers line break
mode instead of having

00:39:38.726 --> 00:39:41.156 A:middle
to do it yourself by
line or paragraph.

00:39:42.416 --> 00:39:45.126 A:middle
Next, I'd like to bring out my
colleague, Johannes Fortmann.

00:39:46.516 --> 00:39:51.166 A:middle
[ Applause ]

00:39:51.666 --> 00:39:52.226 A:middle
>> Thanks, Jordan.

00:39:53.796 --> 00:39:57.946 A:middle
Hi, I'm here to talk to you
about Interactive Rich Text.

00:39:59.256 --> 00:40:00.616 A:middle
Now, what do I mean by that?

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

00:39:59.256 --> 00:40:00.616 A:middle
Now, what do I mean by that?

00:40:01.976 --> 00:40:07.536 A:middle
If you've used the UITextView
on iOS 6 before, you may recall

00:40:07.536 --> 00:40:10.296 A:middle
that there, we provided
the new attribute

00:40:11.396 --> 00:40:14.856 A:middle
to set the attributed
text on a UITextView.

00:40:16.346 --> 00:40:24.186 A:middle
Now, this attribute means that
when you set it, the entire text

00:40:24.516 --> 00:40:27.576 A:middle
in this UITextView
will get replaced

00:40:27.856 --> 00:40:33.736 A:middle
by the new NSAttributedString
that you set the attributes to.

00:40:34.756 --> 00:40:40.006 A:middle
In iOS 7, we now provide a
new attribute, text storage,

00:40:40.156 --> 00:40:46.306 A:middle
that allows you to directly
modify the attributed text

00:40:46.806 --> 00:40:47.806 A:middle
on the TextView.

00:40:49.146 --> 00:40:52.436 A:middle
The text storage is a subclass
of NSMutableAttributedString

00:40:52.686 --> 00:40:56.216 A:middle
which means that you can
get it from the TextView

00:40:56.666 --> 00:40:58.366 A:middle
and modify it in place.

00:40:59.866 --> 00:41:01.816 A:middle
We send change notifications

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

00:40:59.866 --> 00:41:01.816 A:middle
We send change notifications

00:41:02.606 --> 00:41:07.516 A:middle
that will inform the
LayoutManager about the changes

00:41:07.516 --> 00:41:11.806 A:middle
that you performed
on the text storage

00:41:12.586 --> 00:41:18.326 A:middle
and performed very specific
invalidation on only the parts

00:41:18.326 --> 00:41:20.766 A:middle
of the text storage
that you've changed.

00:41:22.206 --> 00:41:25.266 A:middle
That's a big, big, big
performance win, since now,

00:41:25.266 --> 00:41:27.636 A:middle
we don't have to
invalidate everything

00:41:28.196 --> 00:41:32.116 A:middle
when just a single
character has changed.

00:41:32.666 --> 00:41:35.606 A:middle
Let's walk through how one
of these changes works.

00:41:36.156 --> 00:41:44.566 A:middle
As I said, since the
NSTextStorage is simply a

00:41:44.566 --> 00:41:46.286 A:middle
MutableAttributedString
subclass,

00:41:47.006 --> 00:41:50.556 A:middle
we can use the standard
modifications

00:41:50.556 --> 00:41:53.886 A:middle
on the MutableAttributedString
to perform changes.

00:41:55.096 --> 00:41:58.366 A:middle
So, assume that we have
a TextView already here,

00:41:59.506 --> 00:42:04.196 A:middle
and in this case, we have the
beginning of the story "Alice

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

00:41:59.506 --> 00:42:04.196 A:middle
and in this case, we have the
beginning of the story "Alice

00:42:04.196 --> 00:42:09.856 A:middle
and Wonderland" and we want
to modify the name Alice

00:42:09.856 --> 00:42:14.646 A:middle
for example to be read,
to call it out in a way.

00:42:14.846 --> 00:42:19.566 A:middle
What we do since we
have multiple occasions

00:42:19.566 --> 00:42:22.936 A:middle
by the name Alice comes up, it's
about her, the story, anyway.

00:42:23.926 --> 00:42:27.366 A:middle
So, it happens often.

00:42:27.366 --> 00:42:31.866 A:middle
We don't want to perform
an invalidation for each

00:42:31.906 --> 00:42:34.806 A:middle
of these cases why we
modify the text storage.

00:42:35.816 --> 00:42:38.016 A:middle
So what we do is we
bracket the changes.

00:42:38.666 --> 00:42:43.636 A:middle
Let me show you how that works.

00:42:44.296 --> 00:42:49.766 A:middle
First, we call the Begin Editing
method on the text storage.

00:42:50.816 --> 00:42:53.456 A:middle
That informs our text
storage that we're going

00:42:53.456 --> 00:42:55.776 A:middle
to perform a batch
of changes now.

00:42:57.506 --> 00:43:01.956 A:middle
Next, what we're doing is
we modify each instance.

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

00:42:57.506 --> 00:43:01.956 A:middle
Next, what we're doing is
we modify each instance.

00:43:01.956 --> 00:43:05.046 A:middle
For example, we loop over the
string, find out the ranges,

00:43:05.046 --> 00:43:08.746 A:middle
and set the foreground color on
each instance of the word Alice.

00:43:10.386 --> 00:43:13.386 A:middle
And finally, once we're
done with all our changes

00:43:13.386 --> 00:43:18.696 A:middle
and are happy with them, we
call the End Editing method

00:43:18.696 --> 00:43:19.646 A:middle
on the text storage.

00:43:20.926 --> 00:43:24.296 A:middle
Now, until now, nothing
has yet changed

00:43:24.296 --> 00:43:27.616 A:middle
on the actual visual
representation, the TextView.

00:43:29.166 --> 00:43:33.086 A:middle
Only after the End Editing
method has been called,

00:43:34.056 --> 00:43:39.166 A:middle
the text storage will
process each and every edit

00:43:40.166 --> 00:43:44.376 A:middle
and inform the LayoutManager
which then is able

00:43:44.376 --> 00:43:47.216 A:middle
to recompute the areas
that have actually changed

00:43:48.176 --> 00:43:52.776 A:middle
and redraw the actual changes.

00:43:53.286 --> 00:43:58.866 A:middle
Next, I'd like to talk to you
about subclassing NSTextStorage.

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

00:44:00.406 --> 00:44:01.896 A:middle
Now, why would we
want to do that?

00:44:02.776 --> 00:44:07.666 A:middle
Well, as Ian showed you before,
we might be writing an app

00:44:07.716 --> 00:44:13.776 A:middle
for a popular messaging
system, and in that case,

00:44:13.836 --> 00:44:18.906 A:middle
we want to call out a
person by their identifier.

00:44:19.636 --> 00:44:21.786 A:middle
We do know that these
identifiers have a

00:44:21.786 --> 00:44:22.876 A:middle
certain formatting.

00:44:23.656 --> 00:44:26.646 A:middle
So, in that case,
we already know what

00:44:26.646 --> 00:44:28.836 A:middle
to do once we see
these identifiers.

00:44:31.086 --> 00:44:36.406 A:middle
After the user has
entered the identifier,

00:44:36.486 --> 00:44:38.806 A:middle
we want to immediately,
and I mean,

00:44:38.806 --> 00:44:43.316 A:middle
immediately change the truth,
effectively the contents

00:44:43.316 --> 00:44:44.536 A:middle
of our text storage

00:44:45.056 --> 00:44:50.746 A:middle
to for example change the
colors of this identifier.

00:44:52.096 --> 00:44:56.726 A:middle
To do that, we modify the
methods on the text storage

00:44:56.726 --> 00:44:59.596 A:middle
that actually change
text on the text storage.

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

00:45:00.706 --> 00:45:03.836 A:middle
Now, NSTextStorage
is class cluster.

00:45:07.536 --> 00:45:13.356 A:middle
That means that we as Apple
provide an implementation

00:45:13.356 --> 00:45:16.366 A:middle
of a superclass, that's
the NSTextStorage class

00:45:16.786 --> 00:45:18.166 A:middle
that is public in the SDK.

00:45:19.236 --> 00:45:21.596 A:middle
And we also provide
an implementation

00:45:21.596 --> 00:45:25.326 A:middle
of that superclass, a
subclass, that is private

00:45:26.116 --> 00:45:29.416 A:middle
but that's still vended
out to you, the developer,

00:45:30.026 --> 00:45:32.216 A:middle
if you initialize
one of these objects.

00:45:33.916 --> 00:45:37.176 A:middle
This subclass provides
the actual storage

00:45:37.226 --> 00:45:39.946 A:middle
and attribute modification
parts of the text storage.

00:45:41.406 --> 00:45:44.446 A:middle
Now, if you as a
third-party developer want

00:45:44.446 --> 00:45:46.826 A:middle
to provide your own
custom implementation

00:45:46.826 --> 00:45:48.956 A:middle
of a text storage, what you need

00:45:48.956 --> 00:45:53.396 A:middle
to do is provide
certain primitive methods

00:45:53.396 --> 00:45:54.596 A:middle
on the text storage.

00:45:55.586 --> 00:45:56.946 A:middle
There are four primitive
methods.

00:45:58.056 --> 00:46:01.726 A:middle
Two of them deal with
actual static storage.

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

00:45:58.056 --> 00:46:01.726 A:middle
Two of them deal with
actual static storage.

00:46:01.976 --> 00:46:04.696 A:middle
You can inquire the string
and inquire about attributes,

00:46:05.646 --> 00:46:09.656 A:middle
and the next two deal
with actual modifications.

00:46:10.536 --> 00:46:12.306 A:middle
To show you how to
actually implement this,

00:46:12.376 --> 00:46:16.596 A:middle
I'm going to do a demo.

00:46:16.876 --> 00:46:24.746 A:middle
I've already setup in the
same demo app here a TextView

00:46:24.996 --> 00:46:28.816 A:middle
that has the text we saw in
the slides and already entered.

00:46:29.876 --> 00:46:32.736 A:middle
I've also already created
an empty implementation

00:46:32.736 --> 00:46:34.176 A:middle
for custom text storage.

00:46:35.506 --> 00:46:38.556 A:middle
We're now going to try to use
this empty implementation.

00:46:38.746 --> 00:46:41.236 A:middle
Well, we're going to fill it
before we use it of course.

00:46:42.176 --> 00:46:46.136 A:middle
First, I need to actually make
on my view controller an outlet

00:46:46.136 --> 00:46:50.906 A:middle
for the custom text
storage and, of course,

00:46:50.906 --> 00:46:53.916 A:middle
I need to create an instance
of my implementation.

00:46:55.586 --> 00:46:59.566 A:middle
Now, I'm going to do something
slightly complicated here.

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

00:47:00.526 --> 00:47:02.916 A:middle
In Ian's -- in one
of Ian's slides,

00:47:03.006 --> 00:47:07.466 A:middle
you've seen that the TextView
is backed by a text container

00:47:07.996 --> 00:47:10.066 A:middle
which in turn is backed
by a LayoutManager

00:47:10.066 --> 00:47:12.076 A:middle
which in turn his
backed by a text storage.

00:47:13.556 --> 00:47:16.906 A:middle
That means that I have to
recreate this entire hierarchy

00:47:17.466 --> 00:47:21.196 A:middle
to be able to put my custom
text storage in there.

00:47:22.456 --> 00:47:25.866 A:middle
This is really quite
simple since we're not going

00:47:25.866 --> 00:47:28.466 A:middle
to do anything custom
with these LayoutManagers

00:47:28.466 --> 00:47:29.336 A:middle
or text containers.

00:47:29.886 --> 00:47:32.936 A:middle
So I'm just going to create
a stock LayoutManager.

00:47:33.916 --> 00:47:38.736 A:middle
I'm going to also create stock
text container within the size

00:47:38.736 --> 00:47:41.176 A:middle
of our TextView in
an infinite height.

00:47:43.086 --> 00:47:45.026 A:middle
I'm going to setup
the text container

00:47:45.026 --> 00:47:47.426 A:middle
such that its width
tracks that TextView

00:47:47.426 --> 00:47:50.646 A:middle
in case we resize the TextView.

00:47:51.796 --> 00:47:54.126 A:middle
And finally, I'm going
to hook these two app.

00:47:54.126 --> 00:47:57.246 A:middle
I'm going to add the text
container to the LayoutManager

00:47:57.906 --> 00:48:00.866 A:middle
and add the LayoutManager
to the text storage.

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

00:47:57.906 --> 00:48:00.866 A:middle
and add the LayoutManager
to the text storage.

00:48:02.346 --> 00:48:07.296 A:middle
Finally, instead of creating
a simple TextView here,

00:48:08.026 --> 00:48:12.606 A:middle
I'm going to use the new in
iOS 7, designated initializer

00:48:12.606 --> 00:48:15.986 A:middle
for your TextView that takes
it to custom text container.

00:48:16.926 --> 00:48:20.006 A:middle
So, I'm creating the TextView

00:48:20.006 --> 00:48:22.506 A:middle
with this specific text
container that I just made,

00:48:23.526 --> 00:48:26.186 A:middle
and I assign and add it.

00:48:26.436 --> 00:48:30.116 A:middle
If I were to run this now,
we would have a TextView

00:48:30.116 --> 00:48:31.706 A:middle
that is backed by text storage

00:48:31.706 --> 00:48:33.976 A:middle
that does not actually
store anything

00:48:34.476 --> 00:48:37.306 A:middle
because we have not implemented
any of the primitive methods.

00:48:38.426 --> 00:48:39.076 A:middle
So let's do that.

00:48:39.076 --> 00:48:42.156 A:middle
I'm switching over to the text
storage implementation here.

00:48:43.136 --> 00:48:47.036 A:middle
And what we want to --
what we need first is an

00:48:47.036 --> 00:48:51.986 A:middle
NSMutableAttributedString
that actually stores the data.

00:48:52.066 --> 00:48:56.036 A:middle
We need something to store
attributes and strings.

00:48:56.356 --> 00:48:59.496 A:middle
So I'm creating an instance
variable for my backing store.

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

00:49:00.586 --> 00:49:04.396 A:middle
In my initializer, I create
a new MutableAttributedString

00:49:04.476 --> 00:49:06.926 A:middle
for that backing
store, and that's it.

00:49:07.986 --> 00:49:12.336 A:middle
Next, I'm going to implement
the static methods string,

00:49:12.336 --> 00:49:15.876 A:middle
it just returns the backing
store string, and attributes

00:49:15.876 --> 00:49:17.836 A:middle
at index returns
the back attributes

00:49:17.926 --> 00:49:19.136 A:middle
at the specific index.

00:49:20.526 --> 00:49:22.336 A:middle
The mutable methods
look similar.

00:49:22.456 --> 00:49:25.006 A:middle
They just fall back
to the backing store,

00:49:25.746 --> 00:49:27.316 A:middle
but there is something
different here.

00:49:27.316 --> 00:49:29.916 A:middle
We also need to inform
our superclass,

00:49:30.376 --> 00:49:33.366 A:middle
the NSTextStorage class, that
we actually did some edits.

00:49:34.026 --> 00:49:37.726 A:middle
So I'm going to do that
calling the Edit method on --

00:49:37.886 --> 00:49:42.926 A:middle
or myself to inform my
superclass about the range

00:49:42.926 --> 00:49:43.986 A:middle
that has been changed.

00:49:45.746 --> 00:49:49.276 A:middle
Now, next, I want to -- if
I've changed characters,

00:49:50.386 --> 00:49:53.866 A:middle
I want to remember that

00:49:54.076 --> 00:49:56.546 A:middle
and perform modifications
on those characters.

00:49:57.146 --> 00:49:59.826 A:middle
So implement a flag to
remember if I changed something.

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

00:50:00.186 --> 00:50:05.376 A:middle
In my replace characters and
range method, I set that flag

00:50:06.686 --> 00:50:09.606 A:middle
and then I'm going to implement
the process editing method

00:50:09.606 --> 00:50:13.416 A:middle
that gets called when the final
end editing call has been sent

00:50:13.526 --> 00:50:14.586 A:middle
to the text storage.

00:50:16.216 --> 00:50:19.496 A:middle
I'm going to call super in
there, and if the flag is set,

00:50:20.306 --> 00:50:22.566 A:middle
I'm going to perform
certain replacements.

00:50:23.566 --> 00:50:24.626 A:middle
These replacements are simple.

00:50:24.626 --> 00:50:27.356 A:middle
I'm going to find
the range of the line

00:50:27.356 --> 00:50:30.866 A:middle
that has just been edited and
I'm going to apply some tokens

00:50:30.946 --> 00:50:35.836 A:middle
to those -- to this range
depending on the words in there.

00:50:37.236 --> 00:50:39.396 A:middle
These tokens are
just dictionary of --

00:50:39.816 --> 00:50:44.376 A:middle
dictionaries in fact that
apply attributes to the string.

00:50:45.026 --> 00:50:47.806 A:middle
Finally, in my view
controller, I set the tokens.

00:50:48.586 --> 00:50:50.666 A:middle
I'm going to choose
the word Alice

00:50:50.666 --> 00:50:54.496 A:middle
to get the program color
red and the word rabbit

00:50:54.606 --> 00:50:56.256 A:middle
to get the program color orange.

00:50:58.456 --> 00:51:01.776 A:middle
Let's run this.

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

00:50:58.456 --> 00:51:01.776 A:middle
Let's run this.

00:51:01.986 --> 00:51:05.526 A:middle
And now, if I type,
you can already see

00:51:05.526 --> 00:51:08.706 A:middle
without me typing the
word Alice is red,

00:51:08.746 --> 00:51:12.926 A:middle
the word rabbit is
orange, and if I type,

00:51:13.726 --> 00:51:19.046 A:middle
as soon as I'm finished typing,
the word turns red immediately,

00:51:19.486 --> 00:51:23.296 A:middle
same for rabbit of course.

00:51:23.476 --> 00:51:25.936 A:middle
What you've seen
in this demo is how

00:51:25.936 --> 00:51:28.276 A:middle
to assemble the text
system by hand.

00:51:29.216 --> 00:51:31.026 A:middle
We've assembled the
stock classes

00:51:31.766 --> 00:51:35.496 A:middle
and inserted custom
text storage.

00:51:36.296 --> 00:51:40.366 A:middle
We subclass the NSTextStorage
to perform certain --

00:51:41.626 --> 00:51:45.416 A:middle
well, first of all, to
actually work, and then finally,

00:51:45.596 --> 00:51:49.446 A:middle
to use the subclass
of the text storage,

00:51:49.446 --> 00:51:51.596 A:middle
specifically the process
editing method element

00:51:52.186 --> 00:51:55.566 A:middle
to perform interactive
modifications

00:51:55.606 --> 00:51:59.266 A:middle
on the content while
the user is editing it.

00:51:59.826 --> 00:52:01.926 A:middle
And with that, let's
wrap this up.

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

00:51:59.826 --> 00:52:01.926 A:middle
And with that, let's
wrap this up.

00:52:04.256 --> 00:52:07.246 A:middle
Text Kit is an extremely
powerful

00:52:07.246 --> 00:52:08.716 A:middle
and new feature of iOS 7.

00:52:10.196 --> 00:52:13.136 A:middle
UITextViews as well
as UITextFields

00:52:13.136 --> 00:52:17.236 A:middle
and labels are first
class citizens of UIKit.

00:52:18.076 --> 00:52:22.716 A:middle
They are usable in table
views and collection views.

00:52:23.186 --> 00:52:25.866 A:middle
They support all the
attributes that previously

00:52:25.866 --> 00:52:30.116 A:middle
in iOS 6 NSString supported,
plus a few more like links.

00:52:32.026 --> 00:52:37.776 A:middle
Using exclusion paths and
simple overrides on --

00:52:38.396 --> 00:52:43.026 A:middle
in this case for the exclusion
path, the text container,

00:52:43.436 --> 00:52:46.936 A:middle
but also on NSLayoutManager
or text storage,

00:52:47.016 --> 00:52:53.886 A:middle
we are able to provide very
pleasing UI for our users.

00:52:54.266 --> 00:52:58.356 A:middle
And finally, we've
seen how customizable

00:52:58.356 --> 00:52:59.306 A:middle
and extensible it is.

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

00:53:00.616 --> 00:53:03.266 A:middle
We were able to, in just
a few lines of code,

00:53:04.096 --> 00:53:08.716 A:middle
provide an implementation
for one of the classes here

00:53:09.306 --> 00:53:11.946 A:middle
and leverage that
to perform something

00:53:11.946 --> 00:53:15.196 A:middle
that was not possible
frankly in iOS 6 before

00:53:15.196 --> 00:53:16.986 A:middle
at least not in a
performance way.

00:53:17.506 --> 00:53:22.486 A:middle
With that, if you
have any questions,

00:53:22.486 --> 00:53:25.506 A:middle
we have our frameworks
evangelist,

00:53:25.716 --> 00:53:27.106 A:middle
Jake Behrens around here.

00:53:27.106 --> 00:53:29.966 A:middle
I think he's sitting down there.

00:53:30.906 --> 00:53:32.556 A:middle
He's -- yeah.

00:53:32.556 --> 00:53:35.306 A:middle
We've got extensive
documentation already out,

00:53:35.306 --> 00:53:35.746 A:middle
I believe.

00:53:36.606 --> 00:53:40.846 A:middle
And finally, all of us text guys
are regularly reading the forums

00:53:40.956 --> 00:53:42.976 A:middle
and are happy to
answer questions.

00:53:44.636 --> 00:53:46.656 A:middle
We've got three more sessions.

00:53:46.946 --> 00:53:49.816 A:middle
Well, one of them
is already over

00:53:50.806 --> 00:53:57.596 A:middle
but the Advanced Text Layout
session tomorrow where Aki

00:53:57.596 --> 00:54:01.156 A:middle
and Peter will show you how
to override certain things

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

00:53:57.596 --> 00:54:01.156 A:middle
and Peter will show you how
to override certain things

00:54:01.156 --> 00:54:03.536 A:middle
on NSLayoutManager
and use delegation

00:54:03.966 --> 00:54:07.056 A:middle
to customize your text
layouts even further.

00:54:08.046 --> 00:54:09.626 A:middle
And on Friday, we've
got a session

00:54:09.676 --> 00:54:11.616 A:middle
on Using Fonts with Text Kit.

00:54:12.196 --> 00:54:15.336 A:middle
We've got awesome new Core
Text features providing

00:54:15.656 --> 00:54:17.956 A:middle
for interesting modifications
on fonts.

00:54:18.846 --> 00:54:24.586 A:middle
And the last one on Tuesday,
we had a session about the --

00:54:25.256 --> 00:54:30.126 A:middle
among other things, the
new CSS Style Values.

00:54:30.956 --> 00:54:31.316 A:middle
Thank you.

00:54:32.516 --> 00:54:35.516 A:middle
[ Applause ]

00:54:36.016 --> 00:54:40.736 A:middle
[ Silence ]