Transcript
[ Music ]
[ Applause ]
>> Good morning guys, how's
your conference going so far?
My name is Kevin, I'm one of
interface builder engineers
and Brent is going to join
us a little bit later.
And what we want talk to you
guys about today is adaptivity,
which is how do I make one app
that doesn't just look passable
on all our devices right,
but looks freaking awesome.
And so that's what we're
going to talk about today.
And I'm going to give away my
entire presentation right now.
If there's one thing that
you take away it's this,
when it comes to adaptivity
the system is going to do most
of the work for you and so
we're going to unpack this.
I'm going to tell you what the
system is actually doing for you
I'm going to tell you what the
system is actually doing for you
that would be nice to know.
But also how you guys as
developers will get to interact
and plug into that system.
But before I do I actually
want to step back and I want
to give this a little bit of
motivation here and I want
to tell you why this statement
is actually really good news.
So Apple had a pretty big mouth
on this last year we
sold our 1 billionth iOS.
I don't know about you,
but this number is just
like mind-boggling to me.
Now you make a fair point,
when it comes adaptivity
volume doesn't really matter.
Fair, I'll give that to you.
But we know that it's
not all the same device,
it's not all 1 billion
original iPhones,
so that would be
really cool wouldn't it.
Over the years Apple has
introduced lots of devices
of various form factors
and sizes
and shapes, I mean even colors.
And at Apple we also
believe that regardless
of what device you have you can
hold it however you want whether
that be in portrait
or landscape.
But beyond the physical devices
themselves we also have software
But beyond the physical devices
themselves we also have software
features like slide over and
these multitasking features
as well that just increases
the number of combinations
that your application can be in.
Don't forget things
like dynamic type right,
where the user can
set a font size
and all your applications
are going to react and relay
out right, you're
all doing that?
And then we also have features
like the language
direction whether it's left
to right or right to left.
We also have the display gamut
on those awesome new iPads
that we released this year.
And Apple TV we also
have features
like the interface style
with its light and dark.
So kind of a conservative
estimate for the number
of combinations that your
application can be in,
in iOS applications like
over 300 combinations.
That's a lot.
So that's why this statement
of the system doing work
for you is really good news.
Now the keyword here is most.
There are a lot of ways that
you as developers can plug in
There are a lot of ways that
you as developers can plug in
and customize this experience
because you want your
applications to look unique.
And that's what we want
to talk to you guys about.
So first we're going to talk
about the fundamental system
of adaptivity, which we
call the trait system.
And then Brent's going to come
up and give you guys a demo
of how we've improved
the tools to work
with building adaptive
applications.
And that's what we're
going to cover in part 1,
which is today's session.
You're definitely going to want
to come back tomorrow for part 2
because we're going to give
you this like utility knife
of all these additional
technologies and techniques
that you guys can use to make
your applications adaptive.
And then we're going to put it
all together and we're going
to give you guys some
really awesome demos
and examples in code.
All right, so let's
start by talking
about the fundamental
system of adaptivity,
which is called the trait system
and there's three particular
things I want to mention
to you guys about this.
The first thing is I'm
just going to start
by telling you what it is, it's
a pretty good place to start.
And then we're going to laser
in on one particular part
of the trait system, which
we call size classes.
of the trait system, which
we call size classes.
And I think it would be a
really good idea to kind
of give you guys a
little background
about how the system works
because that will make it
really clear how you are going
to interact with it.
So what are traits?
Traits describe the environment
that your application
is running in.
So here's an example of a
trait, the horizontalSizeClass.
And this just describes what
the experience should be
for the available space of your
application horizontally whether
you have a little bit of
space or a lot of space.
Now a trait by itself doesn't
really have any associated value
with it and that's where trait
collections come into play.
You can think of
a trait collection
as pretty much a
dictionary mapping keys
which are traits to values.
Most of the traits have
kind of an enumeration
of possible values, so you know
what you need to be thinking
about as you're building
your applications.
Now trait collections don't
usually have one thing in them
that would be awesome, usually
they have many things in them.
And even the three that you see
on the screen here is even
a supplication of the size
on the screen here is even
a supplication of the size
of the trait collections that
you guys will be interacting
with and making your
applications adaptive for.
Let me give you a
few more examples
of what some of the traits are.
So we'll talk more
about size classes.
There's also dynamic type
size, which is new this year.
There's also the
layout direction,
so left to right, right to left.
And the three up here are
examples of layout traits.
Traits can also describe
appearance though.
So what gamut is the display
that you're running on
or for Apple TV what
is the interface style,
is it light or dark.
But traits can also
describe capabilities.
So for example, whether
or not the device
that you're using supports
three touch or not.
If you want a full list
of all the possible traits
that you can make your
applications adaptive over check
out UITraitCollection's
interface.
But now I want to
specifically focus
in on talking about
size classes.
Your application can be in
a lot of different sizes.
This is humorously
a simplification
This is humorously
a simplification
of what some of those sizes are.
And when you look at this
there's kind of three axes
of customization that
kind of stick out.
So first is the screen size,
second would be the orientation,
and third would be something
that we call adaptation,
this would be like which
multitasking mode you're in.
So one way to do this without
any formal system would be
to look for and respond
to changes in any one
of these things, but
that's a lot of work.
And so what will you do
instead is to base your layout
on the available space for your
application and not on any one
of those three axes
of customization.
So what do I mean by
react to available space?
There's kind of two
ways we react
to available space given
the size of the change.
So there's coarse grain changes
and these will be like changes
from within iPhone to an
iPad, a large change in size.
There's also fine grain
changes, which would be examples
of like going from iPhone
6s to SE smaller changes.
And for each one of
these changes fine
And for each one of
these changes fine
or coarse you're going to
use different techniques,
different technologies
to help you through.
Let's start by talking
about coarse grain changes.
I think we're pretty
familiar with this quote,
it's of my favorite quotes.
We as engineers love to
create layers of indirection
to help us solve problems,
to make things easier,
honestly to be lazy.
So size classes is a
layer of indirection.
Now layers of indirection
always describe some sort
of higher order behavior.
So what's the higher
order behavior
that size class is describing
and that's experience.
Let me give you two
examples here.
So first will be the canonical
example we see this all the
time right.
On iPad we have a master detail
where the information is
presented side-by-side.
A change in the master
reflects in seeing the details
on the right-hand side.
However, on an iPhone where
there's not as much room
that way that we present
information changes.
We instead use a navigation
controller and use more
of a drill in way of
presenting information.
of a drill in way of
presenting information.
News would be another example.
On the iPad we have this awesome
grid view, it's great to sit
on your couch and just be able
to scroll through stories.
But on my iPhone
it's a table view
where I can just quickly
scroll through with my thumb.
So experience comes down to how
we're presenting information
and when you think about
coarse grain changes
in your applications think
about the kinds of experiences,
the ways you're presenting
information to decide whether
or not or how you're going
to present that information.
So let's get specific for a
second, I was going over kind
of some higher-order things.
What specifically
is size classes?
And this is where we bring
the trait system back in.
So size classes is two traits,
there's a horizontalSizeClass
and there's verticalSizeClass
and there's two possible
values, compact and regular.
Compact just simply means
that you're space constrained.
And so you're going to
want to present information
in a more compact way.
Regular means that you're
not as space constrained
and you should totally feel
free to explore at least
and you should totally feel
free to explore at least
up to the edges of your
12.9 inch iPad Pro.
Now this means that we
have four combinations
of traits and possible values.
Now I just want to point
out real quick here some
of the notation that
I'm using on the slide
because this is notation
that you're going to see
in Interface Builder
and in documentation
and elsewhere in the system.
So this is describing a
size class combination
and there's two things
to look here.
First, it says there's a W
it stands for the width class
and then the value C or
R, so compact or regular.
And then H is for the height
class or the vertical class
that again, has either C or R.
So you're going to see
this in Interface Builder
and you're going to see
this in documentation
and I just want you guys
to be familiar with this.
So how do some of the devices
fit into these combinations?
Well, a compact with experience,
but regular height an example
of that is going to be
our iPhones in portrait,
iPad in contrast is going
to be regular regular
in both orientations
for all orientations.
You're going to see
compact compact with iPhones
in landscape with the notable
exception of the 6s Plus,
in landscape with the notable
exception of the 6s Plus,
which is actually regular
horizontally when you're
in landscape, which is why
you see a master detail
in for example mail when
you're using a 6s Plus.
How does this actually
help me though?
How does this make
my life easier?
Well, one obvious thing is
that instead of thinking
of 300 combinations you
only have to think about 4,
but wait it gets better.
You really only have to
think about two and that's
because the width class is
by far the most common class
or trait that you're going
to have to interact with it.
If we think about all the
traits that are possible,
the layout traits are the
most common kind of category
of traits that you're
going to work with.
And within the layout traits
size classes is the most common
layout trait that you're
going to interact with.
And then specifically within
size classes the width class is
by far the most common class
that you're going
to interact with.
Which means that as you're
designing your applications
and thinking about how you
want them to be different
between iPad and
iPhone think primarily
between iPad and
iPhone think primarily
about the differences
horizontally.
Now certainly guys you're going
to have custom applications
you're going
to do special things,
we understand that.
But certainly that's the most
common case is just thinking
about the width class.
Now the system gets to decide
how devices, orientations,
and adaptations fit
into these combinations.
And what's interesting
about this is
that these combinations can
change on the same device
as the users interacting
with your application right,
I can bring over slide over,
I can go into multitasking,
I can change the
orientation of my device.
And so if you're
using size classes
and you're expressing your
data more declaratively,
the system can do a bunch of
work for you as it transitions
through all these different
devices, orientations
and adaptations past,
present and future.
And that's really, really
helpful and that's going
to make it much easier
for you guys
to make your applications
adaptive.
Let me give you two examples
of some of the dynamic kind
of changes that can
happen on the system.
So here again, we're going back
to our split view
controller for a second here.
And when I'm on an iPad
in landscape we're going
to have those two view
controllers side-by-side,
but when I go to an iPhone,
you know, we collapse it
into a navigation controller.
If you're using UI Split
View Controller you're going
to get this behavior for free.
Now besides just view controller
structure this also applies
to presentations.
So if I have an iPad and I
bring up a popover it's going
to be this callout style.
But if I move to an
iPhone it's going
to be a modal presentation
instead.
So again, if you're
using the kit controls
and the kit presentations
you're going
to get a lot of behavior
for you.
The size classes
are going to change
and your application is going
to automatically adapt,
which is super neat.
So let me talk to you a second
about fine grain changes.
I just want to say one
note about this and that's
within the same size
class you're going to want
to use Auto Layout to react to
the available space changing.
Withy Auto Layout you can
specify the layout relationships
in a very declarative form
and then the system will
automatically move things
and resize things for you as
that available space is changing
and resize things for you as
that available space is changing
at a more fine grain level.
Now there's one more type of
change besides coarse and fine
and I call that medium
grain changes.
I'm not going to tell you
what it is though I'm going
to keep the suspense high
and you're going to come back
for part 2 and they're
going to tell you all
about medium grain changes.
All right, so we've talked
about what size classes are,
we have given you kind of an
overview of the trait system.
What I want to do now is just
give you a little background
about how the system
works and how
as developers you're
going to plug into that.
In a nutshell or in
a sentence rather,
the way the trait system works
is it takes a trait collection
and it propagates it
down through your view hierarchy
giving each stop along the way a
chance to react to
that trait collection.
So it all starts at the screen
level and the screen's going
to have a trait collection.
What's important to note about
this is that the every device
and orientation and
adaptation is going
to have a fully specified
trait collection.
And what I mean by that is
that all the different traits
are going to have values.
that all the different traits
are going to have values.
Then the screen is going to
pass it down to all the windows
that are on that screen and then
the window is going to pass it
to its root view
controller to its view,
then down to its
subview controllers
and subviews and so on.
Now each stop along the way
here is a class that conforms
to UITraitEnvironment and the
UITraitEnvironment has a key
method called
traitCollectionDidChange.
So at each stop along the way
as this trait collection
is getting propagated
down it's going to call
traitCollectionDidChange.
This is where you as
developers are going to override
and make your applications
adaptive.
So traitCollectionDidChange
is the key method here.
And you're almost exclusively
going to override this
at the view controller
and the view level.
Now that was a pretty simple
linear example what's a little
bit more complicated example?
So let's go to an iPad
here in landscape.
We have our screen, just going
to go to the window and down
to the view split view
controller and so on.
Now here is where we see a
little bit of a change here
and that's as the trait
collection is getting propagated
down you can actually
change the trait collection
down you can actually
change the trait collection
as it gets propagated to
child view controllers.
So the split view controller
is going to do this for you.
So what it's going
to do is it's going
to change the trait
collection that it passes off
to the master view controller.
It's going to change
that horizontalSizeClass
to a compact size
class and it's going
to pass the regular
one off to the detail.
You guys can do this too
as you build your own custom
container view controllers,
but most commonly you
won't need to do that.
Here's an example of what
traitCollectionDidChange might
look like.
I'm going to walk you
through a few key things here.
First, in order for the system
to do a lot of the work for you,
you want to make
sure you call super.
Next, you want to only
do work if the traits
that you're interested
in are actually changing.
Now I hear you questioning
Kevin,
traitCollectionDidChange
getting called doesn't that mean
that traits are changing?
That is absolutely true.
Trait collection gets called
though for any trait changing.
Typically, your application
is only going to be interested
in a few traits and most
commonly just the horizontal
size class.
And so you want to make sure
that you're not doing any extra
work if that particular trait
that you're interested
in is not changing.
Next, I'm going to switch
over the possible values
for the horizontalSizeClass.
As just a side note here,
I really prefer using switch
statements when I'm working
with enumerations in both Swift
and Objective-C because it means
that if the definition
that enumeration changes
if a new case comes in I'm
going to get build time warnings
if I'm using an exhaustive
switch statement.
So I would just really encourage
you guys to do that as well,
that's really saved
me a lot of times.
So then for example if
this value is compact,
then I would go off
and set my constraints.
So for any view, for any
view controller that I want
to be adaptive I would need
to override
traitCollectionDidChange.
So again, this is going
to get called for anything
that conforms to
UITraitEnvironment.
And this is where you're
going to do your adaptivity.
Now it might seem like
a lot of work to have
to implement
traitCollectionDidChange
for every single view
controller and every single view
for every single view
controller and every single view
for all the possible
changes in your application.
A lot of things can change.
So that's why there's a number
of systems that will react
to traitCollectionDidChange
for you.
So for example, one system
would be Interface Builder.
If you're using Interface
Builder to build your interface
and you're using
adaptivity and size class
within Interface Builder
the system knows how
to automatically apply that as
the trait collection changes.
Another example would
be asset catalogs.
You can specify images
for different gamuts,
for different size classes,
different scale factors
and those will automatically
be applied again
in traitCollectionDidChange.
And then finally, UIAppearance
can also be customized
for trait collection.
So you could for example set
up different color schemes
for light and dark mode in Apple
TV and those changes will again,
automatically be applied
in traitCollectionDidChange
for you.
So you really want to take
advantage of these systems
that respond to this for
you because it allows you
to be very declarative about
how you want your interface
to react and to adapt.
And it makes it really easy
to follow and maintain.
And it makes it really easy
to follow and maintain.
So just to recap
a couple takeaways
that we've seen so far.
Traits describe the environment
that your application is running
in and a trait collection is
going to be a bunch of traits
with their associated values.
These could be layout traits,
they could be appearance traits,
they could be capabilities
traits.
You want to override
traitCollectionDidChange
to make your application
adaptive
and you want take advantage
of those systems that respond
to traitCollectionDidChange
for you.
The size classes describe the
experience of your application,
how is your information
laid out.
And then just to drive it home
again, the system is going
to be able to do so
much work for you
if you're taking
advantage of these tools
that we're giving you.
Now I could draw on
for another 20 minutes
about how awesome aptivity is,
but really to see how
cool it is you really want
to see it in action.
And so I want to bring up
Brent to give you guys a demo
of the changes that we have
been making to the tools
to improve our workflows
with adaptivity.
to improve our workflows
with adaptivity.
So the one and only Brent Shank.
[ Applause ]
>> Thank you Kevin.
So now that you understand
the basic building blocks
of adding adaptivity
to your applications.
So that's traits,
trait collections
and size classes I'm going
to show you how Xcode
and the Interface Builder editor
make it really easy to do this.
So let's go over to
the demo machine.
It's a long way over here man.
Okay, so I thought
it would be useful
to build a really simple view to
really focus on the fundamentals
of using the trait
collection system
to add a little bit
of adaptivity.
So here's what we're
going to build.
This is simple, this describes
a location I chose Tenaya Lake,
you should definitely put it
on your bucket list
it's a great place
in Yosemite to see one day.
So this view shows
us a label at the top
and at the bottom is
an image of the place.
And notice that on
iPad there are a couple
of different changes,
a couple of things
that aren't present on iPhone.
You see at the top the label
looks a little bit different
and in fact, there's
a whole another view
that appears just on iPad.
So we're going to build
all this right now
and you'll see how easy it is
to do with the tools in Xcode 8.
So I've already created
this project and I'll switch
over to this other tab where
I have the storyboard loaded.
So there are couple
of things to look
at in the Interface
Builder canvas in Xcode 8.
First off, is look how
this view is rendered.
It looks like an iPhone
6s in portrait and that's
because it actually is.
We're actually using
the simulator
to render this content,
so you now get pixel
perfect rendering right
in the design canvas.
We think this is going to be a
huge benefit to your workflow
as you try to take
these beautiful designs
from a designer and translate
it into your application.
The other thing to point out
is that [applause], thank you.
The other big changes
is that now scenes
in Interface Builder canvas
are always being rendered
in the dimensions of actual
ethical devices or one
in the dimensions of actual
ethical devices or one
of their configurations
and that's a big change
from previous versions of Xcode.
Let's take another look at
something else that's new.
I'm going to zoom in
here at the bottom bar,
so you can see everything here.
So this is the bottom button bar
in the Interface Builder canvas,
it's been around
for a long time.
Over on the right-hand side
you can see the controls
for adding all the
layout constraints,
I hope you're familiar
with those.
And in the middle are the new
zoom in controls in Xcode 8.
And if you haven't yet installed
the betas and played with this,
it's amazing to be able
to edit your scenes
at any magnification
level you want.
So definitely check
that out it's awesome.
[ Applause ]
But today I'm going to talk
about this button over here.
So it says View As
iPhone 6s and then
in parenthesis it's got
this notation it says,
if you can't read it back
there, it says wC hR.
So this is telling
me the size class
of the current device
configuration
that I'm looking at.
It's an iPhone 6s in portrait,
which means that it's a compact
width regular height device.
which means that it's a compact
width regular height device.
So it's a little bit of
terminology Kevin's talked about
and I'll show you how you can
apply that to add adaptations.
So the scene is currently
being rendered as an iPhone 6s
in portrait what if I
want to change this?
Well, all you need to do
is click the View As button
and it opens the new
Device Configuration bar.
This is brand new in Xcode
8 and it's really cool.
So I zoomed in here so you can
see exactly what's going on.
So there are a couple
of stacks of icons here
and the leftmost stack
represents all the different
device sizes that
Apple currently ships.
So we have the largest
iPad on the left
and the smallest
iPhone on the right.
And next to that is
a stack of buttons
that lets you select the
orientation that you want
to view the scenes in.
So I'm going to do
that right now.
I'm going to switch
to landscape.
So right in the design canvas
you can cycle through all
of these devices
and all orientations
and see how your content
is going to be laid out
and rendered, which
is really cool.
Thank you.
So iPhones are interesting
of course,
but iPads are even
more interesting.
I'm going to select
one right now
and you can see what happened
is there's actually another set
of icons that appeared and
this represents adaptation.
So for iPhone there's
just one adaptation
for each orientation,
that's full screen.
For iPad it's more
interesting because your app --
your users can choose
to run your app
in slide over or split view.
So that's what these
adaptations are here.
So if I select this one you can
see that the scene now renders
as the app would if
your user was running it
in slide over on iPad.
So think about this right in
the design canvas you can cycle
through all of these
configurations,
all these orientations,
all these devices
and see how your content
is going to get laid out.
I mean, this is a really
powerful new workflow,
it's going to save
you a lot of time.
[ Applause ]
Okay, so those are some
of the new features
in Interface Builder in Xcode 8.
Now let's get down to the task
of actually building this view.
So here's what we're
going to do first.
So here's what we're
going to do first.
We're going to add this label
and we're going to add it
in such a way that it applies
to all device configurations.
This is probably
something you do most
of the time in Interface
Builder.
You're usually not making
customizations based
on size classes a lot.
So let's do this right now.
So I have the Device
Configuration bar
and iPads selected there,
it doesn't really matter what's
selected because what I'm going
to do is going to
apply to everything.
So I found a label
in the Interface Builder
library, I will drag it out.
And now what I'm
going to do I'm going
to add some Auto
Layout constraints.
And as Kevin said, this is one
of the systems that we provide
that actually makes
your UIs adapt
to all different
device configurations.
So I'm going to add
some constraints.
I'm going to pin this to
the top as vertical spacing.
I'm going to center it
horizontally in the container
and I'm going to add a vertical
spacing constraint between it
and the image view
below vertical spacing.
And I've got some
content I will paste in
And I've got some
content I will paste in
and it looks like that's right.
And I had a constraint
between this image view
and the top layout guide,
which I don't need any more
because I've added a label,
so I'll delete that now.
So how do I know that
I did everything right
and added the right constraints?
Well this is where the Device
Configuration bar comes
in because it's really easy
to see what it looks
like on iPhone.
And you can see that it's
staying in the right place
as I cycle through all
these devices and even
through different
orientations okay.
So that's an operation
you do very commonly
in Interface Builder
every day, very easy.
So now let's start
adding some adaptivity,
some customizations using
the free collection system.
So what are we going to do now?
We're going to change the label,
the font of this
top label up here.
And you see my designer
really wants it
to be System Semibold
36 just for iPads.
So let's go back
to the storyboard.
So when you think about
adding customizations
for a device you
really want to think
about adding a customization for
a particular trait collection
about adding a customization for
a particular trait collection
or in this case a size class.
So we're all given designs for
devices for iPads and iPhones,
but as developers you need
to be able to translate
that into size class that
you're meaning to target.
We make that really
easy for you.
So for example, I have an iPad
selected in the Device bar
and the size class and I'll zoom
in here so you can see that,
it now says regular
width, regular height.
Okay, so you don't need to guess
about what size class a
particular device configuration
is you just select that
configuration in the Device bar
and Interface Builder
will tell you what it is.
And that's another great
improvement we think.
So now let's introduce,
let's vary how this label
looks just for that size class.
So I'll select it in
the canvas and let's go
over to the Attributes
Inspector,
which I actually have
selected already.
And I'm going to
zoom in here again
so you can get a closer
look at the inspector.
So you might see out there that
a couple of these attributes,
that is a big cursor, have
a + button next to them.
that is a big cursor, have
a + button next to them.
And so the + button means
that particular attribute can
be customized using the trait
collection system.
So let's do that right now.
I want to change the
font so I click it.
And the menu comes up
here is offering me
to add a customization
for regular width
and regular height.
Well why is it doing that?
Well it's because I
have a regular width,
regular height device
configuration selected,
so that makes sense.
So we'll do that
and what happens is
that the Attributes Inspector
now shows me another row
for font.
And again, it has
that same notation
in the Attributes Inspector
as I see in the Device bar.
Okay, so that's why
it's so important
that what's here is you
understand what's going on.
Okay, so let's make the change,
I'll bring up the Font Editor,
I'll select Semibold and since I
always do what my designers want
me to do 36.
There we go and I'll click Done.
And you can see it rendered
and updated on the canvas.
If I select an iPhone what I
would expect to happen happened,
If I select an iPhone what I
would expect to happen happened,
the font remains what
it was before the change
because I only targeted regular
width, regular height devices
for that particular edit.
Okay, so that's an example of
using the Attributes Inspector
to add a customization
based on size class.
So that's the first
customization.
Let's add another one and this
time I want to add this label
and I want to do it
again just for iPad.
So I'll go back to the
storyboard and because I want
to add this customization
for iPad I should select
it in the Device bar.
And let me draw your attention
to this button in the Device bar
that says Vary for
Traits down here.
So when you click this button
it's going to present a popover
and ask you how we want
to introduce the traits,
what kind of traits, the trait
collection you want to target.
So what does this mean?
Well I have a regular width,
regular height size class device
configuration and I can choose
to customize for regular
width, regular height
if I hit click both
of these checkboxes.
But I also can choose to
customize just for regular width
But I also can choose to
customize just for regular width
and any height or for any
height and regular width okay.
So I think what I want is to
customize just for regular width
and when I do that the bar
turns this lovely shade of blue
to tell me that I'm going
to be making customizations
based on size class.
Let's take a closer look
at the contents of the bar.
I'll zoom in here.
So you can see it says I'm
varying eight regular width
devices, the device
configurations.
I see iPads both in portrait
and in landscape and in a couple
of the slide over configurations
and that makes sense.
But I also see an iPhone here,
so what's that all about?
Well if I put the mouse cursor
over this I see this is an
iPhone 6s Plus in landscape
and as Kevin said,
because this device is
so big it actually uses the
regular width size class
in landscape.
And this is great and you'll
frequently want to make
and provide a different
experience for that device
in that configuration,
but in this case I
don't want to do that.
I only want to make the
customization for iPad.
I only want to make the
customization for iPad.
So what do I do?
Well I can go back into
the Vary for Traits
and this time I'm going to
vary for both regular width
and regular height and
when I do that notice
that the iPhone disappears
from the bar.
So the edits I'm about
to make will only apply
to these particular
configurations okay.
So let's do that now.
I'm going to drag out a label,
I'm going to put it right there
and I'll add just a
few constraints here
to make sure it stays in the
right place, there we go.
Now I'll click Done Varying.
So let's go back to the
Attributes Inspector
because I want to focus
on a couple of checkboxes
that you've maybe seen before,
I want to make sure you
understand what this is
all about.
So I varied for traits, I
selected width and height,
which means I configured the
bar to make a customization
for regular width,
regular height.
And so when I did that
I dragged out a view,
I added it to a view hierarchy,
but it only installed it
for regular width
and regular height.
So that's what this
checkbox shows me right here.
So that's what this
checkbox shows me right here.
Most of the time
when you add views
to your scene they'll be
installed for everything,
so they'll appear on all device
configurations regardless
of the size class.
But when I'm in this mode when
the bar is blue when I add views
or when I add Auto Layout
constraints they will get
installed only for the
particular size class
that I'm targeting
for the edit okay.
So that's important
to understand.
So again, to prove
this it can cycle
through iPhones using the
Device Configuration bar
and the label isn't there.
So I did the right thing I added
this view and it only appears
for regular width, regular
height devices okay.
So the next thing we're
going to do is we're going
to make a more surgical
edit using the Device bar.
And as you can see when I cycle
through to an iPhone
there's too much space
between the top label here
and the imagine view below.
Now in fact if I go back
to the design my designer
wants them to be pretty tight.
So how do I do that?
Well what's really cool is
that you can actually customize
an Auto Layout constraint
that you can actually customize
an Auto Layout constraint
constant using a variation
like we've been doing
by targeting a size class.
So let's do that right now.
So you can see if I
select the image view,
remember I added this
vertical spacing constraint
between it and there we go.
Okay, so I've clicked
this constraint
and I see this Auto Layout
constraint and I see a bunch
of its attributes here.
You can see the constant
value is 61.
So this is the problem
this value is too big.
Well I can actually edit
this and I can edit it only
for iPhones for compact
with regular height
devices in portrait.
Again, I can click Vary for
Traits, I'll customize on width
and on height and you
can see the contents
of the bar show me iPhones.
But what are all these iPad
configurations in here?
Well remember when your user
is using the iPad in slide over
or split view there's
not that much space.
Your app will be
spaced constrained.
So you really want to
provide an iPhone experience
So you really want to
provide an iPhone experience
on iPad in that case.
So this actually makes sense
all of these iPad configurations
that you see here
are also compact
with regular height
configurations.
So this is good, this
is what I want to do.
Okay, so I've gone into Vary
for Traits, the bar is blue
and now I can select
this constraint again.
There we go.
Now notice I'm going to
change this value to say 45
and I'm going to draw
your attention back
to the Attributes Inspector.
So what happens when I
commit this edit just
like what happened
when we customize
for font Interface Builder added
another row for constant right.
And you can see this is
using the same size class
that I configured in the bar.
So I've changed this --
I've added a customization
for this constraint constant
by starting an editing
session with the Device bar,
but I'm making the edit
directly in the canvas okay.
So that's really cool.
And as I cycle through these
devices it looks pretty good,
And as I cycle through these
devices it looks pretty good,
but it's still not
quite close enough.
So how do I fix this?
Well you might think that I need
to go back and make the bar blue
and try to make the
edit that way.
And that's not quite
the right thing to do.
So what's important
to understand is
when you're varying for traits
you're introducing variations
based on size class.
But you don't use this
workflow for editing them.
Instead, wouldn't it be nice
if you could just directly edit
that customization in
the canvas, well you can.
So I have an iPhone selected
Interface Builder knows that,
it also knows that I have
a customization for that.
So now when I go to edit
this it's going to figure
out where I want the data to go.
So if I changed 45 to 30
again, notice what happens
in the Attributes Inspector
it's going to update it
for the size class because it
knows I have a customization
based on that.
So we think this is a really
powerful new workflow.
It lets you introduce
variations using the Device bar,
but then you can
continue to edit those
in the design canvas directly.
And with that I want to
bring it back to Kevin.
[ Applause ]
>> Thank you Brent.
>> Thanks.
>> So I just wanted to
recap a few of the things
that Brent had talked
about in his demo.
So first we introduced the
new Device Configuration bar
where you can see
these concrete devices
and you can see your application
in them and move through them.
We also have a new workflow
for introducing customizations
between the different traits.
So you can do very surgical
fine grain edits using the
Attitudes Inspector.
And the Attributes
Inspector is also the
where you can see all the
changes that you've made.
So if you're ever questioning
I wonder how I set this up,
you can always go
to the inspector
to see what the customizations
you made are.
But there's also this
Vary for Traits mode
where you can do kind of
larger broad paint stroke
style changes.
And as Brett mentioned,
it's really important
to note this mode is important
for introducing new
customizations.
Once you've exited this mode
Interface Builder will still
know how to update
those customizations
know how to update
those customizations
that you've made
based on the device
that you're currently looking at
and it works really
well, it's awesome.
Now these changes
work not only for iOS,
but these workflow changes
also apply to tvOS and watchOS
as well in Interface Builder.
So just in summary
one more time.
So I talked about
the fundamentals
of the trait system.
We talked about how traits
describe the environment,
how you're going to override
traitCollectionDidChange
to do all your adaptivity
taking advantage
of the systems that
do it for you.
And that size classes
that describe the experience how
you're displaying information.
Brett gave you a demo of the
new workflows and the tools
and how Interface
Builder now allows you
to both see your interface
in concrete devices while
simultaneously being able
to edit all the underlying
data for the trait collections
and the traits that you want
to make your application
adapt over.
So this was part 1 and again,
the big takeaway with part 1 is
that the system is going to
do most of the work for you.
that the system is going to
do most of the work for you.
There's lots of ways that
you can plug into that
as developers take advantage
of those and we're excited
to see what you guys come up
with with adaptive applications.
Now come back tomorrow
because we're going
to give you even more.
We're going to give you more
technologies and techniques
for making applications
adaptive and then we're going
to put it altogether
with some awesome demos.
Besides the session tomorrow
there's also a session
on Auto Layout that you're going
to want check out to see some
of the improvements we've made
to Auto Layout to help you
with some of those
finer grain changes.
And with that have a great
session, a great rest
of your week and a great lunch.