视图UIView的frame、bounds与center属性

UIView类中定义了三个属性，分别是frame、bounds与center属性：

1. @property(nonatomic) CGRect frame;  
2. @property(nonatomic) CGRect bounds;  
3. @property(nonatomic) CGPoint center;  

在详细介绍这三个属性之前，我们应该知道UIKit中的坐标系X轴正方向为水平向右，Y轴正方向为竖直向下。

frame属性指的是视图在其父视图坐标系中的位置与尺寸。在创建视图时，我们就需要在初始化方法中指定视图的frame：

[objc] view plaincopy

1. - (id)initWithFrame:(CGRect)frame; 

这样创建了视图之后，通过addSubview:方法就可以将创建的子视图放置在父视图的指定位置，并以指定的尺寸显示出来。

center属性理解起来也很简单，它就是视图的中心点在其父视图坐标系中的位置坐标。简单讲，center属性就定义了当前视图在父视图中的位置。

那么bounds属性呢？它指的是视图在其自己的坐标系中的位置与尺寸。

[objc] view plaincopy

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
2. {  
3.     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
4.     // Override point for customization after application launch.  
5.     self.window.backgroundColor = [UIColor whiteColor];  
6.       
7.     UIView* testView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];  
8.     testView.backgroundColor = [UIColor redColor];  
9.     [self.window addSubview:testView];  
10.       
11.     NSLog(@"Frame: (%.2f, %.2f, %.2f, %.2f)", testView.frame.origin.x, testView.frame.origin.y, testView.frame.size.width, testView.frame.size.height);  
12.     NSLog(@"Bounds: (%.2f, %.2f, %.2f, %.2f)", testView.bounds.origin.x, testView.bounds.origin.y, testView.bounds.size.width, testView.bounds.size.height);  
13.     NSLog(@"Center: (%.2f, %.2f)", testView.center.x, testView.center.y);  
14.       
15.     [self.window makeKeyAndVisible];  
16.     return YES;  
17. }  

输出：

[objc] view plaincopy

1. Frame: (50.00, 50.00, 100.00, 100.00)  
2. Bounds: (0.00, 0.00, 100.00, 100.00)  
3. Center: (100.00, 100.00)  

运行界面：

图1

由于视图的定位一定需要针对父视图，而不是针对自己，所以bounds属性并不能够决定当前视图的位置（因为它与父视图根本无关，就谈不上定位），所以bounds属性与center属性是完全独立的，前者规定尺寸，后者定义位置。换句话说，修改bounds不影响center；修改center不影响bounds。

默认情况下，当视图创建后，其自己的坐标系原点(0, 0)位于其左上角位置。不过，本地原点位置是会随时发生变化的。例如将bounds由最初的(0, 0, 100, 100)修改为(50, 50, 100, 100)，则意味着本地原点向左向上移动了50。由于位置和尺寸都未发生变化，所以frame属性与center属性不变。在[self.window makeKeyAndVisible];语句之前加入下面的代码：

[objc] view plaincopy

1. NSLog(@"Modify Bounds to (50, 50, 100, 100)");  
2. testView.bounds = CGRectMake(50, 50, 100, 100);  
3. NSLog(@"Frame: (%.2f, %.2f, %.2f, %.2f)", testView.frame.origin.x, testView.frame.origin.y, testView.frame.size.width, testView.frame.size.height);  
4. NSLog(@"Bounds: (%.2f, %.2f, %.2f, %.2f)", testView.bounds.origin.x, testView.bounds.origin.y, testView.bounds.size.width, testView.bounds.size.height);  
5. NSLog(@"Center: (%.2f, %.2f)", testView.center.x, testView.center.y);  

输出：

[objc] view plaincopy

1. Modify Bounds to (50, 50, 100, 100)  
2. Frame: (50.00, 50.00, 100.00, 100.00)  
3. Bounds: (50.00, 50.00, 100.00, 100.00)  
4. Center: (100.00, 100.00)  

运行界面依然是图1。

再例如将bounds由最初的(0, 0, 100, 100)修改为(0, 0, 140, 140)，则本地原点向左向上移动20。frame属性变为(30, 30, 140, 140)，center属性不变，仍然是(100, 100)。

[objc] view plaincopy

1. NSLog(@"Modify Bounds to (0, 0, 140, 140)");  
2. testView.bounds = CGRectMake(0, 0, 140, 140);  
3. NSLog(@"Frame: (%.2f, %.2f, %.2f, %.2f)", testView.frame.origin.x, testView.frame.origin.y, testView.frame.size.width, testView.frame.size.height);  
4. NSLog(@"Bounds: (%.2f, %.2f, %.2f, %.2f)", testView.bounds.origin.x, testView.bounds.origin.y, testView.bounds.size.width, testView.bounds.size.height);  
5. NSLog(@"Center: (%.2f, %.2f)", testView.center.x, testView.center.y);  

输出：

[plain] view plaincopy

1. Modify Bounds to (0, 0, 140, 140)  
2. Frame: (30.00, 30.00, 140.00, 140.00)  
3. Bounds: (0.00, 0.00, 140.00, 140.00)  
4. Center: (100.00, 100.00)  

运行界面：

图2

现在我们把testView改回为最初的状态，并在其中添加一个子视图greenView。

[objc] view plaincopy

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
2. {  
3.     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
4.     // Override point for customization after application launch.  
5.     self.window.backgroundColor = [UIColor whiteColor];  
6.       
7.     UIView* testView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];  
8.     testView.backgroundColor = [UIColor redColor];  
9.     [self.window addSubview:testView];  
10.       
11.     UIView* greenView = [[UIView alloc] initWithFrame:CGRectMake(30, 30, 80, 80)];  
12.     greenView.backgroundColor = [UIColor greenColor];  
13.     [testView addSubview:greenView];  
14.       
15.     NSLog(@"testView Frame: (%.2f, %.2f, %.2f, %.2f)", testView.frame.origin.x, testView.frame.origin.y, testView.frame.size.width, testView.frame.size.height);  
16.     NSLog(@"testView Bounds: (%.2f, %.2f, %.2f, %.2f)", testView.bounds.origin.x, testView.bounds.origin.y, testView.bounds.size.width, testView.bounds.size.height);  
17.     NSLog(@"testView Center: (%.2f, %.2f)", testView.center.x, testView.center.y);  
18.       
19.     NSLog(@"greenView Frame: (%.2f, %.2f, %.2f, %.2f)", greenView.frame.origin.x, greenView.frame.origin.y, greenView.frame.size.width, greenView.frame.size.height);  
20.     NSLog(@"greenView Bounds: (%.2f, %.2f, %.2f, %.2f)", greenView.bounds.origin.x, greenView.bounds.origin.y, greenView.bounds.size.width, greenView.bounds.size.height);  
21.     NSLog(@"greenView Center: (%.2f, %.2f)", greenView.center.x, greenView.center.y);  
22.       
23.     [self.window makeKeyAndVisible];  
24.     return YES;  
25. }  

输出：

 

[plain] view plaincopy

1. testView Frame: (50.00, 50.00, 100.00, 100.00)  
2. testView Bounds: (0.00, 0.00, 100.00, 100.00)  
3. testView Center: (100.00, 100.00)  
4. greenView Frame: (30.00, 30.00, 80.00, 80.00)  
5. greenView Bounds: (0.00, 0.00, 80.00, 80.00)  
6. greenView Center: (70.00, 70.00)  

界面：

 

图3

然后在[self.window makeKeyAndVisible];语句之前加入下面的代码，将testView的bounds改为(50, 50, 100, 100)：

 

[objc] view plaincopy

1. NSLog(@"Modify testView Bounds to (50, 50, 100, 100)");  
2. testView.bounds = CGRectMake(50, 50, 100, 100);  
3. NSLog(@"testView Frame: (%.2f, %.2f, %.2f, %.2f)", testView.frame.origin.x, testView.frame.origin.y, testView.frame.size.width, testView.frame.size.height);  
4. NSLog(@"testView Bounds: (%.2f, %.2f, %.2f, %.2f)", testView.bounds.origin.x, testView.bounds.origin.y, testView.bounds.size.width, testView.bounds.size.height);  
5. NSLog(@"testView Center: (%.2f, %.2f)", testView.center.x, testView.center.y);  
6.   
7. NSLog(@"greenView Frame: (%.2f, %.2f, %.2f, %.2f)", greenView.frame.origin.x, greenView.frame.origin.y, greenView.frame.size.width, greenView.frame.size.height);  
8. NSLog(@"greenView Bounds: (%.2f, %.2f, %.2f, %.2f)", greenView.bounds.origin.x, greenView.bounds.origin.y, greenView.bounds.size.width, greenView.bounds.size.height);  
9. NSLog(@"greenView Center: (%.2f, %.2f)", greenView.center.x, greenView.center.y);  

输出：

[plain] view plaincopy

1. testView Frame: (50.00, 50.00, 100.00, 100.00)  
2. testView Bounds: (0.00, 0.00, 100.00, 100.00)  
3. testView Center: (100.00, 100.00)  
4. greenView Frame: (30.00, 30.00, 80.00, 80.00)  
5. greenView Bounds: (0.00, 0.00, 80.00, 80.00)  
6. greenView Center: (70.00, 70.00)  
7. Modify testView Bounds to (50, 50, 100, 100)  
8. testView Frame: (50.00, 50.00, 100.00, 100.00)  
9. testView Bounds: (50.00, 50.00, 100.00, 100.00)  
10. testView Center: (100.00, 100.00)  
11. greenView Frame: (30.00, 30.00, 80.00, 80.00)  
12. greenView Bounds: (0.00, 0.00, 80.00, 80.00)  
13. greenView Center: (70.00, 70.00)  

界面：

图4

由于testView自己坐标的原点被移动到了屏幕的左上角位置，所以greenView在界面上的位置也相应发生了变化。所以，当修改了视图自身的原点位置时，不会影响其自身的位置，而会影响到其子视图的位置。