UIView 框架、边界和中心

Posted 2023-02-23

【中文标题】UIView 框架、边界和中心

【英文标题】：UIView frame, bounds and center

【发布时间】：2011-07-18 16:43:10

【问题描述】：

我想知道如何以正确的方式使用这些属性。

据我了解，frame 可以从我正在创建的视图的容器中使用。 它设置相对于容器视图的视图位置。它还设置该视图的大小。

还可以从我正在创建的视图的容器中使用center。此属性更改视图相对于其容器的位置。

最后，bounds 是相对于视图本身而言的。它改变了视图的可绘制区域。

您能否提供更多关于frame 和bounds 之间关系的信息？ clipsToBounds 和 masksToBounds 属性呢？

【问题讨论】：

这个讨论已经在这里解决了。所以请看这里或者可以看到这里给出的开发者文档developer.apple.com/library/ios/#documentation/uikit/reference/…***.com/questions/1210047/…slideshare.net/onoaonoa/cs193p-lecture-5-view-animation

【参考方案1】：

阅读以上答案后，在此添加我的解释。

假设在线浏览，网络浏览器是您的frame，它决定了网页的显示位置和大小。浏览器的Scroller 是您的bounds.origin，它决定了网页的哪一部分将被显示。 bounds.origin 很难理解。最好的学习方法是创建单视图应用程序，尝试修改这些参数并查看子视图如何变化。

- (void)viewDidLoad 
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100.0f, 200.0f, 200.0f, 400.0f)];
[view1 setBackgroundColor:[UIColor redColor]];

UIView *view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];
[view2 setBackgroundColor:[UIColor yellowColor]];
[view1 addSubview:view2];

[[self view] addSubview:view1];

NSLog(@"Old view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"Old view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));

// Modify this part.
CGRect bounds = view1.bounds;
bounds.origin.x += 10.0f;
bounds.origin.y += 10.0f;

// incase you need width, height
//bounds.size.height += 20.0f;
//bounds.size.width += 20.0f;

view1.bounds = bounds;

NSLog(@"New view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"New view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));

【参考方案2】：

这篇文章有很好的答案和详细的解释。我只想提一下，WWDC 2011 视频 Understanding UIKit Rendering 从 @4:22 到 20 :10

【参考方案3】：

这个问题已经有了很好的答案，但我想补充一些图片。 My full answer is here.

为了帮助我记住相框，我想到了墙上的相框。就像一张图片可以在墙上任意移动一样，view 的 frame 的坐标系就是 superview。 （墙=超级视图，框架=视图）

为了帮助我记住界限，我想到了篮球场的界限。篮球在球场内的某个地方，就像视图边界的坐标系在视图本身内一样。 （球场=视图，篮球/球员=视图内的内容）

和框架一样，view.center也在superview的坐标中。

框架与边界 - 示例 1

黄色矩形代表视图的框架。绿色矩形代表视图的边界。两幅图像中的红点表示框架的原点或坐标系内的边界。

Frame
    origin = (0, 0)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

---

示例 2

Frame
    origin = (40, 60)  // That is, x=40 and y=60
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

---

示例 3

Frame
    origin = (20, 52)  // These are just rough estimates.
    width = 118
    height = 187

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

---

示例 4

这与示例 2 相同，只是这次显示的视图的全部内容就像它没有被裁剪到视图边界时的样子。

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

---

示例 5

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (280, 70)
    width = 80
    height = 130

再次，请参阅here 了解我的回答，了解更多详细信息。

【讨论】：

谢谢Suragch。帧和界差的画面真的很清晰。我非常感谢您的努力。

我想在一个简短的答案中看到的所有内容。谢谢！

太棒了！例如示例 3：我不明白。您只是稍微移动了框架的原点，这会如何改变图像的旋转？

@asma22，在示例 3 中，我只是想表明，当您旋转图像时，框架会发生变化，但边界不会发生变化。 See my fuller answer.

【参考方案4】：

我想如果你从CALayer的角度去想，一切就更清楚了。

Frame 根本不是视图或层的真正独特属性，它是一个虚拟属性，由边界、位置（UIView 的中心）和变换计算得出。

所以基本上层/视图布局如何真正由这三个属性（和锚点）决定，这三个属性中的任何一个都不会改变任何其他属性，比如改变变换不会改变边界。

【参考方案5】：

由于我提出的问题已被多次看到，因此我将提供详细的答案。如果您想添加更多正确的内容，请随时修改它。

首先回顾一下这个问题：框架、边界和中心以及它们之间的关系。

Frame 视图的frame (CGRect) 是其矩形在superview 坐标系中的位置。默认情况下，它从左上角开始。

边界视图的bounds (CGRect) 在其自己的坐标系中表示视图矩形。

中心center 是一个CGPoint，以superview 的坐标系表示，它确定了视图的确切中心点的位置。

取自 UIView + position 这些是先前属性之间的关系（它们在代码中不起作用，因为它们是非正式方程）：

frame.origin = center - (bounds.size / 2.0)

center = frame.origin + (bounds.size / 2.0)

frame.size = bounds.size

注意：如果视图旋转，则这些关系不适用。有关更多信息，我建议您查看以下图片，该图片来自 The Kitchen Drawer，基于 Stanford CS193p 课程。致谢@Rhubarb。

使用frame 允许您在其superview 内重新定位和/或调整视图大小。通常可以从superview 使用，例如，当您创建特定的子视图时。例如：

// view1 will be positioned at x = 30, y = 20 starting the top left corner of [self view]
// [self view] could be the view managed by a UIViewController
UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

当您需要在view 内绘制坐标时，通常参考bounds。一个典型的例子是在view 中绘制一个子视图作为第一个的插图。绘制子视图需要知道父视图的bounds。例如：

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(50.0f, 50.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

UIView* view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];    
view2.backgroundColor = [UIColor yellowColor];

[view1 addSubview:view2];

当您更改视图的bounds 时会发生不同的行为。 例如，如果您更改 bounds size，则 frame 会更改（反之亦然）。更改发生在视图的center 周围。使用下面的代码，看看会发生什么：

NSLog(@"Old Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"Old Center %@", NSStringFromCGPoint(view2.center));    

CGRect frame = view2.bounds;
frame.size.height += 20.0f;
frame.size.width += 20.0f;
view2.bounds = frame;

NSLog(@"New Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"New Center %@", NSStringFromCGPoint(view2.center));

此外，如果您更改bounds origin，您将更改其内部坐标系的origin。默认情况下，origin 位于(0.0, 0.0)（左上角）。例如，如果您将origin 更改为view1，您可以看到（如果需要，可以评论前面的代码）现在view2 的左上角触及view1 之一。动机很简单。你对view1说它的左上角现在在(20.0, 20.0)的位置，但是由于view2的frameorigin是从(20.0, 20.0)开始的，它们会重合。

CGRect frame = view1.bounds;
frame.origin.x += 20.0f;
frame.origin.y += 20.0f;
view1.bounds = frame; 

origin 表示view 在其superview 中的位置，但描述了bounds 中心的位置。

最后，bounds 和 origin 不是相关概念。两者都允许导出视图的frame（参见前面的方程式）。

View1 的案例研究

这是使用以下 sn-p 时会发生的情况。

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

NSLog(@"view1's frame is: %@", NSStringFromCGRect([view1 frame]));
NSLog(@"view1's bounds is: %@", NSStringFromCGRect([view1 bounds]));
NSLog(@"view1's center is: %@", NSStringFromCGPoint([view1 center]));

相对图像。

如果我像下面这样更改[self view] 边界会发生什么。

// previous code here...
CGRect rect = [[self view] bounds];
rect.origin.x += 30.0f;
rect.origin.y += 20.0f;
[[self view] setBounds:rect];

相对图像。

这里你对[self view]说它的左上角现在在位置(30.0, 20.0)，但是由于view1的帧原点从(30.0, 20.0)开始，它们会重合。

其他参考资料（如果需要，可以使用其他参考资料进行更新）

UIView Geometry UIView Frames and Bounds

关于clipsToBounds（来源 Apple 文档）

将此值设置为 YES 会导致子视图被裁剪到边界 的接收器。如果设置为 NO，则其框架超出 接收器的可见边界不会被剪裁。默认值为 没有。

换句话说，如果一个视图的frame 是(0, 0, 100, 100) 并且它的子视图是(90, 90, 30, 30)，您将只能看到该子视图的一部分。后者不会超出父视图的范围。

masksToBounds 等价于clipsToBounds。此属性应用于CALayer，而不是UIView。在后台，clipsToBounds 调用 masksToBounds。如需更多参考，请查看How is the relation between UIView's clipsToBounds and CALayer's masksToBounds?。

【讨论】：

@Rhubarb 你是完全正确的。我会在我的回答中指出。谢谢。

我不知道我是否会得到答案但是为什么当边界原点改变时子视图会向负方向移动。只是似乎无法理解这一点。谢谢！！

@nimgrg 视图似乎向负方向移动，但事实并非如此。超级视图的内部坐标发生了变化。

原谅我的几何能力，如果将superview的内部坐标更改为原点（30.0，20.0），点（0,0）是在蓝色方块内部还是外部。我只是想追踪这些变化并理解它。感谢您花时间回答。

@flexaddicted：嗨，您添加的幻灯片显示：“视图 B 在其自己的坐标空间中的中间是：bounds.size.width/2+origin.x”——为什么会这样？由于标题在它自己的坐标空间中说，我会说它是：bounds.size.width/2+bounds.origin.x??不是吗？？

【参考方案6】：

我发现这张图片最有助于理解框架、边界等。

另外请注意frame.size != bounds.size图片旋转时。

【讨论】：

一张千言万语的图片。

最好的解释

@Erben Mo：您好，您添加的幻灯片说：“视图 B 在其自己的坐标空间中的中间是：bounds.size.width/2+origin.x” - 为什么会这样?由于标题在它自己的坐标空间中说，我会说它是：bounds.size.width/2+bounds.origin.x??不是吗？？

这张图片的来源是什么？链接？

@David 它来自斯坦福大学在 iTunesU 上的 CS193p 课程，可在此处找到：www.stanford.edu/class/cs193p/cgi-bin/drupal/downloads-2013-fall