What's the difference between frame and layout in Interface builder's size inspector?

Question

In IB, there is a dropdown in Size Inspector showing "Layout" and "Frame". I know what a frame is, but I don't know what the layout is in this case. What is the difference?

Answer 1

When lining controls up and measuring their distances from each other it's often desirable to think about the controls' locations in terms of the visual space they occupy on the screen, rather than simply their raw frames. In many cases, the visual rectangle a control occupies, and its frame are vastly different. For example, a regular size push button looks to be about 20 points tall on the screen, with a 2 or 3 point drop shadow. In reality, the frame of a properly configured push button is 32 points tall, not ~23. This extra 9 points points of padding isn't visually apparent.

"Layout Rectangle" is the name Interface Builder uses for this concept.

The layout rectangle is useful to look at for applications of measuring and sizing. The Apple Human Interface Guidelines might make the statement that "Two push buttons aligned vertically, and horizontally next to each other should have 12 points of space separating them horizontally." This 12 points of space separating the buttons should be measured from the button's layout frames, not their raw frames.

Answer 2

Many built-in IB elements have a separate "layout" versus "bounds" rectangle. You can see the difference by showing them using the "Layout>Show XXX Rectangles". The drop-down indicates which rectangle the coordinates refer to.

On Mac, this impacts UITextFields that are labels for example. If you switch between Layout and Frame, the X coordinate will change by 3 pixels. I haven't played with iPhone controls to see if it impacts any of them. It doesn't come up a lot.