xcode 框架矩形和对齐矩形的区别

Difference between Frame Rectangle and Alignment Rectangle

提问by Yuchen Zhong

Can anyone explain what is the difference between Frame Rectangleand Alignment Rectanglein the size inspector?

谁能解释一下尺寸检查器中的Frame Rectangle和Alignment Rectangle 有什么区别？

回答by user4261201

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.

考虑图-1 的左侧。它显示了一个带有阴影和徽章的视图。在布局这个视图时，你希望自动布局专注于对齐核心元素——蓝色矩形——而不是装饰。

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

图 - 1：视图的对齐矩形（中心）严格指的是要对齐的核心视觉元素，没有任何修饰。

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.

图 -1 中的中心图像突出显示了视图的对齐矩形。该矩形不包括所有装饰，例如阴影和徽章。这是您希望自动布局在其工作时考虑的视图部分。图 -1 中右侧的矩形包含视图的所有可视元素。它包含阴影和徽章。如果在布局期间考虑这些装饰物，它们可能会破坏视图的对齐特征（如中心、底部和右侧）。

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.

图 -2 自动布局仅在将其布局为在其父视图中居中时考虑此视图的对齐矩形。阴影和徽章不影响其位置。

Reference: link

参考：链接

回答by Ken Thomases

From Apple's old Auto Layout Guide:

来自 Apple 的旧版自动布局指南：

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).

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 NSViewShowAlignmentRectsdefault to YESto draw the alignment rects.

布局在对齐矩形上运行，而不是在框架上运行

在考虑布局时，请记住控件的框架不如其视觉范围重要。因此，出于布局的目的，通常应忽略阴影和雕刻线等装饰。当在画布上定位视图时，Interface Builder 会忽略它们——在下面的例子中，Aqua 指南（蓝色虚线）与按钮的视觉范围对齐，而不是按钮的框架（蓝色实心矩形）。

为了允许基于内容的呈现而不是框架的布局，视图提供了一个对齐矩形，这是布局实际操作的。要确定您的覆盖在 OS X 上是否正确，您可以将NSViewShowAlignmentRects默认 设置设置YES为绘制对齐矩形。

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.

因此，Xcode 中的弹出菜单使您能够根据其对齐矩形或框架矩形查看和编辑视图的大小和位置。