UIView框架,边界和中心


320

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

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

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

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

你能给约之间的关系更多信息framebounds?怎么样clipsToBoundsmasksToBounds性质?


Answers:


577

由于我提出的问题已经多次出现,因此我将提供详细的答案。如果要添加更多正确的内容,请随时进行修改。

首先回顾一下这个问题:框架,界限,中心及其关系。

框架视图的frameCGRect)是其矩形在superview坐标系中的位置。默认情况下,它从左上方开始。

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

中心一个centerCGPoint在条款表达superview的坐标系统和它确定该视图的确切中心点的位置。

UIView +位置获取以下是先前属性之间的关系(由于它们是非正式方程,因此它们在代码中不起作用):

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

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

  • frame.size = bounds.size

注意:如果旋转视图,则这些关系不适用。有关更多信息,我建议您看一下以下基于斯坦福CS193p课程的厨房抽屉中拍摄的图像。致谢@Rhubarb

框架,边界和中心

使用,frame您可以在中调整视图的位置和/或调整视图的大小superviewsuperview例如,当您创建特定的子视图时,通常可以从中使用它。例如:

// 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)(左上角)。例如,如果更改originview1您可以看到(如果需要,请注释上一个代码)现在,左上角的view2触摸了view1该代码。动机很简单。您说view1现在它的左上角在(20.0, 20.0),但由于view2frame 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,则不会裁剪其帧超出接收者可见范围的子视图。默认值为“否”。

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

masksToBounds等价于clipsToBounds。相反的UIView,这个属性应用于CALayer。在幕后,clipsToBounds打来电话masksToBounds。有关更多参考,请查看UIView的clipsToBounds和CALayer的masksToBounds之间的关系如何?


@Rhubarb你完全正确。我会在答案中指出。谢谢。
Lorenzo B

我不知道是否会得到答案,但是为什么在更改边界原点时子视图会向负方向移动。只是似乎无法使我的头脑转弯。谢谢!!
nimgrg

@nimgrg看来视图朝负方向移动,但事实并非如此。超级视图的内部坐标已更改。
Lorenzo B

原谅我的几何能力,如果将超级视图的内部坐标更改为原点(30.0,20.0),则点(0,0)是位于蓝色方块的内部还是蓝色方块的外部。我只是试图跟踪变化并弄清变化。感谢您抽出宝贵的时间来回答。
nimgrg

@flexaddicted:嗨,您添加的幻灯片中说:“查看B在其自身坐标空间中的中间位置是:bounds.size.width / 2 + origin.x”-为什么会这样?由于标题是在其自己的坐标空间中表示的,因此我想说的是:bounds.size.width / 2 + bounds.origin.x ?? 是吗?

134

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

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

为了帮助我记住界限,我想到了篮球场的界限。篮球在球场内某处,就像视图范围的坐标系在视图本身之内一样。(法院=视图,篮球/球员=视图内的内容)

像框架一样,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

在此处输入图片说明

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


2
感谢Suragch。帧和绑定差异真的很清晰。非常感谢您的努力。
Mohd Haider

我想在一个简短的答案中看到的所有内容。谢谢!
马特·庄

太棒了!对于示例3:我不明白。您只稍微移动了框架的原点,这如何改变图像的旋转度?
Honey 2016年

@ asma22,在示例3中,我只是试图显示,当您旋转图像时,框架会发生变化,但边界不会发生变化。看到我更完整的答案
Suragch '16

89

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

在此处输入图片说明

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


14
一张价值一千字的图片。
Narendra Kamma 2012年

3
可能最好的解释
Ratikanta帕特雷

@Erben Mo:嗨,您添加的幻灯片中说:“查看B在其自身坐标空间中的中间位置是:bounds.size.width / 2 + origin.x”-为什么会这样?由于标题是在其自己的坐标空间中表示的,所以我会说它是:bounds.size.width / 2 + bounds.origin.x?是吗?

1
该图像的来源是什么?链接?
大卫

1
@David这是来自iTunesU上斯坦福大学CS193p课程的信息,网址为:www.stanford.edu/class/cs193p/cgi-bin/drupal/downloads-2013-fall
preynolds

3

我认为,如果从的角度出发CALayer,一切都会更加清晰。

框架根本不是视图或图层的独特属性,它是一种虚拟属性,根据边界,位置(UIView的中心)和transform。

因此,基本上,图层/视图的布局实际上是由这三个属性(和anchorPoint)决定的,这三个属性中的任何一个都不会更改任何其他属性,就像更改transform不会更改边界一样。


2

这个帖子有很好的答案,并有详细的解释。我只想提及一下,在WWDC 2011视频中了解帧,边界,中心,变换,边界原点的含义的另一种直观表示形式,是从@ 4:22到20:10开始的UIKit渲染理解


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));
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.