In this first part of a two part series, explore the motivation and concepts necessary to take advantage of trait collections. Walk through building an interface in Xcode and learn from the experts how to take advantage of new features to more easily create your app for different device sizes and configurations.
[ Music ]
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
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
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
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.
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
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
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
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
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.
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
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,
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
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
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
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.
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
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
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
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 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
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.
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.
So the one and only Brent Shank.
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
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.
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.
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.
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.
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.
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 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
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.
And so the + button means
that particular attribute can be customized using the trait
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
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,
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
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
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.
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
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.
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
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
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,
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.
Thank you Brent.
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
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
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
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.
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.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.