iOS控件之bounds与frame

先上图片

• 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的位置和大小。

最终推断结论:

1. 一个view,其bounds的坐标是其左上角点参照于其自身本地坐标系的坐标值
2. 一个view,其在父控件中的显示位置由frame和父控件的本地坐标决定,frame和父控件本地坐标不变则其位置不变
3. 如果这个view的bounds坐标改变,而frame不变则view相对于父控件位置还是原来位置,而结果是view的本地坐标原点改变(本地坐标原点是抽象的参照点)
4. 比如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