iOS:下拉时图片拉伸效果

下拉时图片拉伸效果经常会遇到，这次项目中用到，思考了下写了两种思路的实现：

1. 利用[tableview insertSubview:imageView atIndex:0]，将UIImageView加到tableview上；但是需要考虑到滚动时，UIImageView也会进行滚动，此时在滚动时需要改变UIImageView的origin.y。贴一下主要代码如下：

- (void)dropDownImage {
//0.56是图片的比例
    tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)) style:UITableViewStylePlain];
    tableview.dataSource = self;
    tableview.delegate = self;
    tableview.contentInset = UIEdgeInsetsMake(0.56*CGRectGetWidth(self.view.frame), 0, 0, 0 );
    //适配ios11的安全区域偏移量，用UIScrollView的contentInsetAdjustmentBehavior属性或者用UIViewController的additionalSafeAreaInsets属性来解决
    tableview.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    //    self.additionalSafeAreaInsets = UIEdgeInsetsMake(-44, 0, 0, 0);
    tableview.backgroundColor = [UIColor clearColor];
    UIImage *image = [UIImage imageNamed:@"1212"];
    imageViewFrame = CGRectMake(0, -0.56*CGRectGetWidth(self.view.frame), CGRectGetWidth(self.view.frame), 0.56*CGRectGetWidth(self.view.frame));
    imageView = [[UIImageView alloc] initWithFrame:imageViewFrame];
    imageView.image = image;
    [tableview insertSubview:imageView atIndex:0];
    [self.view addSubview:tableview];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    float y = scrollView.contentOffset.y;
    float height = imageViewFrame.size.height;
    if (y < -height) {
        CGFloat Ky = -scrollView.contentOffset.y-height;
        //除以2是x轴在拉伸的过程也需要位伸，需要居中拉伸，故/2
        CGFloat Kx = (Ky/height)*CGRectGetWidth(imageViewFrame)/2;
        imageView.frame = CGRectMake(0-Kx, 0-Ky-height,
                                      CGRectGetWidth(imageViewFrame)+2*Kx, height+Ky);
    }
}

2. 利用[self.view addSubview:imageView]，将UIImageView加到viewController上，再加tableview。那么UIImageView将在tableview的下层。但是这里tableview会挡住下层的UIImageView，考虑用tableHeaderView预留出跟UIImageView同样高度的视图出来，并将背景色置为透明，这样将会显示下层的UIImageView。

UIImage *image = [UIImage imageNamed:@"1212"];
    imageViewFrame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 0.56*CGRectGetWidth(self.view.frame));
    imageView = [[UIImageView alloc] initWithFrame:imageViewFrame];
    imageView.image = image;
    [self.view addSubview:imageView];
    tableview = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)) style:UITableViewStylePlain];
    tableview.dataSource = self;
    tableview.delegate = self;
    //适配ios11的安全区域偏移量，用uiscrollview的contentInsetAdjustmentBehavior属性或者用uiviewcontroller的additionalSafeAreaInsets属性来解决
    tableview.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
//    self.additionalSafeAreaInsets = UIEdgeInsetsMake(-44, 0, 0, 0);
    tableview.backgroundColor = [UIColor clearColor];
    headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), imageViewFrame.size.height)];
    headerView.backgroundColor = [UIColor colorWithWhite:1 alpha:0];
    tableview.tableHeaderView = headerView;
    [self.view addSubview:tableview];

我们debug一下view Hierarchy，如下：

image.png

后面代码就是往下滚动时，UIImageView的拉伸效果了；往上滚动时做了个透明度变化的效果。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    float y = scrollView.contentOffset.y;
    float height = imageViewFrame.size.height;
    if (y < 0) {
        float nx = ((-y + height) / 0.56 - imageViewFrame.size.width)/ 2;
        float nh = -y + height;
        NSLog(@"aa:%.f",nx);
        imageView.frame = CGRectMake(-nx, 0, CGRectGetWidth(imageViewFrame)+nx*2, nh);
    }else {
        float al = y / height;
        headerView.backgroundColor = [UIColor colorWithWhite:1 alpha:al];
        imageView.frame = CGRectMake(0, -y, CGRectGetWidth(self.view.frame), 0.56*CGRectGetWidth(self.view.frame));
    }
}