一般使用下拉放大的场景比较多是在tableViewController中,所以这个demo的使用场景就是tableViewController中。
思考问题:下拉放大的图片是在cell的最上面,如效果图:
所以很容易想到做法是直接搞一个UImageView设置为tableHeaderView,但是这样有个问题,图片会遮住cell的内容。
那么我的做法是:
搞一个UIImageView 插入到tableView的最底层,再根据我往下拖拽多少,UIImageView的高度就增加多少。
图片放大:设置UIImageView 显示模式为UIViewContentModeScaleAspectFill 等比例居中显示图片
以上两个步骤就是最主要的,下面上代码:
#import "ViewController.h"
const CGFloat TopViewH = 350;
@interface ViewController ()
@property(nonatomic, weak) UIImageView *topView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//设置内边距,让cell以开始就往下移动一段距离
self.tableView.contentInset = UIEdgeInsetsMake(TopViewH * 0.5, 0, 0, 0);
UIImageView *topView = [[UIImageView alloc]init];
topView.image = [UIImage imageNamed:@"biaoqingdi"];
topView.frame = CGRectMake(0, -TopViewH, self.tableView.bounds.size.width, TopViewH);
topView.contentMode = UIViewContentModeScaleAspectFill;
[self.tableView insertSubview:topView atIndex:0];
self.topView = topView;
}
// 行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 20;
}
// Cell循环利用
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
}
cell.textLabel.text = [NSString stringWithFormat:@"测试--%zd",indexPath.row];
return cell;
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//计算往下拖拽的的高度(y值往下拖拽是负值的,要得出拖拽的正值)
CGFloat down = -(TopViewH * 0.5) - scrollView.contentOffset.y;
if(down < 0) return; //如果不加这个判断的话,当你往上滑动cell的时候,上面的图片消失
CGRect frame = self.topView.frame;
/**
* 通过调节imageView的高度来达到图片的放大的效果,前提得把imageView的contentMode 设置成UIViewContentModeScaleAspectFill,这样图片就会根据imageView的高度等比例的缩放图片,居中显示 在imageView上
*/
frame.size.height = TopViewH + down * 2; //“*”后面的系数是调节图片放大的速度
self.topView.frame = frame;
}
以上代码就是全部代码了。