Objective-C日记-Bounds和Frame

Posted 2020-09-04

今天在学习有关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)。

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