Interface Builder: What are the UIView's Layout iOS 6/7 Deltas for?

up
vote57down
votefavorite

19

I just noticed the iOS 6/7 Delta property found under the UIView's structs layout.

What is this for and why is this missing from AutoLayout?

ios layout uiview xcode5

share|improve this question

edited Jul 22 at 18:02 robjohncox 1,320319

asked Jul 22 at 17:46 Frederick C. Lee 4851613

7

I believe this is available only in Xcode5 which is under NDA. So please post your question to devforums.apple.com. –  rajagp Jul
22 at 21:17

4 Answers

activeoldestvotes

up
vote49down
voteaccepted

This actually refers to the Delta between layout position from iOS6 to iOS7.

In iOS7, some views can hide the status bar or have it transparent and, in effect, it is overlaid on top of your view. So if you put a UI element at (0.0, 0.0) on iOS6, it will appear below the status bar, but on iOS7 it would appear partially covered underneath
the status bar. So in that case you would want a delta that matches the status bar height (20.0 points) so that the layout looks the same in iOS6 and iOS7.

I believe this isn't needed if you use autolayout, but of course, then you lose iPad1 support, which many of us aren't willing to concede at this point in time.

share|improve this answer

answered Sep 11 at 15:11 digarok 51867

12

For me, I found it is the delta from iOS 7 to iOS 6. I lowered my elements 20 points, then set a -20 for Delta Y. –  sguptaet Sep
17 at 3:08

this is particularly useful with the UIProgressView which is much slimmer in iOS 7 –  Lee
Probert Sep
27 at 14:19

up
vote63down
vote

Note: I noticed this question a while ago, but I'm only posting my answer now because the NDA has been lifted

Why does it not appear for AutoLayout?

As you may have noticed, iOS 7 brings about a whole new look. The look of UI elements have changed, but also so have some of their sizes (or metrics in general). This can make interface design to accommodate both iOS 7 and it's predecessors a bit of a pain.

Apple's official line is to use AutoLayout to solve this; this should take a lot of the hassle out of laying out UI elements for you. Sometimes incorporating this is not easily done, especially if you must still support iOS 5 for business reasons, or your interfaces
are managed in a way that makes implementing AutoLayout difficult. As such, Apple seems to have provided a way to make your job a bit easier if you fall into this niche category, and they've called this iOS 6/7 Deltas.

Ok then, what does it do?

Whilst the label in Interface Builder is a bit unclear as to what 'Delta' means in this context, the code contained in the .xib file that corresponds to this feature is a bit more clear:

<inset key="insetFor6xAndEarlier"
minX="-50" minY="-100" maxX="-50" maxY="300"/>

The key name insetFor6xAndEarlier explicitly
states what this does; you can provide alternative insets for UI elements when run on iOS 7's predecessors. For example, the above defines the following delta change:

x: 50
y: 100
width: -100
height: 200

Whilst the values stored in the .xib doesn't correspond to the quoted values directly, there is a correlation between them.

x: -minX
y: -minY
width: minX + maxX
height: minY + maxY

The images below shows this change visually. It's quite an extreme example, but it's to demonstrate its ability. I would only expect in practice to have delta changes of only a few pixels.

You may notice that the values are the inverse for the iOS 6 view; this is because the deltas are relative to the type of view you're working with. If you're editing for iOS 6, the deltas there are in order to transform the element correctly for iOS 7 (the
reverse of the example above).

In order to view the different styles, you can change the way Interface Builder presents it based on the OS it would be running on. This is contained within the File Inspector->Interface Builder Document (1st tab on the right bar), as so:

Does this exist if I like to code my interface by hand?

Not directly, but you can easily achieve the same effect by having conditional checks on OS version within your code, and setting the correct position/size accordingly. The delta ability exists in Interface Builder because there would be no straightforward
way to have conditional positioning without having code to do it, and the point of Interface Builder is to get a much code out of the way as possible for UI.

Overall...

Apple strongly recommend that you use AutoLayout, it makes your life easier in most cases. If you can't use it (for reasons mentioned above), deltas provide you with the flexibility to position your UI elements appropriately, based on the current OS's metrics,
without the need to manually reposition them in code. A good example is to adjust for the lack of status bar, but there are plenty of other use cases.

Naturally, if you're only developing for iOS7 and above, you don't need to know this feature/won't discover it. Only if you need to have iOS6 devices running your application when built with the iOS7 SDK, without autolayout, do you need deltas.

At the time of writing (21st August), I can't find any documentation regarding this feature, nor any mentions in the WWDC material. I've had a play around, and after a bit of research, that is what I've discovered.

share|improve this answer

edited Sep 18 at 11:22

answered Sep 18 at 11:16 WDUK 7,919928

Thank you very much WDUK –  Kamarshad Sep
25 at 11:00 

Superb answer +1 –  Brad
Thomas Oct
4 at 13:07

Awesome answer, thanks! –  Tuszy Oct
25 at 11:47

up
vote20down
vote

I know this is already been answered, just adding a small variant hoping it could also help those who don't use auto layout and still want to support iOS 6.1 and earlier versions.

Read this Apple's
Transition Guide - Supporting earlier version

Choose 'View as' to 'iOS 7.0 and Later'

Base UI for iOS 7. For iOS 6 give suitable delta value. Use preview to see how this will render in iOS 7 and iOS 6 device.

Quick steps:

Select each immediate children of root view individually and add 20px to its 'Y' value.

Then, select all immediate children collectively and give delta Y as -20px. You can also do this in batch or individually.

share|improve this answer

edited Sep 30 at 18:08

answered Sep 24 at 10:28 Galaxy 848213

1

most useful answer yet..thanks :) –  codeburn Oct
1 at 12:49

up vote8down vote

AutoLayout requires at least iOS 6.0. If you want to support iOS 5.0 you couldn't use AutoLayout. And those deltas are used to help you adjust the view position on different iOS version(mainly iOS 7 and iOS version lower than 7). I use those value to help me like this picture.