325

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

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

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

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

你能提供更多关于和之间关系的信息frameboundsclipsToBoundsmasksToBounds属性呢?

4

6 回答 6

584

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

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

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

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

中心Acenter以的坐标系CGPoint表示superview,它确定了视图的确切中心点的位置。

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

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

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

  • frame.size = bounds.size

注意:如果视图旋转,这些关系不适用。有关更多信息,我建议您查看以下图片,该图片取自基于斯坦福 CS193p课程的 The Kitchen Drawer 。归功于@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];

当您需要在 a 内绘制坐标时,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)(左上角)。例如,如果您更改originfor,view1您可以看到(如果需要,请注释之前的代码)现在左上角 forview2触及了那个view1。动机很简单。你说它的view1左上角现在在那个位置(20.0, 20.0),但是由于view2'frame origin从 开始(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中心的位置。

最后,boundsorigin是不相关的概念。两者都允许导出frame视图(参见前面的方程)。

View1 的案例研究

这是使用以下代码段时发生的情况。

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) 开始,它们会重合。

其他参考资料(如果需要,可以使用其他参考资料进行更新)

关于clipsToBounds(来源 Apple 文档)

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

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

masksToBounds相当于clipsToBounds。而不是 a UIView,此属性应用于 a CALayer。在引擎盖下,clipsToBounds调用masksToBounds. 如需进一步参考,请查看UIView 的 clipsToBounds 和 CALayer 的 maskToBounds 之间的关系如何?.

于 2012-07-01T14:27:48.007 回答
141

这个问题已经有了很好的答案,但我想补充一些图片。我的完整答案在这里。

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

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

和框架一样,view.center也在父视图的坐标中。

框架与边界 - 示例 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

在此处输入图像描述

同样,请参阅此处以获取更多详细信息。

于 2015-03-08T06:11:10.990 回答
89

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

在此处输入图像描述

另请注意,frame.size != bounds.size当图像旋转时。

于 2012-10-12T00:50:54.717 回答
4

我想如果你从 的角度来思考CALayer,一切都会更清楚。

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

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

于 2014-10-21T05:51:34.557 回答
3

这篇文章的详细解释有很好的答案。我只想提一下,WWDC 2011 视频从@4:22 到 20:10理解 UIKit Rendering中的 Frame、Bounds、Center、Transform、Bounds Origin 的含义还有另一种视觉表示的解释

于 2015-10-31T19:16:25.143 回答
0

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

假设在线浏览,网络浏览器是您frame决定在哪里显示网页以及显示多大的网页。浏览器的滚动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));
于 2015-04-03T20:46:57.537 回答