第六十七篇OC_UITableView head下拉图片放大的效果

Posted 2020-08-16 久冬不雨

(一) 布置UITableview

我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset

来为图片视图留出位置，这里我们的图片高度暂定为280

const CGFloat contentInset = 280;

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>

@property (nonatomic, strong) UITableView *tableView;

@property (nonatomic, strong) UIImageView *imageView;

@end

 

简单地创建一个tableView

    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds];

    _tableView.delegate = self;

    _tableView.dataSource = self;

    [self.view addSubview:_tableView];

    self.tableView.contentInset = UIEdgeInsetsMake(contentInset , 0, 0, 0);

 

(二) 布置图片

   self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, - contentInset, self.view.bounds.size.width, contentInset)];

    _imageView.image = [UIImage imageNamed:@"image01.jpg"];

    [self.tableView addSubview:_imageView];

    _imageView.contentMode = UIViewContentModeScaleAspectFill;

    _imageView.clipsToBounds = YES;

 

(三) 拖动事件的处理

我们都知道，UITableview属于可以滑动的控件，所以它的父类是UIScrollView，所以我们就可以在滑动事件中做出一些处理。
在滑动的时候，一旦判定是下拉状态,那么我们就要动态的改变图片的纵向位置和图片的高度（由于设置了contentMode，所以宽度自己会变化），最终实现所需要的效果。
代码如下

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGPoint point = scrollView.contentOffset;

    if (point.y < - contentInset) {

        CGRect rect  = self.imageView.frame;

        rect.origin.y = point.y;

        rect.size.height = - point.y;

        self.imageView.frame = rect;
    }

}

由于contentInset预设置的大小不同,可能会出现图片先下拉再放大和立即放大的两种效果.