Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between Frame Rectangle and Alignment Rectangle

Can anyone explain what is the difference between Frame Rectangle and Alignment Rectangle in the size inspector?

like image 684
Yuchen Avatar asked Jan 26 '15 14:01

Yuchen


2 Answers

Frames describe where to place views on the screen and how big those views will be. When laying out views, constraints use a related geometric element called an alignment rectangle.

The alignment rectangle is based on the presentation of the item’s content, Auto Layout uses the alignment rectangle instead of the item’s frame rectangle. By working with alignment rectangles instead of frames, Auto Layout ensures that key information like a view’s edges and center are properly considered during layout. Unlike frames, a view’s alignment rectangle should be limited to a core visual element. Its size should remain unaffected as new items are drawn onto the view.

Consider the left side of Figure -1. It shows a view drawn with a shadow and a badge. When laying out this view, you want Auto Layout to focus on aligning just the core element—the blue rectangle—and not the ornamentation.

enter image description here

Figure - 1 : A view’s alignment rectangle (center) refers strictly to the core visual element to be aligned, without embellishments.

The center image in Figure -1 highlights the view’s alignment rectangle. This rectangle excludes all ornamentation, such as the drop shadow and badge. It’s the part of the view you want Auto Layout to consider when it does its work. The right-hand rectangle in Figure -1 encompasses all the view’s visual elements. It encompasses the shadow and badge. These ornaments could potentially throw off a view’s alignment features (like center, bottom, and right) if they were considered during layout.

enter image description here

Figure -2 Auto Layout only considers this view’s alignment rectangle when laying it out as centered in its superview. The shadow and badge don’t affect its placement.

Reference: link

like image 93
user4261201 Avatar answered Oct 21 '22 14:10

user4261201


From Apple's old Auto Layout Guide:

Layout Operates on Alignment Rectangles, Not on Frames

When considering layout, keep in mind that the frame of a control is less important than its visual extent. As a result, ornaments such as shadows and engraving lines should typically be ignored for the purposes of layout. Interface Builder ignores them when positioning views on the canvas—in the following example, the Aqua guide (the dashed blue line) aligns with the visual extent of the button, not with the button’s frame (the solid blue rectangle). enter image description here

To allow layout based on the presentation of the content rather than the frame, views provide an alignment rectangle, which is what the layout actually operates on. To determine whether your override is correct on OS X, you can set the NSViewShowAlignmentRects default to YES to draw the alignment rects.

So, that pop-up menu in Xcode is providing you the ability to view and edit a view's size and position based on its alignment rect or its frame rectangle.

like image 42
Ken Thomases Avatar answered Oct 21 '22 13:10

Ken Thomases