先上图片
- View的位置和尺寸的两种表达
boundsVSframe.png
官方文档说明:
- frame: 该view在父view坐标系统中的位置和大小。（参照点是，父亲的坐标系统）
- bounds：该view在本地坐标系统中的位置和大小。（参照点是，本地坐标系统，就相当于ViewB自己的坐标系统，以0,0点为初始值）
- center：该view的中心点在父view坐标系统中的位置和大小。（参照点是，父亲的坐标系统）
(本段可以直接跳过,去看下面结论和栗子) bounds稍微有点费解,主要是自身本地坐标系统和父控件本地坐标系统的相对关系的理解。每个view都有一个本地坐标系统。正如bounds这个属性是参照这自身本地坐标系统来的,并不能影响自身view的位置。又比如触 摸的回调函数中的UITouch里面的>坐标值都是参照这个本地坐标系统的坐标。而frame这个属性是view参照父控件的坐标位置,frame决定view的显示位置.
初步结论:
- 通过修改view的bounds属性可以改变view和本地坐标系统原点的相对位置。
- bounds坐标位置改变只影响子view的位置和大小。
最终推断结论:
- 一个view,其bounds的坐标是其左上角点参照于其自身本地坐标系的坐标值
- 一个view,其在父控件中的显示位置由frame和父控件的本地坐标决定,frame和父控件本地坐标不变则其位置不变
- 如果这个view的bounds坐标改变,而frame不变则view相对于父控件位置还是原来位置,而结果是view的本地坐标原点改变(本地坐标原点是抽象的参照点)
- 比如bounds的y增大10,最终显示不是view向下移动10,而是其本地坐标系相对向上移动10,也即参照其本地坐标系的子控件跟随着向上移动10(见Demo1)
延伸:
- view的bounds坐标改变,在实际显示的时候表现出的是view的本地坐标位置的偏移,也就是内部的内容(也就是子控件)的偏移
- 可以继续推测:系统实现UIScrollView和UITableView或者UICollectionView也是通过改变bounds实现内部内容滚动的,在此仅分析系统UIScrollView的实现(见下面Demo2)
Demo1--bounds改变的栗子:
@interface ViewController ()
@property (nonatomic, weak) UIView *redView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//创建一个红色的view作为demo的父view
UIView *redView = [[UIView alloc] init];
redView.frame = CGRectMake(50, 50, 200, 200);
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
_redView = redView;
// 创建一个switch控件作为demo的子view
UISwitch *switchView = [[UISwitch alloc] init];
[_redView addSubview:switchView];
NSLog(@"%lf",switchView.frame.origin.x) ;
}
//运行demo点击屏幕改变redView的bounds,结果其子控件向上移动10
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
CGRect bounds = _redView.bounds;
//将redView的bounds的y坐标增加10
bounds.origin.y += 10;
_redView.bounds = bounds;
NSLog(@"%lf",_redView.bounds.origin.y);
}
@end
Demo2--分析系统UIScrollView的实现
1.验证系统UIScrollView滚动时的bounds坐标
#import "ViewController.h"
@interface ViewController ()<UIScrollViewDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//创建scrollView
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:scrollView];
//设置代理
scrollView.delegate = self;
//设置滚动范围
scrollView.contentSize = CGSizeMake(0, 1000);
scrollView.backgroundColor = [UIColor redColor];
//添加子控件,用于观察滚动
UISwitch *switchView = [[UISwitch alloc] init];
[scrollView addSubview:switchView];
}
#pragma mark UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//scrollView滚动时候观察bounds变化,验证scrollView的底层实现
NSLog(@"%@",NSStringFromCGRect(scrollView.bounds));
}
@end
2.通过修改bounds用UIView模仿系统实现ScrollView的功能
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, weak) UIView *myScrollView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//创建view
UIView *myScrollView = [[UIView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:myScrollView];
_myScrollView = myScrollView;
// 添加Pan手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[myScrollView addGestureRecognizer:pan];
//添加一个子控件用于观察view的滚动
UISwitch *switchView = [[UISwitch alloc] init];
[scrollView addSubview:switchView];
}
//监听手指移动,实现上下滚动
- (void)pan:(UIPanGestureRecognizer *)pan
{
// 获取偏移点
CGPoint transP = [pan translationInView:pan.view];
// 手指偏移量 = 当前点 - 上一个点,即手指向上移,偏移量为负
//而bounds的y坐标增加即偏移量为正,本地坐标向上偏移
// 为实现手指往上移动的时候myScrollView的本地坐标向上偏移 , 则bounds的y坐标偏移应该是等于把手指偏移量取相反数
CGFloat y = _myScrollView.bounds.origin.y -transP.y;
_myScrollView.bounds = CGRectMake(0, y , _myScrollView.bounds.size.width, _myScrollView.bounds.size.height);
// 复位手势
[pan setTranslation:CGPointZero inView:pan.view];
}
@end
网友评论