tableView下拉头部放大

作者: Sunxb | 来源:发表于2016-07-04 14:17 被阅读288次

这个效果很多见得, 想自己实现一下试试


效果.gif

主要的就是一个计算问题

直接附上代码

#import "ViewController.h"

#define KScreen_Width [UIScreen mainScreen].bounds.size.width
#define KScreen_Height [UIScreen mainScreen].bounds.size.height
#define imgHeight 200

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UIScrollViewDelegate>
{
    UITableView * rootTableView;
    UIImageView * headerImg;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
            
    rootTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, KScreen_Width, KScreen_Height)];
    rootTableView.delegate = self;
    rootTableView.dataSource = self;
    rootTableView.contentInset = UIEdgeInsetsMake(imgHeight, 0, 0, 0);
    [self.view addSubview:rootTableView];
    
    headerImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, -imgHeight, KScreen_Width, imgHeight)];
    headerImg.image = [UIImage imageNamed:@"1.jpg"];
    headerImg.contentMode = UIViewContentModeScaleAspectFill;// !!
    [rootTableView addSubview:headerImg];
    
    // Do any additional setup after loading the view, typically from a nib.
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 40;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString * ID = @"cell";
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"数据---%ld",indexPath.row];
    return cell;
}
    
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offsetY = scrollView.contentOffset.y;
    NSLog(@"%f",offsetY);
    CGFloat offsetH = imgHeight + offsetY;// offsetH是相对的偏移量(偏移量应该是scrollView.contentOffset.y 但是rootTableView.contentInset = UIEdgeInsetsMake(imgHeight, 0, 0, 0)  tableView提前设置便宜了一段距离  所以现在相对的偏移量应该是offsetH)
    if (offsetH < 0) {//下拉偏移为负数
        CGRect frame = headerImg.frame;
        frame.size.height = imgHeight - offsetH;//下拉后图片的高度应变大
        frame.origin.y = -imgHeight + offsetH;// 下边界是一定的  高度变大了  起始的Y应该上移
        headerImg.frame = frame;
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

最重要的部分就是下面这段计算

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offsetY = scrollView.contentOffset.y;
    NSLog(@"%f",offsetY);
    CGFloat offsetH = imgHeight + offsetY;// offsetH是相对的偏移量(偏移量应该是scrollView.contentOffset.y 但是rootTableView.contentInset = UIEdgeInsetsMake(imgHeight, 0, 0, 0)  tableView提前设置偏移了一段距离  所以现在相对的偏移量应该是offsetH)
    if (offsetH < 0) {//下拉偏移为负数
        CGRect frame = headerImg.frame;
        frame.size.height = imgHeight - offsetH;//下拉后图片的高度应变大
        frame.origin.y = -imgHeight + offsetH;// 下边界是一定的  高度变大了  起始的Y应该上移
        headerImg.frame = frame;
    }
}

具体的分析在代码后面已经做了注释

当然了,还有关于tableView的一些设置,比如
rootTableView.contentInset = UIEdgeInsetsMake(imgHeight, 0, 0, 0);
还有头部图片的设置
headerImg.contentMode = UIViewContentModeScaleAspectFill;// !!

注:图片是直接加在tableview上面的,并不是tableView的header

相关文章

网友评论

本文标题:tableView下拉头部放大

本文链接:https://www.haomeiwen.com/subject/vhgcjttx.html