Xcode Interface Builder. How Do These Autosizing Mask Settings Differ?

I am now quite comfortable using autosizing masks in IB but there are two autosizing setting that I am not clear how they are intended to differ:

Setting 1
Autosizing with both upper and lower anchors http://img.ioscake.com/xcode/autosize-mask-0.png

  • iPhone Interface Builder - Moved resources to sub-directory, now IB can't see them!
  • XCode Interface Builder is showing “No selection” for all files
  • Xcode 4 - Is there something in Interface Builder like “reveal in canvas”?
  • Misplaced views each time Xcode restarts
  • swift protocol, IBOutlet property cannot have non-object type
  • XIB File opens like an XML in XCode but opens correctly with Interface Builder
  • Setting 2
    Autosizing with only uppper anchor http://img.ioscake.com/xcode/autosize-mask-1.png

    Some context. The UIView subclass that uses these settings is a child subview. Setting 1 is giving me the behavior I want – subview expands/contracts with its parent view – while setting 2 is slightly different in a non-obvious way.

    What is the intended layout difference between these two settings?

    Thanks,
    Doug

    2 Solutions Collect From Internet About “Xcode Interface Builder. How Do These Autosizing Mask Settings Differ?”

    Setting 1:
    The view will resize vertically so that both the distance from the top of the superview and the distance from the bottom of the superview are preserved. Basically, the view will grow and shrink in tandem with the superview; if the superview gets taller by 30 pixels, so will this view.

    Setting 2:
    The view will resize vertically so that the distance from the top of the superview is preserved, and the proportional height of the view is preserved. Basically, the view will grow proportionally with the the superview; if the superview gets taller by 10%, this view will also get taller by 10%.

    Note how these differ in practice. Assume the superview is 100px tall, and the subview is 60px tall, with a 20px buffer on the top and bottom. Now let’s resize the superview to 150px tall.

    • Setting 1: The subview grows to preserve the 20px margins, becoming 110px tall.
    • Setting 2: The subview grows by 50% (60px -> 90px). The top margin is still 20px, but the bottom margin is now 40px.

    In general, you usually want the behavior in Setting 1. You might use Setting 2 if you had a master/detail view split top/bottom, and you wanted both sections to grow proportionally with the superview. In that case, you would give both views flexible height, fixing the top margin of the top view and the bottom margin of the bottom view.

    BJ’s answer is really awesome. But I think his example is incorrect.

    Assume the superview is 100px tall, and the subview is 60px tall, with
    a 20px buffer on the top and bottom. Now let’s resize the superview to
    150px tall.

    So for Setting 2, the top margin is undoubtedly still 20px, but the subview and the bottom margin should both grow by (150 – 20) / (100 – 20) = 62.5%. The subview height becomes 97.5px, and the bottom margin is now 32.5px.

    In other words, the proportion of the subview height to the bottom margin should be preserved in this case.