1. 要实现的效果,左图为下拉前,右图为下拉后
2.首先最容易想到的是往tableHeaderView上,放一张图片.
但是tableHeaderView的宽度是固定的,这就意味着不容易做缩放效果;
顶部的上边界始终和tableView的上边界挨着,这就意味着下拉前只显示部分图片的效果,不容易实现.
3.最终方案:给tableView添加一张图片作为子视图, 并且图片应该在cell的下面,一开始图片只显示一部分
4. 示例代码
4.1 在ViewDidload方法中:
UIImage *a = [UIImage imageNamed:@"Image"]
UIImageView *imageV = [[UIImageView alloc] init];
[imageV setImage:[UIImage imageNamed:@"Image.jpg"]];
4.2 设置图片的frame
imageV.frame = CGRectMake(0, -150, 320, 300); // 300是随便设的,y的数值设为300的一半,方便计算
[self.tableView addSubview:imageV]; // 先尝试addSubView
4.3 现在图片是把cell遮挡,可以设置tableView的contentInset: 左图是设置contentInset之前,右图是设置之后
self.tableView.contentInset = UIEdgeInsetsMake(150, 0, 0, 0);
4.4 为了让图片开始时,只露部分,就要改图片的Y值,至此就实现了下拉不缩放的效果,见右图
imageV.frame = CGRectMake(0, -300, 320, 300);
4.5 要舰艇tableView的滚动,用scrollView的代理方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView;
第1种思路: 1>在代理方法内,算出滚动的距离
2>imageView的高=原高+滚动的距离
3>根据新算出的高,由原来长宽比例算出图片的宽
4>imageView的Y值不用算,但是要根据宽算出X值,算出的X值,要让图片水平居中显示
总之很繁琐.
第2种思路: 1>在代理方法内,算出滚动的距离
2>imageView的高=原高+滚动的距离
3>设置图片的内容模式,设置为 ScaleAspectFill = 缩放+ 等比例+ 填满
imageV.contentMode = UIViewContentModeScaleAspectFill; //在ViewDidLoad里
//在代理方法里:
float distance = - self.tableView.contentOffset.y - 150;
self.imageV.height = 300 + distance ;
4.6 修复往上拉时,图片下边界和cell之间产生距离的问题
float distance = - self.tableView.contentOffset.y - 150;
if (distance < 0) return ;
self.imageV.height = 300 + distance ;
4.7 修复往下拉,图片放大时,会遮挡cell的问题
[self.tableView insertSubview:imageV atIndex:0];