首页 > 代码库 > Objective-C日记-Bounds和Frame

Objective-C日记-Bounds和Frame

今天在学习有关UIView时,关于Bounds和Frame的问题困扰多时,今日研究了一翻,有所收获,遂记之。

一、问题来源

网上有关bounds和frames的比较的文章主要就是一篇:http://blog.csdn.net/mad1989/article/details/8711697,核心思想是bounds的坐标系是相对于自己而言,而frames的坐标系是相对于父视图,主要的演示代码如下:

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];  
[view1 setBounds:CGRectMake(-20, -20, 200, 200)];  
view1.backgroundColor = [UIColor redColor];  
[self.view addSubview:view1];//添加到self.view  
NSLog(@"view1 frame:%@========view1 bounds:%@",NSStringFromCGRect(view1.frame),NSStringFromCGRect(view1.bounds));  
  
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];  
view2.backgroundColor = [UIColor yellowColor];  
[view1 addSubview:view2];//添加到view1上,[此时view1坐标系左上角起点为(-20,-20)]  
NSLog(@"view2 frame:%@========view2 bounds:%@",NSStringFromCGRect(view2.frame),NSStringFromCGRect(view2.bounds)); 

 如果按以上代码运行可以得到期望的结果:

技术分享

2017-03-12 21:32:04.474 BoundsAndFrame[5910:450792] view1‘s frame {{20, 20}, {200, 200}}=========view1 bounds:{{-20, -20}, {200, 200}}

2017-03-12 21:32:04.475 BoundsAndFrame[5910:450792] view2 frame:{{0, 0}, {100, 100}}=========view2 bounds:{{0, 0}, {100, 100}}

我们想将这个图形结果进行一些更改:

1、将红色区域变成正方形,并将其宽度加长一倍,变成400。

2、将黄色图形向下移动,使其上边缘距红色图形内部边缘底部为10。如下图所示:

技术分享

将其代码更改为:

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];  
[view1 setBounds:CGRectMake(-20, -190, 400, 200)];  
view1.backgroundColor = [UIColor redColor];  
[self.view addSubview:view1];//添加到self.view  
NSLog(@"view1 frame:%@========view1 bounds:%@",NSStringFromCGRect(view1.frame),NSStringFromCGRect(view1.bounds));  
  
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];  
view2.backgroundColor = [UIColor yellowColor];  
[view1 addSubview:view2];//添加到view1上,[此时view1坐标系左上角起点为(-20,-20)]  
NSLog(@"view2 frame:%@========view2 bounds:%@",NSStringFromCGRect(view2.frame),NSStringFromCGRect(view2.bounds)); 

但得到的结果如下所示,并不是我们想要的。

技术分享

2017-03-12 21:40:57.170 BoundsAndFrame[5950:457772] view1‘s frame {{-80, 20}, {400, 200}}=========view1 bounds:{{-20, -190}, {400, 200}}

2017-03-12 21:40:57.170 BoundsAndFrame[5950:457772] view2 frame:{{0, 0}, {100, 100}}=========view2 bounds:{{0, 0}, {100, 100}}

二、问题分析

按上面比较bounds和frames区别的那篇文章来讲,

[view1 setBounds:CGRectMake(-20, -190, 400, 200)];

这个语句中的setBounds方法的功能是将本view的bounds坐标原点强制设置成(-20,-190),并将CGRect的宽和高设置成(400,200)。

按计算,被转换过后的view1的frame坐标应该还是(20,20),宽高(400,200)。

三、问题解决

那篇比较bounds和frames的文章中有一个重要的问题没有提到,最后在Apple的API Reference中找到答案:

Changing the bounds size grows or shrinks the view relative to its center point.(对形状边界进行扩大或缩小,是相对于其中心点进行的。)

我概括使用bounds属性进行坐标和大小变换的原则:以中心为原点进行缩放,先宽高后坐标。

是要先进行宽和高的变换,比如这上面那句

[view1 setBounds:CGRectMake(-20, -190, 400, 200)];

宽度的变换是以中心为原点,向两边各延长100,高为200不变。

大小变换完成之后,再将得到的图形的原点(左上角顶点)的bounds坐标设置为(-20,-190)。

这样,再进行计算,便得到了上述结果。

 

Objective-C日记-Bounds和Frame