UITableView下拉放大效果

下拉放大效果非常常见, 做起来也比较简单, 主要思路如下：

1. 需要下拉放大的图片最好是add进tableview的最底部，而不要作为tableview的头部
2. 设置图片的y值为一个负数（我设置的是“-图片的高度”），这样图片的底部就是处于屏幕的顶部
3. 设置tableview的内边距contentInset， 设置为图片高度的一半，这样图片就会露出一半
4. 在UIScrollViewDelegate代理方法中计算下拉的偏移量, 根据偏移量设置图片缩放的比例, 也可以通过修改图片的宽高达到效果(设置图片的内容模式)

#import "ViewController.h"

#define kScreenHeight [UIScreen mainScreen].bounds.size.height
float ratio = 3;           // 阻尼系数
CGFloat imageWidth = 415;  // 图片宽度
CGFloat imageHeight = 260; // 图片高度

@interface ViewController () <UITableViewDataSource, UITableViewDelegate>

@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) UIImageView *topImageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setupSubViews];
}

- (void)setupSubViews
{
    UIImageView *topImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"13.jpg"]];
    topImageView.contentMode = UIViewContentModeScaleAspectFill;
    // 1.图片的Y值设置为“-图片高度”
    topImageView.frame = CGRectMake(0, -imageHeight, imageWidth, imageHeight);
    _topImageView = topImageView;
    // 2.把图片插入到TableView的底部
    [self.tableView insertSubview:topImageView atIndex:0];
    // 3.设置TableView的内边距为“图片高度的一半”, 也就是说默认图片会露出来一半
    self.tableView.contentInset = UIEdgeInsetsMake(imageHeight / 2, 0, 0, 0);
    [self.view addSubview:_tableView];
}

#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 30;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *reuseId = @"reuseId";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseId];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseId];;
    }
    cell.textLabel.text = [NSString stringWithFormat:@"下拉有惊喜哦%ld", indexPath.row];
    return cell;
}

#pragma mark - UIScrollViewDelegate(缩放)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 4.计算出Y轴的偏移量, 默认的位置为“-图片高度”, 所以需要加上图片高度的一半
    CGFloat offsetY = scrollView.contentOffset.y + imageHeight / 2;
    if (offsetY > 0) {
        return;
    }
    NSLog(@"offsetY = %f", offsetY);

    // 5.计算缩放比例 = 偏移量 / 屏幕高度 * 阻尼系数 (阻尼系数越大, 越难拖动)
    CGFloat scale = -offsetY / kScreenHeight * ratio;
    _topImageView.transform = CGAffineTransformMakeScale(1 + scale, 1 + scale);
}

#pragma mark - UIScrollViewDelegate(修改高度)
//- (void)scrollViewDidScroll:(UIScrollView *)scrollView
//{
//    // 4.计算出Y轴的偏移量, 默认的位置为“-图片高度”, 所以需要加上图片高度的一半
//    CGFloat offsetY = scrollView.contentOffset.y + imageHeight / 2;
//    if (offsetY > 0) {
//        return;
//    }
//    NSLog(@"offsetY = %f", offsetY);
//
//    // 5. 修改高度达到效果
//    // 因为图片的contentModel已经设置为UIViewContentModeScaleAspectFill，所以只要修改高度, 宽度也会等比例伸缩
//    CGRect frame = _topImageView.frame;
//    frame.size.height = imageHeight - offsetY;
//    _topImageView.frame = frame;
//}

- (UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:self.view.bounds];
        _tableView.dataSource = self;
        _tableView.delegate = self;
        _tableView.rowHeight = 50;
    }
    return _tableView;
}

@end

效果如下: