iOS UI开发--下拉放大

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];