UI基础 - convertPoint:和convertRect: | 当子视图超出父视图时如何响应

■ 坐标转换

1. convertPoint: 和 convertRect: 两方法是分别将 point、rect 从目标视图中转换到当前视图里，并返回在当前视图中的像素值。注：fromView、toView 参数如果是 nil，那么其缺省值是 self.view.window

2. 代码示例

    // 红色视图
    UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(0, 100, 280, 200)];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 蓝色视图
    UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(0, 320, 100, 80)];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 灰色视图：红色视图的子视图
    UIView *grayView = [[UIView alloc] initWithFrame:CGRectMake(30, 50, 140, 100)];
    grayView.backgroundColor = [UIColor grayColor];
    [redView addSubview:grayView];
    
    // ---------------- fromView -----------------
    CGPoint newPointI = [self.view convertPoint:grayView.center fromView:redView];
    NSLog(@"redView 的子视图 grayView 相对于在 self.view 中的中心位置：%@",NSStringFromCGPoint(newPointI));// {100, 200}
    // {30 + 140/2.0,  100 + 50 + 100/2.0}


    CGRect newRectI = [self.view convertRect:grayView.frame fromView:redView];
    NSLog(@"redView 的子视图 grayView 相对于在 self.view 中的位置：%@",NSStringFromCGRect(newRectI));// {{30, 150}, {140, 100}}
    // {{30, 100 + 50}, {140, 100}}

    CGRect newRectII = [grayView convertRect:CGRectMake(50, 50, 20, 20) fromView:blueView];
    NSLog(@"blueView 内的 CGRect 相对于在 grayView 中的位置：%@",NSStringFromCGRect(newRectII));    // {{20, 220}, {20, 20}}
    // {{-30 + 50, -(100 + 50) + 320 + 50}, {20, 20}}

    // ------------------- toView -------------------
    CGPoint newPointIV  = [redView convertPoint:grayView.center toView:self.view];
    NSLog(@"redView 的子视图 grayView 相对于在 self.view 中的中心位置：%@",NSStringFromCGPoint(newPointIV));// {100, 200}

    CGRect newRectV = [redView convertRect:grayView.frame toView:self.view];
    NSLog(@"redView 的子视图 grayView 相对于在 self.view 中的位置：%@",NSStringFromCGRect(newRectV));// {{30, 150}, {140, 100}}

    CGRect newRectIVI = [blueView convertRect:CGRectMake(50, 50, 20, 20) toView:grayView];
    NSLog(@"blueView 内的 CGRect 相对于在 grayView 中的位置：%@",NSStringFromCGRect(newRectIVI));   // {{20, 220}, {20, 20}}

■ 应用场景

1. 我们知道 UIButton 超出父视图的部分是无法响应事件的....... 如何使其超出父视图的部分，同样可以响应触摸事件？我们知道 UIView 提供了两个方法来确定响应者

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event;
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event;

每次点击 View 时，两个方法各会调用两次：分别是入栈、出栈操作。注：superView 先入栈，其调用时机分别是消息传递时、响应时

2.  在 RedView 上面添加一个超出其范围的 Btn，当我们点击超出范围的区域时，同样可以触发 Btn 绑定的方法

// - RedView.m

#import "RedView.h"

@implementation RedView

// 是否能接受触摸事件
-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event{

    UIView *view = [super hitTest:point withEvent:event];
    NSLog(@"%s---%@",__FUNCTION__,view);// 超出 self 的点击区域会返回 nil
    // 在这里我们通过判断 nil 的值，就可以找到超出 self 范围的子视图
    if (view == nil) {
        for (UIView *subView in self.subviews) {
            // subView 就是 testBtn
            CGPoint convertPoint = [subView convertPoint:point fromView:self];// 坐标转换
            if (CGRectContainsPoint(subView.bounds, convertPoint)) {
                view = subView;
            }
        }
    }
    return view;
}

// 触摸点是否在自己身上
-(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event{

    NSLog(@"pointInside：%@",[super pointInside:point withEvent:event]?@"yes":@"no");
    return [super pointInside:point withEvent:event];
}

@end

// - ViewController.m

#import "ViewController.h"
#import "RedView.h"

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];

    // 父视图 RedView
    RedView *redView = [[RedView alloc] initWithFrame:CGRectMake(50, 100, 180, 180)];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 子视图 Btn
    UIButton *testBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    testBtn.frame = CGRectMake(120, 120, 130, 130);
    testBtn.backgroundColor = [UIColor cyanColor];
    [redView addSubview:testBtn];
    [testBtn addTarget:self action:@selector(makeClick) forControlEvents:UIControlEventTouchUpInside];

}

// Btn 超出父视图范围，但是同样可以触发该方法
-(void)makeClick{

    NSLog(@"%s",__func__);
}

@end

运行效果

日志信息

红色框：鼠标点击在 1 处的日志，makeClick: 方法触发

绿色框：鼠标点击在 2 处的日志，makeClick: 方法同样会触发

蓝色框：鼠标点击在 3 处的日志，makeClick: 方法不会触发