今天在学习有关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)。
这样,再进行计算,便得到了上述结果。