tableView下拉头部放大

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


效果.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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,958评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,246评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,404评论 25 708
  • 且把丹心付远志, 不教傲骨蒙尘烟。 几多离索视百炼, 声名但由人评说。
    抹茶味de逸飞阅读 277评论 0 2
  • 学习英语,甚至推而广之,应用到各方面的学习中,这一点不可忽略。 立下一个真实可行的小目标,对学习成长的过程来讲,其...
    16118f1f5e2c阅读 307评论 2 2