214.srt

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

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

00:00:11.016 --> 00:00:13.000 A:middle
[ Applause ]

00:00:13.076 --> 00:00:13.986 A:middle
>> Jacob Xiao: Hello everyone.

00:00:15.276 --> 00:00:19.756 A:middle
You've all seen iOS 7's
amazing new design and big part

00:00:19.756 --> 00:00:22.616 A:middle
of that change is there's
a lot less ornamentation,

00:00:23.226 --> 00:00:25.076 A:middle
which is a big part of
what used to make a lot

00:00:25.076 --> 00:00:26.136 A:middle
of applications unique.

00:00:27.356 --> 00:00:30.046 A:middle
So you may be wondering how you
can make your application stand

00:00:30.046 --> 00:00:31.106 A:middle
out in this new world.

00:00:32.226 --> 00:00:33.386 A:middle
Well, there's still
a lot of ways

00:00:33.386 --> 00:00:36.256 A:middle
that you can customize your
application including several

00:00:36.256 --> 00:00:36.726 A:middle
new ones.

00:00:37.696 --> 00:00:39.456 A:middle
So today, I'd like to talk

00:00:39.556 --> 00:00:41.486 A:middle
about how you can
customize your application

00:00:41.976 --> 00:00:43.856 A:middle
to make it still have its
own unique appearance,

00:00:44.396 --> 00:00:46.786 A:middle
but fit in with the rest
of the iOS 7 design.

00:00:47.476 --> 00:00:52.116 A:middle
I'll be talking about
three things today: First,

00:00:52.816 --> 00:00:55.576 A:middle
some of what's changed for
customization in iOS 7.

00:00:56.546 --> 00:00:58.416 A:middle
Then, some advanced topics

00:00:58.856 --> 00:01:00.476 A:middle
for how you can customize
your application

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

00:00:58.856 --> 00:01:00.476 A:middle
for how you can customize
your application

00:01:01.326 --> 00:01:04.166 A:middle
and finally how you can create
your own custom controls

00:01:04.566 --> 00:01:06.916 A:middle
that work just as well
as our UIKit controls.

00:01:07.436 --> 00:01:11.396 A:middle
I'll be using a sample
application today

00:01:12.826 --> 00:01:13.646 A:middle
that looks like this.

00:01:14.606 --> 00:01:17.646 A:middle
It's a simple application that's
a combination of messaging

00:01:18.196 --> 00:01:21.566 A:middle
and what I think is the greatest
game of all time, Tic-Tac-Toe.

00:01:21.616 --> 00:01:23.576 A:middle
I think it's going
to be a big hit.

00:01:24.826 --> 00:01:25.986 A:middle
This is what it looks
like today.

00:01:26.826 --> 00:01:30.196 A:middle
It's a simple standard
uncustomized iOS 7 application,

00:01:31.126 --> 00:01:31.516 A:middle
but we're going

00:01:31.516 --> 00:01:35.266 A:middle
to be customizing it
to look like this.

00:01:35.456 --> 00:01:36.506 A:middle
And I'll be telling you all

00:01:36.506 --> 00:01:39.586 A:middle
of the different customizations
we use and how you can use them

00:01:39.586 --> 00:01:40.836 A:middle
in your application as well.

00:01:41.516 --> 00:01:44.886 A:middle
And one important note
about this application is

00:01:44.886 --> 00:01:47.046 A:middle
that it's actually available
as sample code for you

00:01:47.046 --> 00:01:48.396 A:middle
to download and look at.

00:01:49.016 --> 00:01:50.566 A:middle
Just go to the developer website

00:01:50.566 --> 00:01:53.256 A:middle
and in the prerelease section
search for Tic-Tac-Toe.

00:01:53.256 --> 00:01:56.666 A:middle
And I encourage you to
take a look to see how all

00:01:56.666 --> 00:01:57.586 A:middle
of these technique works.

00:01:58.146 --> 00:02:03.126 A:middle
But before I start, I wanted
to mention one thing and that's

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

00:01:58.146 --> 00:02:03.126 A:middle
But before I start, I wanted
to mention one thing and that's

00:02:03.126 --> 00:02:05.436 A:middle
that all of the existing
customization techniques

00:02:05.436 --> 00:02:07.976 A:middle
that we had still
work great in iOS 7.

00:02:08.466 --> 00:02:10.925 A:middle
And we use a lot of these
in the sample application,

00:02:11.466 --> 00:02:13.286 A:middle
things like UAappearance
customization

00:02:13.546 --> 00:02:14.626 A:middle
and resizable images.

00:02:15.596 --> 00:02:17.186 A:middle
I'm not going to be
talking about those today,

00:02:17.656 --> 00:02:20.616 A:middle
but you can look at the last two
years appearance customization

00:02:20.616 --> 00:02:26.256 A:middle
talks in the last two WWDCs to
check out some of the concepts.

00:02:26.316 --> 00:02:29.306 A:middle
Alright, let's get started
with some of what's changed

00:02:29.386 --> 00:02:31.186 A:middle
for appearance customization
in iOS 7.

00:02:31.186 --> 00:02:35.936 A:middle
One of the first things you'll
notice is the Status Bar.

00:02:37.136 --> 00:02:39.516 A:middle
The Status Bar has an entirely
different look in iOS 7

00:02:39.516 --> 00:02:42.096 A:middle
and it has two different
styles that you can use.

00:02:43.146 --> 00:02:46.926 A:middle
The default style shows dark
content on a white background

00:02:47.696 --> 00:02:51.546 A:middle
and we have the new style called
US Status Bar Light Content,

00:02:52.256 --> 00:02:54.516 A:middle
which shows light colored
content on a dark background.

00:02:55.776 --> 00:02:58.526 A:middle
However, neither of these
two styles actually draw the

00:02:58.526 --> 00:02:59.366 A:middle
background themselves.

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

00:03:00.006 --> 00:03:02.576 A:middle
I've shown them here with
black and white backgrounds,

00:03:03.636 --> 00:03:05.136 A:middle
but they're actually
fully transparent.

00:03:05.636 --> 00:03:09.316 A:middle
And this means a lot for
how you draw the Status Bar.

00:03:09.606 --> 00:03:11.726 A:middle
You can now customize the
background that's behind it

00:03:12.016 --> 00:03:13.336 A:middle
by showing anything
you want there.

00:03:14.356 --> 00:03:15.946 A:middle
Of course, you'll want to
be careful to make sure

00:03:15.946 --> 00:03:17.116 A:middle
that you provide a background

00:03:17.356 --> 00:03:19.176 A:middle
that keeps the Status
Bar readable

00:03:19.656 --> 00:03:22.086 A:middle
by giving it enough contrast
and not being too busy,

00:03:22.686 --> 00:03:23.816 A:middle
but you have a lot
of freedom here.

00:03:25.026 --> 00:03:27.746 A:middle
And so, part of how we've let
you draw this background is

00:03:27.746 --> 00:03:31.086 A:middle
by changing the way that we lay
out view controllers in iOS 7.

00:03:32.086 --> 00:03:33.306 A:middle
We'll now layout the content

00:03:33.306 --> 00:03:35.526 A:middle
of your view controller
beneath the Status Bar,

00:03:36.406 --> 00:03:38.356 A:middle
which is what allows you
to draw this background.

00:03:39.616 --> 00:03:41.366 A:middle
So if you'll look
at what we've done

00:03:41.366 --> 00:03:44.546 A:middle
in our sample application we
have a simple white background

00:03:45.226 --> 00:03:48.616 A:middle
and we're careful to not show
our game content underneath the

00:03:48.616 --> 00:03:52.016 A:middle
Status Bar to keep it visible.

00:03:52.106 --> 00:03:54.726 A:middle
However, in other views
in our sample app,

00:03:54.856 --> 00:03:56.136 A:middle
we actually haven't
done anything

00:03:56.826 --> 00:03:58.206 A:middle
for the background
of the Status Bar.

00:03:58.796 --> 00:04:00.096 A:middle
So, here in the messages

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

00:03:58.796 --> 00:04:00.096 A:middle
So, here in the messages

00:04:00.346 --> 00:04:03.556 A:middle
and profiles view we're using
a navigation controller.

00:04:04.356 --> 00:04:07.556 A:middle
And any time that use a
navigation controller it will

00:04:07.556 --> 00:04:09.966 A:middle
actually draw the background
beneath the Status Bar

00:04:10.036 --> 00:04:11.196 A:middle
for you automatically.

00:04:12.466 --> 00:04:15.596 A:middle
It does this by taking the
background of the navigation bar

00:04:15.596 --> 00:04:18.836 A:middle
that it shows and extending it
to go beneath the Status Bar.

00:04:19.726 --> 00:04:21.176 A:middle
This happens for
you automatically

00:04:21.276 --> 00:04:22.856 A:middle
if you're using a
navigation controller

00:04:23.396 --> 00:04:27.106 A:middle
so you don't have
to worry about that.

00:04:27.306 --> 00:04:29.536 A:middle
Alright, there's
another implication

00:04:29.536 --> 00:04:31.786 A:middle
of this Status Bar
change on your application

00:04:31.786 --> 00:04:34.256 A:middle
and that's the default.png
images you use.

00:04:35.146 --> 00:04:36.936 A:middle
These are what we're using
in our sample application

00:04:37.186 --> 00:04:40.546 A:middle
for our startup images and
the important thing here is

00:04:40.546 --> 00:04:42.506 A:middle
that they have to be
full-screen size images.

00:04:43.446 --> 00:04:47.836 A:middle
So that means 320 x 480
points and 320 x 568 points.

00:04:48.406 --> 00:04:50.476 A:middle
And this allows you to draw

00:04:50.476 --> 00:04:52.386 A:middle
in your default.png
images backgrounds

00:04:52.386 --> 00:04:53.686 A:middle
that goes behind the Status Bar,

00:04:54.506 --> 00:04:57.536 A:middle
but don't include the Status Bar
itself in your default.png image

00:04:57.976 --> 00:05:01.126 A:middle
and that way as your application
launches we'll draw a live

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

00:04:57.976 --> 00:05:01.126 A:middle
and that way as your application
launches we'll draw a live

00:05:01.196 --> 00:05:02.266 A:middle
Status Bar on top of it

00:05:02.266 --> 00:05:04.586 A:middle
and it'll look great
as you start out.

00:05:05.596 --> 00:05:08.626 A:middle
We've actually gone a little
further and made it easier

00:05:08.766 --> 00:05:12.426 A:middle
for you to create your own
default.png images in iOS 7

00:05:13.056 --> 00:05:16.346 A:middle
by introducing a new system that
allows you to set multiple sets

00:05:16.346 --> 00:05:19.726 A:middle
of default startup images for
different versions of iOS.

00:05:21.006 --> 00:05:24.296 A:middle
Previously you could only have a
single set that was used for all

00:05:24.296 --> 00:05:26.016 A:middle
of the versions of iOS
that your app ran on.

00:05:27.046 --> 00:05:29.296 A:middle
In iOS 7 we're introducing
a new key

00:05:29.506 --> 00:05:31.376 A:middle
that you can use
in your info.plist.

00:05:32.366 --> 00:05:35.066 A:middle
Just add the UI launch
images values

00:05:35.166 --> 00:05:38.196 A:middle
and you can add a dictionary
with different information

00:05:38.436 --> 00:05:40.726 A:middle
for kind of default.png
images you want to use.

00:05:41.526 --> 00:05:43.946 A:middle
And if you want to see all the
details of how to set this up,

00:05:44.036 --> 00:05:45.806 A:middle
check out the sample
application which uses this.

00:05:46.746 --> 00:05:49.596 A:middle
But the important thing
is that this allows you

00:05:49.886 --> 00:05:53.676 A:middle
to set different minimum iOS
versions for your different sets

00:05:53.676 --> 00:05:55.416 A:middle
of default.png images.

00:05:55.486 --> 00:05:59.086 A:middle
So you can now create a
full-screen sized default image

00:05:59.396 --> 00:06:02.506 A:middle
for iOS 7 but still keep
your older default images

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

00:05:59.396 --> 00:06:02.506 A:middle
for iOS 7 but still keep
your older default images

00:06:02.626 --> 00:06:05.986 A:middle
for older versions of iOS.

00:06:06.186 --> 00:06:09.056 A:middle
Alright, now you may
have seen that many

00:06:09.056 --> 00:06:12.096 A:middle
of our system applications have
their own different key colors

00:06:12.156 --> 00:06:12.576 A:middle
in iOS 7.

00:06:12.686 --> 00:06:16.556 A:middle
And this color is used for
drawing interactive elements

00:06:16.556 --> 00:06:19.376 A:middle
in the application and
also selectable elements.

00:06:20.036 --> 00:06:23.206 A:middle
So, if you look at the buttons
here and also the current day

00:06:23.206 --> 00:06:25.766 A:middle
and calendar you'll see that
they have different colors

00:06:25.766 --> 00:06:26.936 A:middle
in these different applications.

00:06:27.396 --> 00:06:29.276 A:middle
And this is a lot
of what you can use

00:06:29.616 --> 00:06:31.996 A:middle
to make your application
different in iOS 7.

00:06:33.056 --> 00:06:35.676 A:middle
So even if you don't use any
other customization techniques

00:06:36.156 --> 00:06:39.186 A:middle
I'd really encourage you to
choose your own key color

00:06:39.186 --> 00:06:42.916 A:middle
for your application in
iOS 7 and we've tried

00:06:42.916 --> 00:06:44.436 A:middle
to make this really
easy for you to do.

00:06:45.526 --> 00:06:48.786 A:middle
In fact, you can customize
the color, the key color

00:06:48.786 --> 00:06:52.266 A:middle
of your entire application with
just this one line of code.

00:06:54.456 --> 00:06:57.996 A:middle
So, the way this works
is by extending a concept

00:06:57.996 --> 00:06:59.566 A:middle
that we've had for
a while in UIKit

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

00:07:00.136 --> 00:07:01.106 A:middle
and that's called Tint Color.

00:07:02.526 --> 00:07:05.906 A:middle
Tint Color used to be a property
that several controls and views

00:07:05.906 --> 00:07:08.926 A:middle
in UIKit had and affected how
they drew their own content.

00:07:09.706 --> 00:07:13.196 A:middle
But now we've taken Tint Color
and added it to every UIview

00:07:14.756 --> 00:07:16.206 A:middle
and it also has some
new behaviors.

00:07:17.356 --> 00:07:18.906 A:middle
One of the most important
behaviors

00:07:18.906 --> 00:07:21.516 A:middle
of Tint Color now is the
new inheritant system.

00:07:22.436 --> 00:07:25.356 A:middle
And the way this works is
that when you set a Tint Color

00:07:25.356 --> 00:07:29.256 A:middle
on one view like the window it
will actually flow down to all

00:07:29.256 --> 00:07:32.186 A:middle
of the subviews of that window
and recolor them as well.

00:07:33.106 --> 00:07:34.316 A:middle
So when we set the red color

00:07:34.496 --> 00:07:37.636 A:middle
for our window we're
actually recoloring the Pause

00:07:37.636 --> 00:07:40.386 A:middle
and New Game buttons and also
the content in the Tab bar.

00:07:41.406 --> 00:07:44.466 A:middle
So, with this change to how
Tint Color works the Tint Color

00:07:44.466 --> 00:07:45.746 A:middle
Property that used to exist

00:07:45.746 --> 00:07:47.926 A:middle
for navigation bars now
has a different meaning.

00:07:48.946 --> 00:07:51.276 A:middle
In iOS 6 if you set
the Tint Color

00:07:51.276 --> 00:07:54.886 A:middle
for a navigation bar it
would recolor the background

00:07:54.886 --> 00:07:55.846 A:middle
that was shown for the bar.

00:07:55.846 --> 00:07:58.406 A:middle
So, if you set it to red
you'd get this appearance.

00:07:59.716 --> 00:08:00.956 A:middle
Now, if you ran that same code

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

00:07:59.716 --> 00:08:00.956 A:middle
Now, if you ran that same code

00:08:01.196 --> 00:08:03.416 A:middle
in iOS 7 you'd get
something very different.

00:08:04.416 --> 00:08:07.976 A:middle
As I said, changing the tint
color now affects the foreground

00:08:07.976 --> 00:08:09.806 A:middle
interactive elements
that are shown.

00:08:10.486 --> 00:08:13.986 A:middle
So if you now set the Tint Color
to red notice that the buttons

00:08:14.086 --> 00:08:15.606 A:middle
that are in the navigation
bar are changed

00:08:15.606 --> 00:08:17.156 A:middle
to red instead of
its background.

00:08:18.216 --> 00:08:19.996 A:middle
If you still do want to
change the background

00:08:19.996 --> 00:08:22.516 A:middle
of the bar itself we've
added a new property

00:08:22.516 --> 00:08:23.506 A:middle
that you can use to do that.

00:08:24.756 --> 00:08:28.156 A:middle
All you have to do is set
the Bar Tint Color your bar

00:08:28.506 --> 00:08:29.746 A:middle
to whatever color
you want to use

00:08:30.416 --> 00:08:31.676 A:middle
and that will change
the background

00:08:31.676 --> 00:08:33.216 A:middle
of the bar instead
of its foreground.

00:08:34.046 --> 00:08:35.655 A:middle
Of course, you can
combine these as well

00:08:36.155 --> 00:08:38.346 A:middle
to set a different background
and foreground color.

00:08:38.926 --> 00:08:42.976 A:middle
So, that's the new Bar Tint
Color and you can use it

00:08:43.086 --> 00:08:47.806 A:middle
on navigation bars, tool bars,
search bars and tab bars.

00:08:47.986 --> 00:08:49.896 A:middle
Another way that you can
customize the backgrounds

00:08:49.896 --> 00:08:52.896 A:middle
for your bars is by setting
custom images on them just

00:08:52.896 --> 00:08:54.266 A:middle
as you've traditionally
done in iOS.

00:08:55.676 --> 00:08:58.196 A:middle
And we're going to be using
that for our sample application

00:08:58.686 --> 00:09:02.586 A:middle
to set this custom image that
looks kind of like a grid

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

00:08:58.686 --> 00:09:02.586 A:middle
to set this custom image that
looks kind of like a grid

00:09:02.796 --> 00:09:05.566 A:middle
to match with our
tic-tac-toe theme.

00:09:05.786 --> 00:09:09.036 A:middle
Now, traditionally in iOS
you would set a 44 point tall

00:09:09.036 --> 00:09:11.806 A:middle
background as your
custom background image

00:09:12.086 --> 00:09:14.626 A:middle
and this way it would be
shown beneath the bar,

00:09:14.776 --> 00:09:16.026 A:middle
which is 44 points tall

00:09:16.056 --> 00:09:18.496 A:middle
and we would show a black
background beneath the Status

00:09:18.566 --> 00:09:21.046 A:middle
Bar and you can still
do that in iOS 7.

00:09:21.986 --> 00:09:23.016 A:middle
But as I mentioned earlier,

00:09:23.196 --> 00:09:27.196 A:middle
navigation bars now often
show a full larger content

00:09:27.446 --> 00:09:29.506 A:middle
that shows the background
beneath the Status Bar

00:09:30.126 --> 00:09:32.366 A:middle
to get a kind of
unified look there.

00:09:33.046 --> 00:09:34.656 A:middle
And you can participate
in this system

00:09:34.986 --> 00:09:36.876 A:middle
with your custom
background images as well.

00:09:38.106 --> 00:09:39.386 A:middle
To do that, all you have

00:09:39.386 --> 00:09:42.796 A:middle
to do is set a 64 point tall
background image instead

00:09:42.796 --> 00:09:44.216 A:middle
of 44 points.

00:09:44.756 --> 00:09:45.726 A:middle
When you do this,

00:09:45.726 --> 00:09:47.556 A:middle
we'll automatically
extend the backgrounds

00:09:47.636 --> 00:09:49.046 A:middle
to go beneath the
Status Bar as well

00:09:49.726 --> 00:09:52.606 A:middle
and if you're wondering the
64 point height is the 44

00:09:52.606 --> 00:09:55.326 A:middle
of the navigation bar plus the
20 points of the Status Bar.

00:09:56.426 --> 00:09:57.776 A:middle
So this is what we'll be doing

00:09:57.776 --> 00:10:01.956 A:middle
in our sample application using
the full height background image

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

00:09:57.776 --> 00:10:01.956 A:middle
in our sample application using
the full height background image

00:10:02.876 --> 00:10:04.616 A:middle
and this-- these changes apply

00:10:04.706 --> 00:10:07.046 A:middle
to landscape size
background images as well.

00:10:08.106 --> 00:10:10.586 A:middle
So, in those cases you
would use 32 points tall

00:10:11.056 --> 00:10:14.416 A:middle
for just the navigation bar
background images or 52 points

00:10:14.566 --> 00:10:16.126 A:middle
if you want the combined look.

00:10:18.056 --> 00:10:21.116 A:middle
Now, when you use
navigation bars most

00:10:21.116 --> 00:10:22.996 A:middle
of the time they appear at
the top of your application,

00:10:23.396 --> 00:10:24.916 A:middle
but they can also
appear lower down

00:10:24.916 --> 00:10:26.186 A:middle
and not part of the Status Bar.

00:10:26.686 --> 00:10:28.186 A:middle
This usually happens
when they're used

00:10:28.186 --> 00:10:29.176 A:middle
in things like popovers.

00:10:29.696 --> 00:10:32.886 A:middle
And we've actually
introduced a new system

00:10:32.886 --> 00:10:35.466 A:middle
so that you can set different
custom background images

00:10:35.606 --> 00:10:36.696 A:middle
for these two different cases.

00:10:38.056 --> 00:10:41.476 A:middle
To do this you can use a new
setter called setBackgroundImage

00:10:41.626 --> 00:10:44.576 A:middle
for bar position,
barMetrics and this allows you

00:10:44.576 --> 00:10:47.816 A:middle
to specify the top attached
bar position for the case

00:10:47.876 --> 00:10:50.276 A:middle
of a combined Status
Bar and navigation bar

00:10:51.166 --> 00:10:54.056 A:middle
or just the top bar
position if you want

00:10:54.056 --> 00:10:57.276 A:middle
to customize the background of
a bar when it appears by itself.

00:10:58.756 --> 00:11:00.896 A:middle
So this way, you can set
different custom background

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

00:10:58.756 --> 00:11:00.896 A:middle
So this way, you can set
different custom background

00:11:00.896 --> 00:11:02.856 A:middle
images that have
exactly the right height

00:11:03.166 --> 00:11:05.036 A:middle
for the navigation
bars where it appears.

00:11:06.306 --> 00:11:08.546 A:middle
And if you want, you can
also use the bar position,

00:11:08.546 --> 00:11:12.036 A:middle
any bar position to set a
custom background images,

00:11:12.196 --> 00:11:13.766 A:middle
image that applies
to both cases.

00:11:14.406 --> 00:11:16.786 A:middle
And this is great if you have
a vertically resizable image

00:11:17.066 --> 00:11:21.486 A:middle
because it will just be shown
at exactly the right size.

00:11:21.706 --> 00:11:24.546 A:middle
Now, in older versions
of iOS we had a behavior

00:11:24.546 --> 00:11:26.586 A:middle
when you set a custom
background image on a bar

00:11:27.226 --> 00:11:29.516 A:middle
where if the height of your
background image was taller

00:11:29.516 --> 00:11:32.576 A:middle
than the bar's height we
would extend that background

00:11:32.796 --> 00:11:35.546 A:middle
to go beneath the bar and
into the content below.

00:11:35.546 --> 00:11:37.576 A:middle
And this allowed
you to do things

00:11:37.576 --> 00:11:40.566 A:middle
like have a shadow effect
inside of your background image.

00:11:41.266 --> 00:11:44.356 A:middle
But because of this new behavior
where the background image

00:11:44.356 --> 00:11:48.656 A:middle
of the bar can extend behind the
Status Bar we no longer support

00:11:48.656 --> 00:11:49.986 A:middle
that older shadow behavior.

00:11:50.906 --> 00:11:54.266 A:middle
However, instead you can use
a property called shadowImage

00:11:54.676 --> 00:11:55.996 A:middle
that we introduced in iOS 6.

00:11:57.016 --> 00:11:59.786 A:middle
This lets you set your own
dedicated shadowImage that's

00:11:59.786 --> 00:12:02.776 A:middle
shown in just an area beneath
your bar and above the content

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

00:11:59.786 --> 00:12:02.776 A:middle
shown in just an area beneath
your bar and above the content

00:12:03.456 --> 00:12:06.486 A:middle
and that allows you to create
exactly the custom shadow image

00:12:06.486 --> 00:12:08.856 A:middle
that you want instead
of including it as part

00:12:08.856 --> 00:12:14.266 A:middle
of an overly tall
background image for the bar.

00:12:14.466 --> 00:12:17.986 A:middle
So another big change with
bars in iOS 7 is Translucency.

00:12:19.126 --> 00:12:21.916 A:middle
By default, all of our
bars are now translucent

00:12:21.916 --> 00:12:24.416 A:middle
and this includes
both the default

00:12:24.416 --> 00:12:29.026 A:middle
and the black style navigation
bars and it also applies to bars

00:12:29.236 --> 00:12:31.086 A:middle
that you've set a custom
Bar Tint Color for.

00:12:31.626 --> 00:12:35.426 A:middle
When you set a custom background
image the behavior is a little

00:12:35.426 --> 00:12:39.116 A:middle
bit more complex, will actually
analyze the background image

00:12:39.116 --> 00:12:40.596 A:middle
that you set for the bar

00:12:41.146 --> 00:12:43.996 A:middle
and determine whether the
image has any transparency

00:12:43.996 --> 00:12:44.556 A:middle
in it or not.

00:12:45.686 --> 00:12:48.446 A:middle
We'll use that determination
to set the Translucent Property

00:12:48.446 --> 00:12:50.546 A:middle
of the bar so that it
matches what you've set

00:12:50.546 --> 00:12:51.656 A:middle
as a background image.

00:12:52.816 --> 00:12:55.096 A:middle
So these are all of the
default values that bars have

00:12:55.146 --> 00:12:57.776 A:middle
for a Translucent Property,
but if you want to override

00:12:57.776 --> 00:13:00.136 A:middle
that you can always set the
Translucent Property directly

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

00:12:57.776 --> 00:13:00.136 A:middle
that you can always set the
Translucent Property directly

00:13:00.136 --> 00:13:01.096 A:middle
to whatever you want.

00:13:02.206 --> 00:13:04.456 A:middle
And this will, of course,
change the appearance of the bar

00:13:05.246 --> 00:13:06.696 A:middle
but it'll actually
also have an effect

00:13:06.966 --> 00:13:10.156 A:middle
on how view controllers are laid
out in relation to that bar.

00:13:10.806 --> 00:13:15.176 A:middle
So by default in iOS 7, if
you have a view controller

00:13:15.406 --> 00:13:18.166 A:middle
that appears with bars like
this top navigation bar

00:13:18.216 --> 00:13:21.896 A:middle
or bottom tab bar, if the
bar is translucent we'll lay

00:13:21.896 --> 00:13:23.786 A:middle
out your view controller
such that it's

00:13:23.786 --> 00:13:25.166 A:middle
under both of those two bars.

00:13:26.116 --> 00:13:28.786 A:middle
However, if those bars are
opaque then we'll just lay

00:13:28.786 --> 00:13:30.996 A:middle
out your view controller
in the area between them.

00:13:31.626 --> 00:13:33.946 A:middle
So, this is something
to keep in mind

00:13:34.226 --> 00:13:35.686 A:middle
as you're designing
your view controllers

00:13:35.836 --> 00:13:36.596 A:middle
and how they're laid out.

00:13:37.926 --> 00:13:39.966 A:middle
And there are also places

00:13:39.966 --> 00:13:42.696 A:middle
that you can set the different
behavior of these properties

00:13:42.756 --> 00:13:43.756 A:middle
in the UIView controller.

00:13:43.876 --> 00:13:45.756 A:middle
I don't have time to
talk about all of--

00:13:45.756 --> 00:13:47.656 A:middle
how all of this works
today, but you can look

00:13:47.656 --> 00:13:48.976 A:middle
at the UIView controller header

00:13:49.296 --> 00:13:55.056 A:middle
to see details of
how that works.

00:13:55.246 --> 00:13:58.096 A:middle
Now, another change that
you'll see with the buttons

00:13:58.156 --> 00:14:01.206 A:middle
that appear both the
navigation bars and in the rest

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

00:13:58.156 --> 00:14:01.206 A:middle
that appear both the
navigation bars and in the rest

00:14:01.206 --> 00:14:04.856 A:middle
of your application is that
they no longer show any bezels

00:14:05.076 --> 00:14:06.116 A:middle
around them by default.

00:14:07.136 --> 00:14:09.476 A:middle
The new default appearance
of our buttons is

00:14:10.126 --> 00:14:12.566 A:middle
that they'll show either
their text or their image

00:14:12.906 --> 00:14:14.676 A:middle
and the tint color
that they have.

00:14:15.656 --> 00:14:18.786 A:middle
So as you can see, we have
this Edit and Compose buttons

00:14:18.786 --> 00:14:20.756 A:middle
and they don't have any bezels.

00:14:21.986 --> 00:14:25.336 A:middle
If you'd like to use some kind
of outline, background or bezel

00:14:25.626 --> 00:14:28.066 A:middle
in your buttons you can
actually still use all

00:14:28.066 --> 00:14:30.326 A:middle
of the customization
techniques that we've had before

00:14:30.616 --> 00:14:32.416 A:middle
to set a custom background
image for your buttons

00:14:32.416 --> 00:14:35.946 A:middle
and this will still draw bezels
just as it has traditionally.

00:14:36.566 --> 00:14:40.316 A:middle
And this applies to the
Back Button as well.

00:14:40.926 --> 00:14:44.536 A:middle
Here, you'll notice that the
Back Button shows just the back

00:14:44.536 --> 00:14:46.266 A:middle
text and back chevron.

00:14:47.896 --> 00:14:50.386 A:middle
And this is the default
appearance that you can custom

00:14:50.476 --> 00:14:51.786 A:middle
in actually two different ways.

00:14:52.456 --> 00:14:56.796 A:middle
As I said, you can use our
traditional older methods

00:14:56.986 --> 00:14:59.296 A:middle
to set a background image
for your Back Button

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

00:15:00.056 --> 00:15:00.806 A:middle
and if you do that,

00:15:00.986 --> 00:15:03.566 A:middle
we'll actually turn off the back
indicator chevron that's shown

00:15:03.606 --> 00:15:07.036 A:middle
here, because generally you'll
include a back indicator as part

00:15:07.036 --> 00:15:08.126 A:middle
of your background artwork.

00:15:09.346 --> 00:15:10.896 A:middle
However, if you want to continue

00:15:11.016 --> 00:15:13.686 A:middle
with the background list
appearance of our buttons

00:15:14.206 --> 00:15:17.316 A:middle
as we're doing in our sample
application then instead you can

00:15:17.316 --> 00:15:18.906 A:middle
customize the back
indicator chevron.

00:15:18.966 --> 00:15:22.166 A:middle
To do that we've
introduced a new property

00:15:22.166 --> 00:15:24.986 A:middle
to UI Navigation Bar
called backIndicatorImage.

00:15:26.246 --> 00:15:29.196 A:middle
And this lets you set your
own custom back chevron.

00:15:30.176 --> 00:15:32.156 A:middle
This is the one we're using
in our ample application.

00:15:32.736 --> 00:15:35.356 A:middle
It's kind of a combination of
the back chevron with the X

00:15:35.356 --> 00:15:38.896 A:middle
from the tic-tac-toe game

00:15:38.896 --> 00:15:40.606 A:middle
and that's what it
looks like in context.

00:15:41.856 --> 00:15:43.426 A:middle
However, one thing you
want to keep in mind

00:15:43.686 --> 00:15:47.356 A:middle
as we're customizing this back
indicator is that it's also used

00:15:47.596 --> 00:15:49.896 A:middle
for push and pop transitions
of the navigation bar

00:15:50.516 --> 00:15:53.926 A:middle
to make the text of the
Back Button flow into

00:15:53.926 --> 00:15:55.316 A:middle
and out of the back chevron.

00:15:55.926 --> 00:15:59.486 A:middle
So to do this effect,
we actually show--

00:15:59.656 --> 00:16:01.896 A:middle
use a mask image that's
a triangular shape

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

00:15:59.656 --> 00:16:01.896 A:middle
use a mask image that's
a triangular shape

00:16:02.586 --> 00:16:05.406 A:middle
to mask the text as its
moving during the transition.

00:16:05.406 --> 00:16:09.206 A:middle
And if you're changing the
back indicator then you'll want

00:16:09.206 --> 00:16:10.576 A:middle
to change this mask
image as well.

00:16:10.576 --> 00:16:12.666 A:middle
And you can use this
other method

00:16:12.786 --> 00:16:14.696 A:middle
backIndicatorTransitionMask
Image

00:16:15.106 --> 00:16:16.496 A:middle
to set a custom image for that.

00:16:16.496 --> 00:16:19.636 A:middle
And in fact, these two
properties are closely

00:16:19.636 --> 00:16:20.236 A:middle
linked together.

00:16:20.646 --> 00:16:23.246 A:middle
So if you want to customize
the back indicator you have

00:16:23.246 --> 00:16:25.436 A:middle
to set custom values for
both of these two properties.

00:16:25.766 --> 00:16:28.766 A:middle
Otherwise, we won't use the
custom image that you set.

00:16:29.316 --> 00:16:32.216 A:middle
This is our custom back
transition mask that we're using

00:16:32.216 --> 00:16:35.536 A:middle
in our application and notice
that when we use it the text

00:16:35.986 --> 00:16:37.776 A:middle
of the Back Button
as its flowing

00:16:37.776 --> 00:16:39.956 A:middle
in is clipped to exactly match.

00:16:40.976 --> 00:16:43.916 A:middle
As you're designing these two
images you want to keep this

00:16:43.916 --> 00:16:46.346 A:middle
in mind, the fact that they
should exactly fit together

00:16:46.726 --> 00:16:51.386 A:middle
so that the masking effect
works as the text is moving.

00:16:51.526 --> 00:16:54.566 A:middle
Alright, our application
also uses a Tab bar

00:16:54.566 --> 00:16:55.536 A:middle
as part of its appearance.

00:16:56.846 --> 00:16:59.006 A:middle
And the first thing you'll
notice about Tab Bars

00:16:59.006 --> 00:17:01.526 A:middle
in iOS 7 is that they're
now wiped by default.

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

00:16:59.006 --> 00:17:01.526 A:middle
in iOS 7 is that they're
now wiped by default.

00:17:02.396 --> 00:17:04.536 A:middle
But they also have a
new bar style property

00:17:05.096 --> 00:17:07.195 A:middle
that matches the rest
of our bars in UIKit

00:17:07.195 --> 00:17:11.786 A:middle
and this lets you set either a
default bar style for dark text

00:17:11.786 --> 00:17:15.425 A:middle
on a white colored
background or a black bar style

00:17:15.756 --> 00:17:17.945 A:middle
to get the inverse, light
text on a dark background.

00:17:18.685 --> 00:17:20.705 A:middle
And this is exactly the
same behavior as all

00:17:20.705 --> 00:17:21.955 A:middle
of the bar styles
on our other bars.

00:17:22.516 --> 00:17:28.076 A:middle
[ Silence ]

00:17:28.576 --> 00:17:31.676 A:middle
>> Alright, now another
thing you'll see as you look

00:17:31.676 --> 00:17:34.566 A:middle
at Tab Bars in iOS
7 is that many

00:17:34.566 --> 00:17:37.056 A:middle
of them have different print
images for their selected

00:17:37.316 --> 00:17:38.306 A:middle
and unselected states.

00:17:39.196 --> 00:17:41.836 A:middle
So, if you look at this example
from the Clock application,

00:17:42.586 --> 00:17:44.246 A:middle
you'll see that all
of the images,

00:17:44.246 --> 00:17:46.196 A:middle
that all of the tabs have
different selected images

00:17:46.196 --> 00:17:49.096 A:middle
that are a little heavier
and they have more fills

00:17:49.706 --> 00:17:52.046 A:middle
than the outlines in
the unselected images.

00:17:53.006 --> 00:17:54.566 A:middle
We've made this easier
for you to do

00:17:54.566 --> 00:17:56.466 A:middle
in your application
in iOS 7 as well.

00:17:57.176 --> 00:18:01.496 A:middle
So, traditionally UItabBarItem
has had an image property

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

00:17:57.176 --> 00:18:01.496 A:middle
So, traditionally UItabBarItem
has had an image property

00:18:01.966 --> 00:18:05.046 A:middle
that lets you set your own
image on the tab bar item

00:18:05.046 --> 00:18:07.056 A:middle
and that image was used both

00:18:07.056 --> 00:18:09.566 A:middle
when the tab bar items was
selected and unselected.

00:18:11.076 --> 00:18:12.156 A:middle
You can still use that now

00:18:12.156 --> 00:18:15.366 A:middle
but we've also introduced a new
property called selected Image.

00:18:16.156 --> 00:18:17.706 A:middle
And this lets you
set a second image

00:18:17.936 --> 00:18:21.266 A:middle
to override the image property
when the tab bar is selected.

00:18:22.286 --> 00:18:25.896 A:middle
So, if we use that in our sample
application we can set three

00:18:25.896 --> 00:18:30.246 A:middle
different images to have
a heavier look as well

00:18:30.516 --> 00:18:32.086 A:middle
when our different
tabs are selected.

00:18:32.686 --> 00:18:35.086 A:middle
So, that's Tab Bars.

00:18:36.396 --> 00:18:40.756 A:middle
Table Views also have
many changes in iOS 7.

00:18:40.906 --> 00:18:43.096 A:middle
One of the first things
you'll see is that instead

00:18:43.226 --> 00:18:45.716 A:middle
of the rounded rectangle
appearance group style table

00:18:45.716 --> 00:18:49.396 A:middle
views had in iOS 6, they now
have an end-to-end design

00:18:49.396 --> 00:18:51.686 A:middle
that looks more similar to
the plain style table views.

00:18:52.636 --> 00:18:54.516 A:middle
However, they still
do have differences.

00:18:55.016 --> 00:18:58.916 A:middle
The backgrounds are now a darker
gray and there's a larger space

00:18:59.036 --> 00:19:00.046 A:middle
between the different sections.

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

00:18:59.036 --> 00:19:00.046 A:middle
between the different sections.

00:19:00.916 --> 00:19:03.716 A:middle
So, redesigning your app
for iOS 7 you may want

00:19:03.716 --> 00:19:07.996 A:middle
to consider using Group Style
Table Views in different places.

00:19:08.126 --> 00:19:10.866 A:middle
Another change with table views
is their highlighted appearance

00:19:11.016 --> 00:19:13.626 A:middle
of the rows in Table Views.

00:19:13.806 --> 00:19:17.466 A:middle
Before iOS 7 we would show a
dark blue background behind a

00:19:17.536 --> 00:19:18.636 A:middle
selected Table View cell

00:19:19.206 --> 00:19:21.156 A:middle
and we would generally
invert the content

00:19:21.156 --> 00:19:23.086 A:middle
of the Table View cell
to appear in white.

00:19:24.646 --> 00:19:28.766 A:middle
However, in iOS 7 we show a more
subtle gray background behind

00:19:28.766 --> 00:19:29.986 A:middle
the selected Table View cell

00:19:30.796 --> 00:19:32.726 A:middle
and generally now we
don't invert the colors

00:19:32.726 --> 00:19:33.316 A:middle
of the content.

00:19:34.366 --> 00:19:37.016 A:middle
So as you're designing your
new Table View cells you should

00:19:37.016 --> 00:19:38.846 A:middle
consider leaving the
colors as they are

00:19:39.056 --> 00:19:40.766 A:middle
when your Table View
cell becomes selected.

00:19:41.366 --> 00:19:44.826 A:middle
Now additionally, if you'd
like to change the color

00:19:45.226 --> 00:19:47.336 A:middle
of the background that's
shown behind a cell

00:19:47.336 --> 00:19:50.506 A:middle
when it's selected you can still
use the same property we've had

00:19:50.546 --> 00:19:52.636 A:middle
for a while,
selectedBackgroundView.

00:19:53.136 --> 00:19:55.186 A:middle
This lets you provide
your own background view

00:19:55.186 --> 00:19:58.376 A:middle
for the cell that's used in
place of our standard one.

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

00:20:00.696 --> 00:20:03.836 A:middle
Something else we've introduced
in iOS 7 is the new button type.

00:20:04.786 --> 00:20:06.516 A:middle
We call this UIButton
Type System.

00:20:06.886 --> 00:20:08.956 A:middle
You can get it with the same
button with type method.

00:20:09.946 --> 00:20:13.796 A:middle
Now this button is a standard
system button just like the ones

00:20:13.796 --> 00:20:15.106 A:middle
that we use in navigation bars.

00:20:16.526 --> 00:20:19.216 A:middle
And this new button type
replaces the existing rounded

00:20:19.246 --> 00:20:21.736 A:middle
Rec button type, which is
now deprecated on iOS 7.

00:20:22.816 --> 00:20:28.466 A:middle
When you use this system style
button you'll get all the

00:20:28.466 --> 00:20:30.316 A:middle
default behaviors that
we use for our buttons,

00:20:30.756 --> 00:20:32.916 A:middle
which includes this
appearance where they're shown

00:20:32.916 --> 00:20:37.056 A:middle
without a bezel and with their
text or image in the Tint Color

00:20:37.396 --> 00:20:41.156 A:middle
of the application and you
also get several animations

00:20:41.156 --> 00:20:42.266 A:middle
and other effects for free.

00:20:43.186 --> 00:20:45.646 A:middle
So, you'll get a highlighted
effect that looks like this

00:20:46.406 --> 00:20:49.106 A:middle
where a window button is
tapped will change its opacity

00:20:49.326 --> 00:20:50.706 A:middle
to indicate that
it's being pressed.

00:20:51.656 --> 00:20:55.266 A:middle
And you'll also get a new
selected appearance just

00:20:55.266 --> 00:20:57.536 A:middle
by setting the selected
property of the button to Yes.

00:20:59.036 --> 00:21:02.746 A:middle
When you do that we'll show
the selection indicator to show

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

00:20:59.036 --> 00:21:02.746 A:middle
When you do that we'll show
the selection indicator to show

00:21:02.746 --> 00:21:03.956 A:middle
that your button
has been selected.

00:21:04.546 --> 00:21:08.616 A:middle
So we're using these buttons
in our sample application

00:21:08.616 --> 00:21:11.626 A:middle
for the Pause and New
Game buttons and also

00:21:11.626 --> 00:21:13.756 A:middle
for this Reply Button that
we show in the messages view.

00:21:13.756 --> 00:21:17.976 A:middle
All of the other
controls that we have

00:21:17.976 --> 00:21:21.146 A:middle
in UIKit have all changed
quite a bit as well in iOS 7.

00:21:21.856 --> 00:21:23.936 A:middle
They all have different
appearances and many

00:21:23.936 --> 00:21:25.316 A:middle
of them have different
metrics as well.

00:21:26.286 --> 00:21:28.206 A:middle
And the best way to deal
with these metrics changes is

00:21:28.206 --> 00:21:29.946 A:middle
to use Autolayout
in your application

00:21:30.366 --> 00:21:33.236 A:middle
so that you remain flexible to
these changes and don't have

00:21:33.296 --> 00:21:36.636 A:middle
to hard-coat in different sizes.

00:21:36.636 --> 00:21:38.886 A:middle
However, despite these
appearance changes all

00:21:38.886 --> 00:21:40.976 A:middle
of the traditional methods
that we have for setting,

00:21:40.976 --> 00:21:45.106 A:middle
customizing images, colors and
text attributes still work great

00:21:45.106 --> 00:21:46.186 A:middle
on all of these controls.

00:21:46.186 --> 00:21:48.466 A:middle
So you can still
make them themed

00:21:48.606 --> 00:21:50.686 A:middle
to exactly match your
application just as you'd like.

00:21:51.266 --> 00:21:55.096 A:middle
Now, there's one
last change in iOS 7

00:21:55.286 --> 00:21:57.706 A:middle
that will affect how you set up
your customizations for your app

00:21:58.156 --> 00:21:59.336 A:middle
and that's Asset Catalogs.

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

00:22:00.346 --> 00:22:03.396 A:middle
Asset Catalogs are a new
system that we've introduced

00:22:03.616 --> 00:22:05.916 A:middle
that allows you to combine
all of the images that you use

00:22:05.916 --> 00:22:08.266 A:middle
into your application
into one resource file.

00:22:09.116 --> 00:22:11.136 A:middle
And this lets you
consolidate all of your images

00:22:11.586 --> 00:22:13.866 A:middle
and also gives you
several new capabilities.

00:22:14.506 --> 00:22:17.116 A:middle
You can now set different images
for different device types

00:22:17.356 --> 00:22:19.846 A:middle
and scales and you can
even do your slicing

00:22:19.886 --> 00:22:21.656 A:middle
of your images right
inside of Xcode.

00:22:22.626 --> 00:22:24.886 A:middle
So, I would highly recommend
that you use Asset Catalogs

00:22:25.216 --> 00:22:27.666 A:middle
for all of your custom images
in your iOS 7 application.

00:22:28.046 --> 00:22:31.976 A:middle
Alright, so those are some of
the basics of what's changed

00:22:31.976 --> 00:22:33.626 A:middle
with customization in iOS 7.

00:22:34.296 --> 00:22:38.026 A:middle
Now, let's talk about
some advanced topics.

00:22:38.136 --> 00:22:41.226 A:middle
Earlier I mentioned Tint Color
and how you can use one line

00:22:41.226 --> 00:22:44.026 A:middle
of code to change the tint color
of your entire application.

00:22:44.026 --> 00:22:46.016 A:middle
But what's actually
happening here?

00:22:46.546 --> 00:22:50.146 A:middle
When I showed you the
Tint Color on every view,

00:22:50.686 --> 00:22:52.496 A:middle
it's actually a little
bit more subtle than that.

00:22:53.866 --> 00:22:55.106 A:middle
Conceptually, you can think

00:22:55.106 --> 00:22:57.386 A:middle
of their being two different
Tint Colors on each view.

00:22:58.086 --> 00:22:59.266 A:middle
Now there's only one property.

00:22:59.396 --> 00:23:00.796 A:middle
This is just a conceptual
way to think

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

00:22:59.396 --> 00:23:00.796 A:middle
This is just a conceptual
way to think

00:23:00.796 --> 00:23:03.066 A:middle
about how this property
works and try

00:23:03.066 --> 00:23:06.286 A:middle
to help you understand the
behavior of Tint Color in iOS 7.

00:23:07.416 --> 00:23:09.696 A:middle
So, I'll call these the Specific

00:23:09.696 --> 00:23:11.256 A:middle
and Inherited tint
color of the view.

00:23:12.126 --> 00:23:16.306 A:middle
The Specific Tint Color is the
one that you've set on a view

00:23:16.366 --> 00:23:17.426 A:middle
with a tint color setter.

00:23:18.896 --> 00:23:21.566 A:middle
The Inherited Tint Color on the
other hand is what you get back

00:23:21.676 --> 00:23:23.436 A:middle
when you call the
tintColorGetter

00:23:23.436 --> 00:23:24.146 A:middle
on the same view.

00:23:24.146 --> 00:23:28.026 A:middle
And these two are not
necessarily the same.

00:23:28.206 --> 00:23:32.136 A:middle
So, the reason that I call
it an Inherited Tint Color is

00:23:32.136 --> 00:23:34.056 A:middle
that if you haven't set
a specific Tint Color

00:23:34.056 --> 00:23:36.756 A:middle
on that view then it will
actually inherit the Tint Color

00:23:36.896 --> 00:23:37.626 A:middle
of its super view.

00:23:37.626 --> 00:23:41.066 A:middle
And if it doesn't have a super
view it will inherit a system

00:23:41.066 --> 00:23:44.136 A:middle
default color, in this
case, this blue color.

00:23:44.716 --> 00:23:47.376 A:middle
So, now if we look again
at the example from earlier

00:23:47.626 --> 00:23:51.246 A:middle
where we set a red tint color
on our window you'll see

00:23:51.246 --> 00:23:53.296 A:middle
that the setter sets
the specific Tint Color

00:23:53.356 --> 00:23:53.756 A:middle
for the window.

00:23:54.696 --> 00:23:58.006 A:middle
After that happens the Inherited
Tint Color will now use the

00:23:58.006 --> 00:24:00.476 A:middle
specific Tint Color
because it's non-nil instead

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

00:23:58.006 --> 00:24:00.476 A:middle
specific Tint Color
because it's non-nil instead

00:24:00.476 --> 00:24:01.996 A:middle
of inheriting the
system default.

00:24:03.086 --> 00:24:05.786 A:middle
After that all of the
subviews that have nil

00:24:05.846 --> 00:24:08.916 A:middle
as their specific tint color
will inherit the tint--

00:24:08.916 --> 00:24:11.796 A:middle
the inherited Tint Color of
their superview, the window,

00:24:12.366 --> 00:24:13.396 A:middle
and they'll become red as well.

00:24:14.726 --> 00:24:18.126 A:middle
Then that process will
repeat until all of the views

00:24:18.126 --> 00:24:20.956 A:middle
in that window that did have
their own specific color have

00:24:20.956 --> 00:24:23.736 A:middle
adopted the red tint color.

00:24:23.926 --> 00:24:27.476 A:middle
Now, if we then change the Tint
Color of the window back to nil,

00:24:28.126 --> 00:24:29.856 A:middle
we've essentially erased
the Specific Tint Color

00:24:29.856 --> 00:24:32.136 A:middle
for the window, which
means it will go back

00:24:32.136 --> 00:24:33.466 A:middle
to inheriting the system default

00:24:34.126 --> 00:24:36.566 A:middle
and that change will be
inherited by all of its subviews

00:24:36.956 --> 00:24:40.076 A:middle
and so on until all of the
views in the window will go back

00:24:40.076 --> 00:24:43.826 A:middle
to the system default
blue color.

00:24:44.006 --> 00:24:46.766 A:middle
So, this same behavior applies
if you set the Tint Color

00:24:46.956 --> 00:24:48.076 A:middle
on a subview of the window.

00:24:49.106 --> 00:24:51.986 A:middle
So, now let's set the Tint
Color of this Tab Bar to green.

00:24:52.886 --> 00:24:54.406 A:middle
Once again when we
call the setter,

00:24:54.526 --> 00:24:57.406 A:middle
the setter for Tint Color we're
setting the Specific Tint Color,

00:24:58.126 --> 00:25:00.116 A:middle
which it then becomes
the Inherited Tint Color

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

00:24:58.126 --> 00:25:00.116 A:middle
which it then becomes
the Inherited Tint Color

00:25:00.766 --> 00:25:02.896 A:middle
and which then is also
inherited by its children.

00:25:03.546 --> 00:25:07.786 A:middle
So now that we set a Tint Color
for this subview hierarchy

00:25:08.326 --> 00:25:10.996 A:middle
if we again go back and set
the windows Tint Color to red,

00:25:11.296 --> 00:25:12.656 A:middle
something a little bit
different will happen.

00:25:13.656 --> 00:25:16.646 A:middle
Once again, the Specific Tint
Color becomes the Inherited Tint

00:25:16.696 --> 00:25:20.306 A:middle
Color and now that
color is inherited by--

00:25:21.106 --> 00:25:23.536 A:middle
by only the children
that have a nil,

00:25:23.876 --> 00:25:26.216 A:middle
a nil Specific Tint
Color of their own.

00:25:28.196 --> 00:25:34.026 A:middle
So you'll see that the Pause
and New Game buttons become red,

00:25:34.936 --> 00:25:35.976 A:middle
but the Tab Bar remains green.

00:25:36.516 --> 00:25:43.686 A:middle
[ Silence ]

00:25:44.186 --> 00:25:44.506 A:middle
>> Alright.

00:25:45.206 --> 00:25:47.786 A:middle
So this is how you can
get different colors

00:25:47.986 --> 00:25:49.526 A:middle
for different parts of
your view hierarchy.

00:25:50.206 --> 00:25:53.676 A:middle
Now, there's one
additional special behavior

00:25:53.676 --> 00:25:56.646 A:middle
that Tint Color has and
that's related to what happens

00:25:56.696 --> 00:25:59.226 A:middle
when you show alerts and action
sheets in your application.

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

00:26:00.206 --> 00:26:03.556 A:middle
If you look closely when this
alert is shown the background is

00:26:03.556 --> 00:26:06.986 A:middle
dimmed, but also all of the
places that show the Tint Color

00:26:06.986 --> 00:26:09.186 A:middle
of the application
have become desaturated

00:26:09.186 --> 00:26:12.386 A:middle
and that happens automatically
whenever an alert appears.

00:26:13.736 --> 00:26:16.216 A:middle
The reason we do this is
so that those tint colors

00:26:16.216 --> 00:26:17.846 A:middle
in the background
don't interfere

00:26:17.846 --> 00:26:19.756 A:middle
with your focus on
the alert itself.

00:26:21.066 --> 00:26:22.186 A:middle
And this is accomplished

00:26:22.186 --> 00:26:24.136 A:middle
by a new property
called TintAdjustMode.

00:26:25.286 --> 00:26:27.886 A:middle
TintAdjustmentMode is
closely related to Tint Color

00:26:28.116 --> 00:26:30.166 A:middle
and it can have these
three different values.

00:26:31.476 --> 00:26:34.426 A:middle
When it's set to normal then
we'll show the Tint Color

00:26:34.486 --> 00:26:38.286 A:middle
of those-- of every view as
its original saturated color

00:26:38.346 --> 00:26:41.716 A:middle
and when it's dimmed then we'll
automatically desaturate the

00:26:41.716 --> 00:26:43.176 A:middle
tint color of those
views for you.

00:26:44.176 --> 00:26:44.766 A:middle
And we'll come back

00:26:44.766 --> 00:26:48.456 A:middle
to the AutomaticTintMode
a little bit later.

00:26:48.646 --> 00:26:49.616 A:middle
So, let's take a look

00:26:49.616 --> 00:26:51.716 A:middle
at how TintAdjustmentMode
works for view hierarchy.

00:26:52.846 --> 00:26:55.076 A:middle
Every view has a
TintAjusmentMode property

00:26:55.076 --> 00:26:58.446 A:middle
as well and if you call the
getter it defaults returning

00:26:58.446 --> 00:26:59.926 A:middle
normal for all of these views.

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

00:27:00.466 --> 00:27:05.296 A:middle
Now, when an alert appears
it sets the TintAdjusmentMode

00:27:05.406 --> 00:27:07.046 A:middle
of the window to be dimmed.

00:27:08.546 --> 00:27:11.486 A:middle
Once that is dimmed then the
Tint Color that's returned

00:27:11.536 --> 00:27:12.566 A:middle
for the Inherited Tint Color

00:27:12.566 --> 00:27:14.856 A:middle
of that window becomes
a desaturated gray.

00:27:16.276 --> 00:27:19.706 A:middle
Then that will be inherited
similarly to Tint Color by all

00:27:19.706 --> 00:27:23.236 A:middle
of the subviews of the window so
those views will become dimmed

00:27:23.306 --> 00:27:24.706 A:middle
as their TintAdjusmentMode
as well,

00:27:25.316 --> 00:27:28.086 A:middle
which will cause their tint
color to be desaturated and so

00:27:28.086 --> 00:27:31.506 A:middle
on until the entire
window becomes dimmed

00:27:31.506 --> 00:27:35.186 A:middle
and has desaturated Tint Colors.

00:27:35.346 --> 00:27:37.686 A:middle
So, this is not only
something that happens

00:27:37.686 --> 00:27:39.666 A:middle
with system views like alerts.

00:27:40.026 --> 00:27:42.356 A:middle
You can actually incorporate
this into your own app as well.

00:27:42.356 --> 00:27:43.606 A:middle
And we've done this

00:27:43.676 --> 00:27:46.326 A:middle
in our sample application
in the Messages view.

00:27:47.276 --> 00:27:50.856 A:middle
Here when you tap on the
Compose icon we show a new

00:27:50.856 --> 00:27:51.466 A:middle
message sheet.

00:27:51.976 --> 00:27:55.956 A:middle
And when this sheet appears
we like it to look similarly

00:27:55.956 --> 00:27:56.986 A:middle
to how an alert appears.

00:27:57.816 --> 00:28:00.106 A:middle
So, we'll set the
TintAdjustmentMode of the window

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

00:27:57.816 --> 00:28:00.106 A:middle
So, we'll set the
TintAdjustmentMode of the window

00:28:00.296 --> 00:28:03.556 A:middle
to be dimmed, but you'll notice
that there's a problem here.

00:28:04.676 --> 00:28:06.096 A:middle
Not only have we
dimmed the window

00:28:06.346 --> 00:28:08.506 A:middle
but if we show the new
method sheet inside

00:28:08.506 --> 00:28:10.576 A:middle
of the window then it will
become dimmed as well.

00:28:11.016 --> 00:28:13.086 A:middle
So, now our Cancel and
Post button instead

00:28:13.086 --> 00:28:15.686 A:middle
of being red are
desaturated to gray as well.

00:28:16.396 --> 00:28:17.486 A:middle
So, how can we fix that problem?

00:28:18.956 --> 00:28:20.986 A:middle
Well, when I showed you the
TintAdjustmentMode property

00:28:20.986 --> 00:28:23.316 A:middle
earlier, I left something out
which you may have guessed

00:28:23.316 --> 00:28:26.826 A:middle
by now and that's that there's
a second TintAdjustmentMode

00:28:26.876 --> 00:28:27.826 A:middle
conceptually as well.

00:28:27.876 --> 00:28:30.456 A:middle
And this has the same Specific

00:28:30.456 --> 00:28:33.466 A:middle
and Inherited TintAdjusmentMode
just the way the Tint

00:28:33.466 --> 00:28:33.936 A:middle
Color does.

00:28:35.376 --> 00:28:38.776 A:middle
The specific TintAdjustmentMode
review is what you've actually

00:28:38.776 --> 00:28:40.566 A:middle
set with the TintAdjusmentMode
setter

00:28:41.166 --> 00:28:43.296 A:middle
and then the Inherited
TintAdjustmentMode is what you

00:28:43.296 --> 00:28:44.326 A:middle
get back with the getter.

00:28:45.096 --> 00:28:46.906 A:middle
So again, this works the
same way as Tint Color.

00:28:47.706 --> 00:28:50.026 A:middle
And this is where the
AutomaticTintAdjusmentMode comes

00:28:50.026 --> 00:28:50.366 A:middle
into play.

00:28:52.206 --> 00:28:55.256 A:middle
When a view has the Automatic
Specific TintAdjustmentMode then

00:28:55.256 --> 00:28:57.866 A:middle
it will inherit its
superview's TintAdjusmentMode

00:28:57.866 --> 00:29:00.946 A:middle
and if its superview doesn't
have one it will use the system

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

00:28:57.866 --> 00:29:00.946 A:middle
and if its superview doesn't
have one it will use the system

00:29:00.946 --> 00:29:03.636 A:middle
default TintAdjusmentMode,
which is normal.

00:29:04.496 --> 00:29:06.416 A:middle
Again, this is the same
way the tint color works

00:29:06.836 --> 00:29:10.006 A:middle
where if the view has a nil
specific tint color it will

00:29:10.006 --> 00:29:13.786 A:middle
inherit its superviews and if it
has no superview it will inherit

00:29:13.896 --> 00:29:15.126 A:middle
the system default.

00:29:15.716 --> 00:29:18.126 A:middle
So, now if we look at the
example again from earlier

00:29:18.656 --> 00:29:21.206 A:middle
where we set the
TintAdjustmentMode of the window

00:29:21.206 --> 00:29:22.996 A:middle
to be dimmed we'll see

00:29:22.996 --> 00:29:24.916 A:middle
that we're setting the
Specific TintAdjustmentMode,

00:29:25.726 --> 00:29:27.766 A:middle
which becomes the
Inherited TintAdjustmentMode

00:29:27.766 --> 00:29:28.856 A:middle
when its non-automatic

00:29:29.596 --> 00:29:31.556 A:middle
and that's what desaturates
the color of the view.

00:29:31.556 --> 00:29:34.216 A:middle
And then it sends
all of our subviews

00:29:34.216 --> 00:29:37.746 A:middle
to Automatic TintAdjustmentMode,
they inherit their superviews

00:29:37.926 --> 00:29:38.906 A:middle
and become dimmed as well.

00:29:39.696 --> 00:29:41.336 A:middle
Then they become desaturated ad

00:29:41.666 --> 00:29:43.366 A:middle
that repeats throughout
the entire window.

00:29:44.006 --> 00:29:47.596 A:middle
So, this is where we
can take advantage

00:29:47.596 --> 00:29:49.686 A:middle
of the same thing we did
earlier with Tint Color

00:29:49.926 --> 00:29:51.666 A:middle
to created a green
subview hierarchy.

00:29:52.266 --> 00:29:55.356 A:middle
Now we'll set the
TintAdjusmentMode instead

00:29:55.356 --> 00:29:58.246 A:middle
of the Tint Color of this
subview, which is our Tab Bar

00:29:58.246 --> 00:29:59.886 A:middle
in this case to be normal.

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

00:30:00.906 --> 00:30:03.856 A:middle
Again, by setting the
TintAdjusmentMode setter we're

00:30:03.856 --> 00:30:05.466 A:middle
setting the Specific
TintAdjustmentMode.

00:30:06.406 --> 00:30:10.206 A:middle
Then, since it's not automatic,
our view will stop inheriting

00:30:10.256 --> 00:30:12.206 A:middle
from its superview and
become normal as well.

00:30:12.866 --> 00:30:16.506 A:middle
Since it's normal its color
will become resaturated and all

00:30:16.506 --> 00:30:18.836 A:middle
of its subviews that have
Automatic TintAdjusmentModes

00:30:19.046 --> 00:30:20.056 A:middle
will inherit that as well.

00:30:20.846 --> 00:30:22.886 A:middle
So, we'll have this
kind of island of color

00:30:22.926 --> 00:30:25.346 A:middle
within our greater
view-- our greater window,

00:30:25.416 --> 00:30:26.766 A:middle
which is otherwise desaturated.

00:30:27.286 --> 00:30:32.876 A:middle
Now that's what we can use to
bring back the color to our--

00:30:32.876 --> 00:30:34.086 A:middle
to our new message sheets.

00:30:34.476 --> 00:30:35.976 A:middle
But there's one last thing
that we'll need to do,

00:30:36.466 --> 00:30:37.926 A:middle
which is what we're going to do

00:30:37.926 --> 00:30:39.306 A:middle
when the new message
sheet disappears.

00:30:40.436 --> 00:30:42.896 A:middle
So, if we look at the red and
green example from earlier,

00:30:42.986 --> 00:30:46.026 A:middle
when we set the
TintAdjustmentMode of the window

00:30:46.026 --> 00:30:49.886 A:middle
to be dimmed once again that
will replace the inherited value

00:30:50.166 --> 00:30:52.746 A:middle
and desaturate all of
the views in that window.

00:30:53.396 --> 00:30:54.376 A:middle
But if you look carefully,

00:30:54.916 --> 00:30:57.496 A:middle
only the Inherited Tint
Colors are changing.

00:30:58.236 --> 00:31:00.506 A:middle
All of the Specific Tint
Colors remain the same.

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

00:30:58.236 --> 00:31:00.506 A:middle
All of the Specific Tint
Colors remain the same.

00:31:01.116 --> 00:31:03.656 A:middle
So, the red and green are
still there, they're just kind

00:31:03.656 --> 00:31:05.116 A:middle
of hidden by the
stimming effect.

00:31:05.666 --> 00:31:08.216 A:middle
And the great thing
about that is

00:31:08.216 --> 00:31:10.426 A:middle
that when we set the
TintAdjusmentMode

00:31:10.426 --> 00:31:11.646 A:middle
of the window back

00:31:12.406 --> 00:31:16.596 A:middle
to be automatic our Inherited
TintAdjusmentMode goes back

00:31:16.596 --> 00:31:19.526 A:middle
to normal and all of our
colors become resaturated

00:31:19.716 --> 00:31:21.646 A:middle
to the same colors that
they were originally.

00:31:22.286 --> 00:31:25.126 A:middle
So, our view hierarchy returns
to all of its reds and greens.

00:31:26.466 --> 00:31:29.136 A:middle
Alright, let's take that and
use it in our new message sheet.

00:31:29.936 --> 00:31:32.246 A:middle
So, here we have our window
before we showed the new

00:31:32.246 --> 00:31:32.816 A:middle
method sheet.

00:31:33.716 --> 00:31:36.126 A:middle
Then as we show the sheet
we'll set the windows

00:31:36.126 --> 00:31:37.626 A:middle
TintAdjustmentMode to dim

00:31:38.216 --> 00:31:40.696 A:middle
and the sheet's
TintAdjustmentMode to normal.

00:31:41.286 --> 00:31:44.176 A:middle
That way we get exactly what we
want where we have our Cancel

00:31:44.176 --> 00:31:46.556 A:middle
and Post button in red,
even though the rest

00:31:46.556 --> 00:31:47.506 A:middle
of the window is gray.

00:31:48.556 --> 00:31:51.396 A:middle
And finally, when we dismiss
the sheet we'll set the

00:31:51.476 --> 00:31:53.826 A:middle
TintAdjusmentMode of the
window back to be automatic,

00:31:54.136 --> 00:31:55.436 A:middle
so return everything
to its color.

00:31:57.106 --> 00:31:59.406 A:middle
So, that's the Tint Color and
TintAdjusmentMode properties

00:31:59.596 --> 00:32:02.936 A:middle
and how to use them in iOS 7.

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

00:31:59.596 --> 00:32:02.936 A:middle
and how to use them in iOS 7.

00:32:03.096 --> 00:32:05.766 A:middle
Now, another part of
our Messages view is

00:32:05.766 --> 00:32:07.206 A:middle
in the Navigation
Bar at the top.

00:32:07.826 --> 00:32:09.786 A:middle
We have a Favorites
button that you can use

00:32:09.836 --> 00:32:11.426 A:middle
to favorite messages
that you're received.

00:32:12.616 --> 00:32:14.606 A:middle
However, this is the
artwork that we're using

00:32:14.756 --> 00:32:16.846 A:middle
for that Bar Button
item and notice

00:32:16.846 --> 00:32:19.506 A:middle
that it has a gold radiant
color in the artwork.

00:32:19.976 --> 00:32:20.986 A:middle
But when we actually use it

00:32:20.986 --> 00:32:23.496 A:middle
in the Navigation Bar it's
just getting color to be red.

00:32:24.626 --> 00:32:26.546 A:middle
This is generally what
you want actually.

00:32:26.616 --> 00:32:28.636 A:middle
If you look the Compose
button it's shown in red

00:32:28.636 --> 00:32:30.476 A:middle
and that matches the
rest of the Tint Color.

00:32:31.096 --> 00:32:33.896 A:middle
But with our Favorite button
we want to see this gold star

00:32:33.896 --> 00:32:35.146 A:middle
so people will really feel happy

00:32:35.146 --> 00:32:36.516 A:middle
when you favorite
their messages.

00:32:37.476 --> 00:32:38.826 A:middle
So, how can we fix this problem?

00:32:40.266 --> 00:32:43.786 A:middle
Well we're using a concept
called Template Images in iOS 7

00:32:44.236 --> 00:32:45.156 A:middle
to do this recoloring.

00:32:46.026 --> 00:32:47.486 A:middle
When an image is
a template image,

00:32:48.006 --> 00:32:49.206 A:middle
instead of being drawn as--

00:32:49.306 --> 00:32:52.496 A:middle
with its original colors the
image is treated as a stencil.

00:32:53.456 --> 00:32:55.956 A:middle
So, we'll take the shape of
the image and we'll recolor it

00:32:56.076 --> 00:32:57.596 A:middle
to be whatever the
Tint Color is.

00:32:58.476 --> 00:33:00.756 A:middle
And the great thing
about Template Images is

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

00:32:58.476 --> 00:33:00.756 A:middle
And the great thing
about Template Images is

00:33:00.756 --> 00:33:03.486 A:middle
that they can be recolored
to match the rest of the UI

00:33:04.086 --> 00:33:05.176 A:middle
as the Tint Color changes.

00:33:05.606 --> 00:33:09.926 A:middle
However, sometimes
you'll want to opt out

00:33:10.696 --> 00:33:13.646 A:middle
and to let you control this
behavior we have a new property

00:33:13.716 --> 00:33:19.846 A:middle
on UIImage called Rendering
Mode lets you control whether an

00:33:19.846 --> 00:33:22.806 A:middle
image is treated as an
original image and shown

00:33:22.806 --> 00:33:25.296 A:middle
in its full colors or
whether it's treated

00:33:25.296 --> 00:33:26.066 A:middle
as a template image.

00:33:27.196 --> 00:33:29.676 A:middle
Here are the three different
values for Image Rendering Mode

00:33:29.676 --> 00:33:32.306 A:middle
and we'll use our star
image as an example.

00:33:33.146 --> 00:33:35.666 A:middle
Now, the important thing about
how images are rendered is

00:33:35.666 --> 00:33:37.746 A:middle
that it depends on what
context they're used in.

00:33:38.546 --> 00:33:40.026 A:middle
So, we'll talk about
an ImageView

00:33:40.486 --> 00:33:43.946 A:middle
and also a BarButtonItem like
the one in our Navigation Bar.

00:33:45.256 --> 00:33:48.146 A:middle
The Automatic Image
Rendering Mode means

00:33:48.236 --> 00:33:50.296 A:middle
to render the image
either as a template image

00:33:50.426 --> 00:33:53.196 A:middle
or an original image depending
on the context its used in.

00:33:53.946 --> 00:33:56.946 A:middle
So, in our ImageView the
image will just be treated

00:33:56.946 --> 00:33:59.516 A:middle
as its original normal form
and shown with its colors,

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

00:34:00.236 --> 00:34:02.576 A:middle
but because a BarButtonItem
defaults to showing it

00:34:02.656 --> 00:34:05.506 A:middle
as a template image it'll be
used as a template image there.

00:34:06.546 --> 00:34:10.146 A:middle
With the AlwaysOriginal
Rendering Mode the image will

00:34:10.146 --> 00:34:12.246 A:middle
always be treated exactly
in its original form

00:34:12.366 --> 00:34:13.755 A:middle
and we won't touch
any of the pixels.

00:34:15.036 --> 00:34:18.906 A:middle
With the AlwaysTemplate
Rendering Mode we'll always

00:34:18.906 --> 00:34:21.416 A:middle
treat it as a template image
and it will always be recolored.

00:34:21.416 --> 00:34:24.216 A:middle
So, you can think of the
Automatic Rendering Mode

00:34:24.216 --> 00:34:26.606 A:middle
as saying you figure out
what to do with my image.

00:34:27.166 --> 00:34:29.565 A:middle
And the AlwaysOriginal and
AlwaysTemplate Rendering Modes

00:34:29.735 --> 00:34:32.565 A:middle
as saying I want full control
and this is what I'm specifying

00:34:32.565 --> 00:34:34.626 A:middle
as a behavior for
this particular image.

00:34:35.886 --> 00:34:38.045 A:middle
So, now let's go back
to our Navigation Bar

00:34:38.116 --> 00:34:38.976 A:middle
and see how that applies.

00:34:39.806 --> 00:34:42.946 A:middle
When we create our image, in
this case using image names,

00:34:44.116 --> 00:34:46.786 A:middle
it's returned with the Automatic
Rendering Mode by default.

00:34:47.396 --> 00:34:49.525 A:middle
And again, this means
to do the default

00:34:49.525 --> 00:34:50.585 A:middle
for the context it's used in

00:34:50.585 --> 00:34:52.996 A:middle
and that's why our image
is getting recolored to red

00:34:53.426 --> 00:34:54.985 A:middle
when we use it in
a BarButtonItem.

00:34:56.306 --> 00:35:00.016 A:middle
So, all we need to do is use
the Imagerendering Mode method

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

00:34:56.306 --> 00:35:00.016 A:middle
So, all we need to do is use
the Imagerendering Mode method

00:35:00.376 --> 00:35:01.456 A:middle
on the image that we have

00:35:02.006 --> 00:35:03.926 A:middle
and now we'll convert
the ImagesRenderingMode

00:35:04.096 --> 00:35:05.366 A:middle
into whatever we've specified.

00:35:06.206 --> 00:35:08.876 A:middle
So, since we're passing an
AlwaysOriginal our image now

00:35:08.876 --> 00:35:12.146 A:middle
becomes an original image
and it's shown in full color

00:35:12.416 --> 00:35:13.386 A:middle
in the Navigation Bar.

00:35:13.986 --> 00:35:19.266 A:middle
Now, this same behavior
applies to the Tab Bars

00:35:19.546 --> 00:35:21.366 A:middle
and the Tab Bar items
that shown within them.

00:35:22.196 --> 00:35:25.586 A:middle
Here, by default an image
that you set will be recolored

00:35:25.586 --> 00:35:28.016 A:middle
to the Tint Color when the
Tab Bar items is collected

00:35:28.016 --> 00:35:31.246 A:middle
and it will be colored gray
when the item is uncollected.

00:35:32.486 --> 00:35:34.776 A:middle
We used to have a method
called, Set Finished Image

00:35:34.776 --> 00:35:37.476 A:middle
with Finished Unselected Image.

00:35:37.946 --> 00:35:40.626 A:middle
And that allowed you to
set images that were used

00:35:40.736 --> 00:35:42.346 A:middle
for this selected
and unselected state

00:35:42.746 --> 00:35:43.916 A:middle
and it wouldn't be recolored.

00:35:44.566 --> 00:35:46.796 A:middle
So, this method was
actually doing two completely

00:35:46.796 --> 00:35:47.406 A:middle
separate things.

00:35:47.896 --> 00:35:50.516 A:middle
One of them was specifying
that the images

00:35:50.516 --> 00:35:52.286 A:middle
that you set should
not be recolored

00:35:52.836 --> 00:35:55.336 A:middle
and the other was
setting different selected

00:35:55.336 --> 00:35:56.356 A:middle
and unselected images.

00:35:57.266 --> 00:35:59.306 A:middle
So, we've actually
deprecated this method in iOS 7

00:35:59.406 --> 00:36:02.886 A:middle
and you can now do either of
these two things separately or,

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

00:35:59.406 --> 00:36:02.886 A:middle
and you can now do either of
these two things separately or,

00:36:02.886 --> 00:36:03.896 A:middle
of course, combine
them together.

00:36:05.286 --> 00:36:07.946 A:middle
You can use the AlwaysOriginal
Rendering Mode to specify

00:36:07.946 --> 00:36:10.076 A:middle
that the image you set
should not be recolored

00:36:10.076 --> 00:36:12.346 A:middle
and this was the finished
part of the old method.

00:36:13.666 --> 00:36:15.906 A:middle
And you can use the Image
and SelectedImage properties

00:36:15.906 --> 00:36:18.746 A:middle
that we talked about earlier
to set images that are separate

00:36:19.126 --> 00:36:20.756 A:middle
for the unselected
and selected states.

00:36:21.466 --> 00:36:23.216 A:middle
And, of course, you can use
either of these separately

00:36:23.366 --> 00:36:24.316 A:middle
or combine them together

00:36:24.466 --> 00:36:25.906 A:middle
to get exactly the
effect that you want.

00:36:26.406 --> 00:36:32.226 A:middle
So, in the profile view
of our application we show

00:36:32.226 --> 00:36:35.006 A:middle
that segmented control and
this left the user to choose

00:36:35.066 --> 00:36:36.736 A:middle
to be Xs or Os in our game.

00:36:37.996 --> 00:36:40.296 A:middle
And we're just using a standard
UI Segmented Control here.

00:36:40.976 --> 00:36:42.936 A:middle
But we'd like to customize
it a little to better fit

00:36:42.936 --> 00:36:44.016 A:middle
with our applications.

00:36:45.016 --> 00:36:47.296 A:middle
So, first of we'll set a
custom background image

00:36:47.326 --> 00:36:50.486 A:middle
for the Segmented Control and
notice that the background image

00:36:50.526 --> 00:36:52.546 A:middle
that we set is not
getting recolored along

00:36:52.546 --> 00:36:53.236 A:middle
with the Tint Color.

00:36:54.106 --> 00:36:56.126 A:middle
That's because Segmented
Controls default

00:36:56.126 --> 00:36:58.736 A:middle
to treating their background
images as original images.

00:36:59.756 --> 00:37:01.806 A:middle
So, they won't be
recolored and, of course,

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

00:36:59.756 --> 00:37:01.806 A:middle
So, they won't be
recolored and, of course,

00:37:01.856 --> 00:37:04.416 A:middle
you can use the AlwaysTemplate
Rendering Mode if you want

00:37:04.416 --> 00:37:06.036 A:middle
to opt back on into
that behavior.

00:37:07.106 --> 00:37:09.916 A:middle
Now the foreground images the
X and the O on the other hand,

00:37:10.276 --> 00:37:12.586 A:middle
they're being recolored
because they're getting treated

00:37:12.586 --> 00:37:13.486 A:middle
as Template images.

00:37:14.566 --> 00:37:17.376 A:middle
So, to opt them out of that
we can use the same image

00:37:17.376 --> 00:37:19.196 A:middle
with Rendering Mode
Method and pass

00:37:19.196 --> 00:37:20.926 A:middle
in the AlwaysOriginal
Rendering Mode.

00:37:21.486 --> 00:37:24.926 A:middle
And we'll use that here because
in our application Xs are always

00:37:24.926 --> 00:37:26.396 A:middle
red and Os are always green.

00:37:26.656 --> 00:37:30.426 A:middle
So, we want them to keep
their original colors.

00:37:30.646 --> 00:37:34.616 A:middle
Now, Steppers and System buttons
have actually the same behavior

00:37:34.616 --> 00:37:36.336 A:middle
we just talked about
for Segmented Control.

00:37:36.926 --> 00:37:39.216 A:middle
The thing to remember is
that foreground images

00:37:39.246 --> 00:37:41.656 A:middle
that you set default to
being Template Images

00:37:42.236 --> 00:37:44.996 A:middle
and background images default
to being Original Images.

00:37:46.936 --> 00:37:49.806 A:middle
Everywhere else in UIKit
that we use images defaults

00:37:49.806 --> 00:37:51.526 A:middle
to treating them
as original images.

00:37:52.076 --> 00:37:54.376 A:middle
This includes things like
Image Used and the images

00:37:54.376 --> 00:37:55.926 A:middle
that you set in Table
View Cells.

00:37:56.876 --> 00:37:59.566 A:middle
So, if you look here in this
section, the Statistics section

00:37:59.566 --> 00:38:02.746 A:middle
of our Profile view, you'll see
that when we set those images

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

00:37:59.566 --> 00:38:02.746 A:middle
of our Profile view, you'll see
that when we set those images

00:38:02.856 --> 00:38:05.366 A:middle
on our Table View Cells
they look kind of plain

00:38:05.536 --> 00:38:07.416 A:middle
because they're being--
they're just original images

00:38:07.466 --> 00:38:09.816 A:middle
so they're just shown in
their original color and we'd

00:38:09.816 --> 00:38:11.816 A:middle
like to better match with
the rest of our application

00:38:12.316 --> 00:38:14.756 A:middle
by making them recolorized
to match the Tint Color.

00:38:16.096 --> 00:38:17.886 A:middle
So, to do that we'll
use the same Image

00:38:17.886 --> 00:38:18.836 A:middle
with Rendering Mode Method

00:38:18.836 --> 00:38:21.356 A:middle
and this time we'll convert
them to Template Images.

00:38:22.016 --> 00:38:23.566 A:middle
And this way they'll
match the Tint Color

00:38:23.566 --> 00:38:25.606 A:middle
and they'll change along with
the rest of the application.

00:38:26.196 --> 00:38:28.916 A:middle
So, this is a great technique
to consider if you want

00:38:28.916 --> 00:38:31.266 A:middle
to add some color and match--

00:38:31.306 --> 00:38:33.296 A:middle
better match with the
rest of your application

00:38:33.356 --> 00:38:35.096 A:middle
as it changes color
and it saturates.

00:38:35.096 --> 00:38:40.886 A:middle
So, let's talk about Status Bar,

00:38:40.966 --> 00:38:42.166 A:middle
the Status Bar a
little bit more.

00:38:43.506 --> 00:38:46.986 A:middle
The change to the Status Bar to
make it always transparent means

00:38:46.986 --> 00:38:47.976 A:middle
that it's really important

00:38:48.116 --> 00:38:50.686 A:middle
that your application applies
exactly the right background

00:38:50.686 --> 00:38:51.626 A:middle
behind the Status Bar.

00:38:52.536 --> 00:38:54.496 A:middle
And as I said earlier,
it's the View Controller

00:38:54.496 --> 00:38:55.216 A:middle
that provides that.

00:38:56.036 --> 00:38:59.206 A:middle
Well, traditionally in iOS
the Status Bar was actually

00:38:59.206 --> 00:39:01.236 A:middle
controlled by UI
Applications properties

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

00:38:59.206 --> 00:39:01.236 A:middle
controlled by UI
Applications properties

00:39:01.606 --> 00:39:03.236 A:middle
where you set the
style and hiddenness.

00:39:04.186 --> 00:39:06.126 A:middle
And this made it very
easy for different places

00:39:06.126 --> 00:39:08.886 A:middle
in your application to set this
Status Bar style and to stomp

00:39:08.886 --> 00:39:11.466 A:middle
on the value that
someone else had set.

00:39:11.606 --> 00:39:14.506 A:middle
In iOS 7 we want to make it
really easy for View Controllers

00:39:14.586 --> 00:39:16.366 A:middle
to control exactly
the Status Bar style

00:39:16.366 --> 00:39:18.146 A:middle
that matches the background
that they've shown.

00:39:18.996 --> 00:39:20.866 A:middle
So, we're introducing a
new system to allow you

00:39:20.866 --> 00:39:22.786 A:middle
to control the Status
Bar's appearance.

00:39:24.136 --> 00:39:27.396 A:middle
The way this works is in your
View Controller you can override

00:39:27.426 --> 00:39:28.396 A:middle
either of these two methods

00:39:28.916 --> 00:39:31.996 A:middle
to specify whether you want the
Status Bar to be hidden or not

00:39:32.366 --> 00:39:34.566 A:middle
and what style you want it to
be shown as when its visible.

00:39:35.956 --> 00:39:38.896 A:middle
And when you're using this
new system the UI Application

00:39:38.896 --> 00:39:41.576 A:middle
methods to set the Status Bar
style won't do anything anymore.

00:39:42.006 --> 00:39:44.726 A:middle
Instead we'll find the
current View Controller that's

00:39:44.726 --> 00:39:47.796 A:middle
underneath the Status Bar
and we'll ask it what kind

00:39:48.006 --> 00:39:49.346 A:middle
of Status Bar style it wants.

00:39:50.056 --> 00:39:51.996 A:middle
So, this allows your View
Controller to make sure

00:39:51.996 --> 00:39:53.886 A:middle
that its background and
its Status Bar match.

00:39:55.116 --> 00:39:57.036 A:middle
And actually the
values that you return

00:39:57.036 --> 00:39:59.726 A:middle
from these two methods don't
have to be static values either.

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

00:40:00.056 --> 00:40:03.036 A:middle
You can change them over
time, but the important thing

00:40:03.036 --> 00:40:05.946 A:middle
with changing them is that
after you make a change you have

00:40:05.946 --> 00:40:08.466 A:middle
to call setNeedsStatusBar
AppearanceUpdate

00:40:08.836 --> 00:40:11.716 A:middle
on the View Controller that's
changed and this lets us know

00:40:11.806 --> 00:40:13.906 A:middle
to update the Status
Bar to match the changes

00:40:14.006 --> 00:40:14.856 A:middle
that you've just applied.

00:40:15.586 --> 00:40:17.846 A:middle
And then we'll redisplay
the Status Bar just

00:40:17.846 --> 00:40:18.566 A:middle
as you specified.

00:40:19.156 --> 00:40:22.316 A:middle
And these Status Bar
changes apply actually

00:40:22.316 --> 00:40:24.286 A:middle
to container View
Controllers as well.

00:40:24.926 --> 00:40:28.496 A:middle
So, all of our standard UIKit
Container View Controllers

00:40:28.876 --> 00:40:30.086 A:middle
like Tab Bar controllers

00:40:30.086 --> 00:40:32.296 A:middle
and Navigation Controllers
will implement this

00:40:32.376 --> 00:40:33.356 A:middle
for you automatically.

00:40:33.926 --> 00:40:35.766 A:middle
So, they'll automatically
forward control

00:40:35.766 --> 00:40:38.226 A:middle
of the Status Bar to
whichever View Controller

00:40:38.506 --> 00:40:41.166 A:middle
within them is underneath
the area of the Status Bar.

00:40:41.896 --> 00:40:43.826 A:middle
And you can implement
this in your own container

00:40:43.826 --> 00:40:44.846 A:middle
of View Controllers as well.

00:40:45.556 --> 00:40:46.486 A:middle
It's actually very easy.

00:40:46.746 --> 00:40:48.476 A:middle
There's another two
methods that you implement

00:40:48.476 --> 00:40:50.826 A:middle
in your Container View
Controller to return

00:40:50.826 --> 00:40:52.756 A:middle
which of its children
should be used

00:40:52.906 --> 00:40:56.356 A:middle
for determining what the Status
Bar should use for its style

00:40:56.576 --> 00:40:57.316 A:middle
or for its hiddenness.

00:40:58.586 --> 00:41:01.486 A:middle
And once again whenever you
change the value return from one

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

00:40:58.586 --> 00:41:01.486 A:middle
And once again whenever you
change the value return from one

00:41:01.486 --> 00:41:03.936 A:middle
of these you can-- you need
to call the same method,

00:41:04.226 --> 00:41:07.736 A:middle
setNeedStatusBar
AppearanceUpdates to let us know

00:41:07.736 --> 00:41:11.266 A:middle
that the state of your View
Controller has changed.

00:41:11.396 --> 00:41:14.216 A:middle
Now, this change to how
the Status Bar is set

00:41:14.216 --> 00:41:17.356 A:middle
up is a very big
change and it's global

00:41:17.356 --> 00:41:18.526 A:middle
to your entire application.

00:41:19.206 --> 00:41:22.426 A:middle
So your application will either
use entirely the new system

00:41:22.516 --> 00:41:23.896 A:middle
or entirely the old system.

00:41:24.616 --> 00:41:26.196 A:middle
And we have a global
switch that you can use

00:41:26.226 --> 00:41:27.976 A:middle
to specify which system to use.

00:41:28.916 --> 00:41:34.106 A:middle
It's an info.plist key
called UIViewControllerbase

00:41:34.456 --> 00:41:35.286 A:middle
StatusBarAppearance.

00:41:35.286 --> 00:41:37.586 A:middle
And you can set it
to yes or no to opt

00:41:37.586 --> 00:41:40.126 A:middle
into the new system
or remain out of it.

00:41:41.416 --> 00:41:43.756 A:middle
We've used that- we've
opted it into the system

00:41:43.826 --> 00:41:46.046 A:middle
in our sample application
and in most

00:41:46.046 --> 00:41:47.436 A:middle
of our View Controllers
we haven't had

00:41:47.466 --> 00:41:49.806 A:middle
to override the default
values of the two methods.

00:41:49.806 --> 00:41:53.516 A:middle
But one place that we are using
them is in our Game view here.

00:41:54.676 --> 00:41:56.946 A:middle
This view defaults to
showing a white background

00:41:57.376 --> 00:42:00.016 A:middle
but when the game is over it'll
actually invert the background

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

00:41:57.376 --> 00:42:00.016 A:middle
but when the game is over it'll
actually invert the background

00:42:00.046 --> 00:42:03.346 A:middle
to be black and so it will
invert the Status Bar to match

00:42:03.376 --> 00:42:04.866 A:middle
that change, like this.

00:42:05.526 --> 00:42:07.806 A:middle
And this is really easy to do.

00:42:08.456 --> 00:42:10.246 A:middle
You just have to implement
two pieces of code.

00:42:11.256 --> 00:42:13.686 A:middle
First, override
preferredStatusBarStyle

00:42:14.376 --> 00:42:16.846 A:middle
and then we'll check if
the game is finished or not

00:42:17.286 --> 00:42:20.106 A:middle
and return either light
content if it's over or default

00:42:20.106 --> 00:42:22.326 A:middle
if it's still in
progress and then

00:42:22.326 --> 00:42:24.736 A:middle
when our game state
changes we just call

00:42:24.916 --> 00:42:27.176 A:middle
needStatusBarAppearanceUpdate,
as I mentioned earlier.

00:42:27.936 --> 00:42:29.546 A:middle
However, there's one
special thing here,

00:42:30.216 --> 00:42:31.676 A:middle
which is that we've
put this call

00:42:31.956 --> 00:42:34.576 A:middle
to update the appearance
inside of an animation block.

00:42:35.366 --> 00:42:38.086 A:middle
And when you do this we'll
automatically animate the Status

00:42:38.136 --> 00:42:40.836 A:middle
Bar Appearance change to
match the same animation

00:42:40.876 --> 00:42:42.106 A:middle
as the block that
it's inside of.

00:42:42.556 --> 00:42:44.936 A:middle
So, we can animate along with
our background color change

00:42:44.936 --> 00:42:48.706 A:middle
and they'll both fit
together perfectly.

00:42:48.706 --> 00:42:52.506 A:middle
So, let's take a look at
that again in slow motion.

00:42:53.896 --> 00:42:55.376 A:middle
Great, alright now let's talk

00:42:55.376 --> 00:42:57.136 A:middle
about how you can
create Custom Controls.

00:42:58.116 --> 00:43:00.166 A:middle
We worked really hard
on the UIKit Controls

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

00:42:58.116 --> 00:43:00.166 A:middle
We worked really hard
on the UIKit Controls

00:43:00.456 --> 00:43:01.956 A:middle
to make sure they
always work great.

00:43:02.626 --> 00:43:04.526 A:middle
And I'd like to show you how
you can make your own Custom

00:43:04.526 --> 00:43:07.576 A:middle
Controls work just as well.

00:43:07.766 --> 00:43:10.656 A:middle
However, before you start making
the Custom Control you should

00:43:10.656 --> 00:43:13.676 A:middle
always consider whether
there's a standard UIKit Control

00:43:13.906 --> 00:43:16.716 A:middle
that you can use in customized
to work the way that you'd like.

00:43:17.366 --> 00:43:20.866 A:middle
So, in our Profile view we had a
really Custom Segmented Control

00:43:20.866 --> 00:43:24.046 A:middle
but we were able to customize
it just by using images

00:43:24.166 --> 00:43:26.556 A:middle
and rendering modes to get
the appearance that we wanted.

00:43:27.936 --> 00:43:30.586 A:middle
If you use Standard Controls
then you will automatically get

00:43:30.586 --> 00:43:33.556 A:middle
consistency for your users and
it'll be less work for you.

00:43:33.876 --> 00:43:35.696 A:middle
This is always something
to check before you start.

00:43:36.236 --> 00:43:38.806 A:middle
Now the first Custom Control

00:43:38.806 --> 00:43:41.806 A:middle
in our application is this
Rating Control that's shown

00:43:41.806 --> 00:43:43.436 A:middle
at the top of the
Game History view.

00:43:44.876 --> 00:43:47.596 A:middle
This is a pretty simple control
that lets you set a rating,

00:43:47.976 --> 00:43:50.596 A:middle
a number of stars for previous
games that you've played.

00:43:51.106 --> 00:43:55.356 A:middle
And to tell you how we built
this Custom Control I'd

00:43:55.356 --> 00:43:56.586 A:middle
like to tell you a little secret

00:43:56.586 --> 00:43:58.426 A:middle
about how we make
our UIKit Controls.

00:43:58.946 --> 00:44:03.016 A:middle
When we create a control
like this UI Button in iOS 7,

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

00:43:58.946 --> 00:44:03.016 A:middle
When we create a control
like this UI Button in iOS 7,

00:44:03.496 --> 00:44:05.186 A:middle
we don't actually start
with a blank slate.

00:44:06.036 --> 00:44:10.176 A:middle
Instead, we use other existing
standard UI Views as pieces,

00:44:10.176 --> 00:44:12.356 A:middle
building blocks to put
together these controls.

00:44:13.056 --> 00:44:16.376 A:middle
So a button consists of
Image Views and UI Labels.

00:44:17.236 --> 00:44:19.586 A:middle
And when we do that it
automatically gives us the great

00:44:19.636 --> 00:44:21.666 A:middle
Text Rendering support
from UI Label

00:44:22.246 --> 00:44:24.516 A:middle
and it also gives us
support for all of UI Image

00:44:24.516 --> 00:44:25.366 A:middle
like Rendering Modes

00:44:25.486 --> 00:44:27.776 A:middle
and Resizable Images
in the UIImage View.

00:44:29.096 --> 00:44:31.666 A:middle
Similarly steppers
actually consist

00:44:32.026 --> 00:44:33.566 A:middle
of an Image View
and two buttons.

00:44:33.566 --> 00:44:36.986 A:middle
And this gives us not only
its appearance but also a lot

00:44:36.986 --> 00:44:38.906 A:middle
of interactivity for free.

00:44:39.716 --> 00:44:42.656 A:middle
So, we've taken the same
approach in our Custom Control

00:44:44.086 --> 00:44:47.196 A:middle
and here we're using an image
view to draw the background

00:44:48.056 --> 00:44:49.346 A:middle
and we're using five
different buttons

00:44:49.346 --> 00:44:51.046 A:middle
to draw the foreground content.

00:44:52.276 --> 00:44:54.706 A:middle
In fact, with button it's
even easier for us here

00:44:55.096 --> 00:44:58.006 A:middle
because we can set different
selected and unselected images

00:44:58.046 --> 00:44:59.736 A:middle
for the button and to toggle

00:44:59.736 --> 00:45:02.026 A:middle
between them we can just
set the Selective Properties

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

00:44:59.736 --> 00:45:02.026 A:middle
between them we can just
set the Selective Properties

00:45:02.256 --> 00:45:05.436 A:middle
of our buttons.

00:45:05.516 --> 00:45:08.486 A:middle
Now, an important thing that we
had to do here when we wanted

00:45:08.486 --> 00:45:11.066 A:middle
to use buttons inside
of our custom control is

00:45:11.066 --> 00:45:12.606 A:middle
to use the UI button
type Custom.

00:45:13.546 --> 00:45:16.456 A:middle
And when you use a Custom type
button this opts you out of all

00:45:16.456 --> 00:45:18.906 A:middle
of the standard system
animations and appearances

00:45:18.906 --> 00:45:21.346 A:middle
so that you can fully
customize the button to look

00:45:21.346 --> 00:45:24.106 A:middle
like exactly what you want.

00:45:24.266 --> 00:45:25.736 A:middle
One other thing you
can do if you want

00:45:25.736 --> 00:45:27.996 A:middle
to customize your
button even further is

00:45:27.996 --> 00:45:30.756 A:middle
to subclass the UI button and
override these three methods.

00:45:31.876 --> 00:45:34.606 A:middle
This lets you exactly control
the positioning of the images

00:45:34.606 --> 00:45:36.506 A:middle
and the text that's
shown in the button

00:45:36.926 --> 00:45:39.066 A:middle
so you can get exactly
the effect that you want.

00:45:39.066 --> 00:45:44.456 A:middle
So, now let's take a closer look
at the background that we show.

00:45:45.386 --> 00:45:47.966 A:middle
As I mentioned earlier, it's
an image that's being shown

00:45:47.966 --> 00:45:51.226 A:middle
in an ImageView and we're
actually dynamically creating

00:45:51.226 --> 00:45:54.046 A:middle
this image at runtime,
which is really easy to do

00:45:54.496 --> 00:45:56.716 A:middle
with the UIGraphics
function that allows you

00:45:56.716 --> 00:45:59.866 A:middle
to create a new image context,
draw into it and then pull

00:45:59.866 --> 00:46:01.406 A:middle
out an image from the context.

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

00:45:59.866 --> 00:46:01.406 A:middle
out an image from the context.

00:46:02.376 --> 00:46:05.926 A:middle
So, we're using UI [Inaudible]
path to do our drawings here

00:46:06.516 --> 00:46:08.816 A:middle
and one thing you will
notice in iOS 7 is

00:46:08.816 --> 00:46:13.226 A:middle
that UI [Inaudible] path has a
new, draws rounded rectangles

00:46:13.226 --> 00:46:16.346 A:middle
in a new way in iOS 7, a bit
smoother and more continuous.

00:46:16.956 --> 00:46:18.196 A:middle
So you'll get better curves

00:46:18.196 --> 00:46:20.886 A:middle
for your [Inaudible]
paths automatically

00:46:21.156 --> 00:46:22.926 A:middle
by using UI [Inaudible] path.

00:46:23.636 --> 00:46:27.006 A:middle
Once we have our dynamic image
we just set it on the ImageView.

00:46:28.036 --> 00:46:29.776 A:middle
However, we'd like
this background image

00:46:29.816 --> 00:46:31.606 A:middle
to follow the Tint Color
of the application.

00:46:32.256 --> 00:46:33.576 A:middle
And that's really easy to do.

00:46:34.036 --> 00:46:37.056 A:middle
Just like before we'll set the
Rendering Mode of the image

00:46:37.446 --> 00:46:39.246 A:middle
by calling
ImagewithRenderingMode

00:46:39.386 --> 00:46:41.236 A:middle
after we've dynamically
created the image

00:46:41.796 --> 00:46:43.076 A:middle
and passing in AlwaysTemplate.

00:46:43.976 --> 00:46:46.476 A:middle
And we can actually combine
the Rendering Mode call

00:46:46.866 --> 00:46:48.226 A:middle
with Resizable Image calls.

00:46:48.966 --> 00:46:51.106 A:middle
So after we change
that Rendering Mode

00:46:51.106 --> 00:46:54.156 A:middle
of our image we'll pass that
Resizable Image with Cap Insets

00:46:54.526 --> 00:46:57.486 A:middle
to make it both a template
image and a Resizable Image.

00:46:58.276 --> 00:47:01.016 A:middle
And this way our-- we can use
this same background image

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

00:46:58.276 --> 00:47:01.016 A:middle
And this way our-- we can use
this same background image

00:47:01.236 --> 00:47:04.126 A:middle
in all of our ratings controls
and no matter what size

00:47:04.126 --> 00:47:07.016 A:middle
that they're shown as, so we
can just reuse that one image.

00:47:07.566 --> 00:47:11.676 A:middle
No another way that we got
a lot of the functionality

00:47:11.676 --> 00:47:15.056 A:middle
of our Ratings Control for free
is by subclassing UI Control.

00:47:16.256 --> 00:47:18.036 A:middle
When you do that you'll
automatically be able

00:47:18.286 --> 00:47:21.876 A:middle
to participate in the Target
Action System the UI Control

00:47:21.876 --> 00:47:25.456 A:middle
Implements and, in fact, UI
Control will even send all

00:47:25.456 --> 00:47:28.886 A:middle
of the touch related action
methods for you automatically.

00:47:30.316 --> 00:47:33.206 A:middle
However we'd like to go even
further with our Rating Control

00:47:33.496 --> 00:47:36.076 A:middle
because we also have
a value associated

00:47:36.076 --> 00:47:38.036 A:middle
with the control
which is its rating.

00:47:39.516 --> 00:47:41.666 A:middle
So, here when a user
touches a button,

00:47:42.156 --> 00:47:45.536 A:middle
after we set the rating we'll
also send all target action

00:47:45.536 --> 00:47:48.686 A:middle
events for the Value
Changed UI Control Event.

00:47:49.526 --> 00:47:51.796 A:middle
In this way we can use
Value Changed Events

00:47:52.256 --> 00:47:55.446 A:middle
in our View Controller to add
ourself, the View Controller

00:47:56.046 --> 00:47:58.476 A:middle
as a target and the
Change Rating Method

00:47:58.476 --> 00:48:00.676 A:middle
on our View Controller will
automatically get called

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

00:47:58.476 --> 00:48:00.676 A:middle
on our View Controller will
automatically get called

00:48:00.976 --> 00:48:03.296 A:middle
whenever the user changes
the rating of the control.

00:48:03.906 --> 00:48:07.366 A:middle
So, the next view that we have,

00:48:07.476 --> 00:48:10.336 A:middle
Custom View in our
application is Account View.

00:48:11.176 --> 00:48:13.606 A:middle
In our Profile we show you
here the number of victories

00:48:13.606 --> 00:48:14.546 A:middle
and defeats that you have

00:48:15.016 --> 00:48:17.076 A:middle
and to make things a little
more fun we'll show them

00:48:17.076 --> 00:48:18.026 A:middle
as tally marks here.

00:48:18.646 --> 00:48:22.656 A:middle
So, we're doing this
just by overriding UIView

00:48:22.806 --> 00:48:24.346 A:middle
and by implementing
our own draw drawRect

00:48:24.706 --> 00:48:27.106 A:middle
because this is a
pretty simple to draw

00:48:27.106 --> 00:48:28.796 A:middle
and it's one single
continuous region.

00:48:28.796 --> 00:48:33.716 A:middle
In our drawRect we're actually
using our current Tint Color

00:48:34.386 --> 00:48:37.636 A:middle
which allows us-- which we can
set on the graphics context

00:48:37.636 --> 00:48:39.666 A:middle
and then do any drawing
that we do normally.

00:48:41.036 --> 00:48:44.286 A:middle
So, the Inherited Tint Color
that's returned is actually

00:48:44.286 --> 00:48:45.456 A:middle
guaranteed to always be nil

00:48:45.856 --> 00:48:48.056 A:middle
because it'll inherit
its superview

00:48:48.286 --> 00:48:50.556 A:middle
if the Specific Tint
Color of the view is nil

00:48:50.986 --> 00:48:52.646 A:middle
and it'll use the
system default color

00:48:52.756 --> 00:48:53.836 A:middle
if it doesn't have a superview.

00:48:54.436 --> 00:48:57.186 A:middle
So, we can always rely on the
tint color to be a real color

00:48:57.186 --> 00:48:58.426 A:middle
that we can use to draw with.

00:48:59.516 --> 00:49:01.276 A:middle
However, there's one last
thing that you need to know

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

00:48:59.516 --> 00:49:01.276 A:middle
However, there's one last
thing that you need to know

00:49:01.276 --> 00:49:04.066 A:middle
about Tint Color and that's how
to update it when it changes.

00:49:04.416 --> 00:49:08.626 A:middle
Whenever the Tint Color changes
we automatically call the

00:49:08.686 --> 00:49:11.026 A:middle
tintColorDidChange method
on all of your views.

00:49:11.706 --> 00:49:14.586 A:middle
This is a new method that kind
of behaves as a notification

00:49:14.586 --> 00:49:18.076 A:middle
to your view to tell it needs
to update anything that it has

00:49:18.206 --> 00:49:19.656 A:middle
that was using old Tint Color.

00:49:21.036 --> 00:49:23.876 A:middle
So, if we look at changing the
Tint Color of the window to red

00:49:24.466 --> 00:49:26.426 A:middle
after the Inherited
Tint Color changes

00:49:26.796 --> 00:49:28.946 A:middle
that tintColorDidChange
fires to that view

00:49:28.946 --> 00:49:32.266 A:middle
and the same thing happens for
the subviews and their subviews.

00:49:32.866 --> 00:49:35.346 A:middle
So, everything in the window
will automatically get a

00:49:35.376 --> 00:49:37.566 A:middle
tintColorDidChange
notification either

00:49:37.566 --> 00:49:38.976 A:middle
when its own Tint Color changes

00:49:39.456 --> 00:49:42.096 A:middle
or when its Inherited
Tint Color changes due

00:49:42.096 --> 00:49:43.286 A:middle
to changes in superview.

00:49:44.536 --> 00:49:46.476 A:middle
And the same thing happens
automatically for you

00:49:46.736 --> 00:49:48.996 A:middle
when the TintAdjustmentMode
changes for your view.

00:49:49.646 --> 00:49:51.296 A:middle
So again, if we set the window

00:49:51.296 --> 00:49:54.976 A:middle
to be dimmed its Inherited
Tint Color will change to gray

00:49:55.486 --> 00:49:58.466 A:middle
and tintColorDidChange will
be called both on the window

00:49:58.896 --> 00:50:00.686 A:middle
and all of its subviews
and their subviews

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

00:49:58.896 --> 00:50:00.686 A:middle
and all of its subviews
and their subviews

00:50:01.116 --> 00:50:04.316 A:middle
as their Tint Colors
change as well.

00:50:04.516 --> 00:50:06.196 A:middle
So, going back to
our Count view,

00:50:06.856 --> 00:50:09.676 A:middle
all we need to do is
override tintColorDidChange

00:50:10.576 --> 00:50:14.126 A:middle
and then we'll just tell our
view that it needs to redraw

00:50:14.356 --> 00:50:15.576 A:middle
by calling setNeedstoSite.

00:50:16.386 --> 00:50:18.336 A:middle
Of course, in our Count
view we're using setNeedsto

00:50:18.396 --> 00:50:21.856 A:middle
[Inaudible] so that we only have
to redraw the part of our view

00:50:21.856 --> 00:50:25.376 A:middle
that uses the Tint Color itself.

00:50:25.376 --> 00:50:27.526 A:middle
Now another place that
we'd like to use Tint Color

00:50:27.526 --> 00:50:29.886 A:middle
in our application is
in this Table View Cell.

00:50:30.776 --> 00:50:35.286 A:middle
Here we use the Tint Color as
the detail labels text color

00:50:35.726 --> 00:50:39.296 A:middle
and this will help emphasize
the result of previous games.

00:50:40.506 --> 00:50:42.676 A:middle
Once again, we use
tintColorDidChange

00:50:43.236 --> 00:50:46.556 A:middle
and this implementation will
actually take the Tint Color

00:50:46.556 --> 00:50:48.296 A:middle
of our current view and set it

00:50:48.296 --> 00:50:50.196 A:middle
as the Text Color
of our detail label.

00:50:50.756 --> 00:50:53.136 A:middle
And this will make our detail
label match the Tint Color

00:50:53.426 --> 00:50:56.206 A:middle
and also automatically update
as the Tint Color changes

00:50:56.246 --> 00:50:57.386 A:middle
or becomes desaturated.

00:50:57.946 --> 00:51:01.586 A:middle
So, there's one last really
important thing to consider

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

00:50:57.946 --> 00:51:01.586 A:middle
So, there's one last really
important thing to consider

00:51:01.586 --> 00:51:03.076 A:middle
when you're implementing
Custom Controls

00:51:03.076 --> 00:51:04.466 A:middle
and that's Accessibility.

00:51:05.416 --> 00:51:07.316 A:middle
It's really important to
implement accessibility

00:51:07.316 --> 00:51:09.876 A:middle
in your apps and in your
Custom Controls so that all

00:51:09.876 --> 00:51:12.736 A:middle
of your users can really
enjoy using your applications.

00:51:13.706 --> 00:51:14.866 A:middle
It's also really easy to do.

00:51:14.866 --> 00:51:19.336 A:middle
So, if we look at our Ratings
Control it acts as kind

00:51:19.336 --> 00:51:21.556 A:middle
of a container for the
buttons that are inside of it.

00:51:22.126 --> 00:51:24.586 A:middle
So, we'll return No for
is accessibility element

00:51:24.726 --> 00:51:26.296 A:middle
of the control itself.

00:51:26.296 --> 00:51:29.336 A:middle
And that will cause the
accessibility system to look

00:51:29.406 --> 00:51:32.176 A:middle
for the subviews of the
control and treat them

00:51:32.176 --> 00:51:33.276 A:middle
as accessibility elements.

00:51:34.136 --> 00:51:36.206 A:middle
UI Button implements
a lot of accessibility

00:51:36.206 --> 00:51:38.206 A:middle
for us automatically
so all we need

00:51:38.206 --> 00:51:40.186 A:middle
to provide is an
Accessibility Label

00:51:40.376 --> 00:51:41.896 A:middle
for our button, for out buttons.

00:51:42.766 --> 00:51:44.846 A:middle
And Accessibility Label
is essentially text

00:51:45.346 --> 00:51:47.616 A:middle
that describes what the
button is behaving as.

00:51:48.176 --> 00:51:51.406 A:middle
So, we'll just use the number of
stars as the Accessibility Label

00:51:51.496 --> 00:51:54.586 A:middle
for our button and, of course,
we used a localized string

00:51:54.946 --> 00:51:56.576 A:middle
so that they'll automatically
be translated

00:51:56.576 --> 00:51:59.196 A:middle
as we translate our application
into other languages.

00:51:59.196 --> 00:52:03.406 A:middle
Now our other custom
control is this Count view

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

00:51:59.196 --> 00:52:03.406 A:middle
Now our other custom
control is this Count view

00:52:04.176 --> 00:52:06.376 A:middle
and we'll also need to
add Accessibility here.

00:52:07.506 --> 00:52:11.586 A:middle
In this case since the view
is just a single element we'll

00:52:11.586 --> 00:52:14.406 A:middle
return Yes for its
Accessibility element and then

00:52:14.406 --> 00:52:16.796 A:middle
that top level view
we'll be treated

00:52:16.796 --> 00:52:17.866 A:middle
as an Accessibility element.

00:52:18.786 --> 00:52:21.136 A:middle
We'll also need to return what
kind of traits that it has.

00:52:21.606 --> 00:52:23.466 A:middle
In this case we're
essentially saying

00:52:23.466 --> 00:52:25.796 A:middle
that our Count view is
similar to an image,

00:52:25.916 --> 00:52:27.306 A:middle
so we'll turn that as its trait.

00:52:28.096 --> 00:52:30.996 A:middle
And finally, we'll need to
return an Accessibility label

00:52:31.346 --> 00:52:34.616 A:middle
that has text that described
what that view represents.

00:52:35.466 --> 00:52:37.676 A:middle
Since our Count view is
essentially representing a

00:52:37.676 --> 00:52:42.476 A:middle
number, we'll return a text
version of that number.

00:52:42.626 --> 00:52:45.416 A:middle
Alright, so now we've fully
customized our application

00:52:45.416 --> 00:52:48.476 A:middle
and let's take a look
at what it looks now.

00:52:49.116 --> 00:52:51.496 A:middle
So, here's our new
customized application.

00:52:52.426 --> 00:52:55.576 A:middle
We'll start in the Game view
and here we can just tap

00:52:56.526 --> 00:53:01.326 A:middle
to play our pieces
and you'll notice

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

00:52:56.526 --> 00:53:01.326 A:middle
to play our pieces
and you'll notice

00:53:01.806 --> 00:53:04.786 A:middle
that when the game finishes we
automatically transition the

00:53:04.786 --> 00:53:07.466 A:middle
background slack and
the Status Bar to match.

00:53:09.516 --> 00:53:13.876 A:middle
[ Applause ]

00:53:14.376 --> 00:53:17.126 A:middle
>> Also, when I pause
the game you'll notice

00:53:17.166 --> 00:53:19.406 A:middle
that our Pause button gets
the selected appearance

00:53:20.066 --> 00:53:25.066 A:middle
because we're using a System
button and you'll notice

00:53:25.116 --> 00:53:27.686 A:middle
that in our Tab Bar we
have different images

00:53:27.786 --> 00:53:29.516 A:middle
for the selected and
unselected states.

00:53:29.946 --> 00:53:33.746 A:middle
Next, let's take a
look at messages.

00:53:35.046 --> 00:53:36.226 A:middle
When we create a new message,

00:53:36.726 --> 00:53:39.246 A:middle
notice that the composed
image gets desaturated

00:53:39.246 --> 00:53:40.866 A:middle
in the background but the Cancel

00:53:40.866 --> 00:53:42.916 A:middle
and Post buttons
remain fully saturated.

00:53:47.496 --> 00:53:50.176 A:middle
And after we post a
message we can select it

00:53:50.776 --> 00:53:51.866 A:middle
and make it a favorite image

00:53:52.536 --> 00:53:55.616 A:middle
which we'll use our
AlwaysOriginal favorite

00:53:55.616 --> 00:53:56.226 A:middle
star image.

00:53:57.206 --> 00:54:00.486 A:middle
You can also see here a
System button that we've used

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

00:53:57.206 --> 00:54:00.486 A:middle
You can also see here a
System button that we've used

00:54:01.266 --> 00:54:03.206 A:middle
where we haven't set
the Rendering Mode

00:54:03.566 --> 00:54:05.496 A:middle
and here our image
is getting recolored.

00:54:06.056 --> 00:54:11.266 A:middle
In the Profile view you can
see our Segmenting Control

00:54:12.096 --> 00:54:13.626 A:middle
where we customized
the different images

00:54:13.626 --> 00:54:17.456 A:middle
and Rendering Modes and as
we change what piece we want

00:54:17.456 --> 00:54:20.156 A:middle
to use you'll see that we're
changing the Tint Color as well,

00:54:21.066 --> 00:54:23.086 A:middle
which causes all of our
Image views to update,

00:54:23.696 --> 00:54:27.766 A:middle
our Custom subview
and the Tab Bar.

00:54:27.966 --> 00:54:32.396 A:middle
Finally, in the History view
you can see our Table View Cells

00:54:32.946 --> 00:54:38.466 A:middle
which use the Tint Color for
their detail label and inside

00:54:38.466 --> 00:54:41.266 A:middle
of one of the History views
you can see previous games

00:54:41.676 --> 00:54:45.546 A:middle
and also our Rating Control
including its background,

00:54:46.436 --> 00:54:48.036 A:middle
which automatically
matches the Tint Color.

00:54:49.086 --> 00:54:51.556 A:middle
And finally, you can see
our Custom Back Indicator.

00:54:52.166 --> 00:54:58.796 A:middle
Great, so that's our
customized application.

00:54:59.516 --> 00:55:05.756 A:middle
[ Applause ]

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

00:54:59.516 --> 00:55:05.756 A:middle
[ Applause ]

00:55:06.256 --> 00:55:08.526 A:middle
>> So, today I've showed
you some of what's changed

00:55:08.526 --> 00:55:12.066 A:middle
for Customization in iOS
7, a few advance topics

00:55:12.496 --> 00:55:16.506 A:middle
like Tint Color and Image
Rendering Mode and finally,

00:55:16.806 --> 00:55:18.916 A:middle
we saw how to use your
own Custom Controls

00:55:19.236 --> 00:55:20.926 A:middle
to extend your application
even further.

00:55:21.846 --> 00:55:24.136 A:middle
So, I hope that you all go
out and use these techniques

00:55:24.336 --> 00:55:25.876 A:middle
to make your applications
really great.

00:55:26.566 --> 00:55:26.876 A:middle
Thank you.

00:55:28.016 --> 00:55:30.016 A:middle
[ Applause ]

00:55:30.016 --> 00:55:37.936 A:middle
[ Silence ]