Difference between Frame Rectangle and Alignment Rectangle

Question

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

Answer 1

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.

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.

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