IOS下拉放大图片

一、实现效果图

现在越来越多的APP中存在下拉放大图片的效果，今天贡献一下我的实现这种方法的原理，和我遇到的坑。效果图

二、程序实现

介绍一下我实现的原理
一进入界面的时候隐藏掉导航栏，因为操作系统的导航栏较麻烦，不如自己写一个导航栏来的简单,在界面要消失的时候在把导航栏显示出来即可，(也可以自己写一个pop动画)

-(void)viewWillAppear:(BOOL)animated
{
    self.navigationController.navigationBar.hidden = YES;
}
-(void)viewWillDisappear:(BOOL)animated
{
    self.navigationController.navigationBar.hidden = NO;
}

使用懒加载的方法把假的导航栏，图片和表格创建出来

1、这里有几点注意事项：

***1.图片不能添加到UITabview的HeaderView中，因为如果添加到HeaderView中，那图片就是表格的一部分了，会跟随表格的移动和移动。
2.表格要设置contentInset来显示出图片，不然会有覆盖问题
3.图片的填充模式很重要，一定要是UIViewContentModeScaleAspectFill这样可以节省很多代码
4.图片和假导航栏要设置clipsToBounds为YES，不然会有Bug***

//lazy
-(UITableView *)tableview
{
    if (!_tableview) {
        _tableview = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH) style:UITableViewStylePlain];
        CGFloat headImvH = kScreenW / 320 * 300;
        //这句很重要
        _tableview.contentInset = UIEdgeInsetsMake(headImvH-20, 0, 0, 0);

        _tableview.dataSource = self;
        _tableview.delegate = self;
    }
    return _tableview;
}

-(UIImageView *)headImv
{
    if (!_headImv) {
        _headImv = [[UIImageView alloc]init];
        CGFloat headImvH = kScreenW / 320 * 300;
        _headImv.frame = CGRectMake(0, 0, kScreenW, headImvH);
        _headImv.image = [UIImage imageNamed:@"head"];
        //一定记住模式
        _headImv.contentMode = UIViewContentModeScaleAspectFill;
        _headImv.clipsToBounds = YES;
    }
    return _headImv;
}

-(UIView *)navView
{
    if (!_navView) {
        _navView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, 64)];
        _navView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.8];
        _navView.clipsToBounds = YES;

        _titLab = [[UILabel alloc]init];
        _titLab.centerX = kScreenW * 0.5;
        _titLab.bounds = CGRectMake(0, 0, 150, 44);
        _titLab.textAlignment = NSTextAlignmentCenter;
        _titLab.font = [UIFont systemFontOfSize:12];
        _titLab.textColor = [UIColor blueColor];
        _titLab.numberOfLines = 0;
        _titLab.text = @"CF\n明天休息了";
        [_navView addSubview:_titLab];
    }
    return _navView;
}

这些代码很好理解，不做解释

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    //添加顺序不能改变
    [self.view addSubview:self.tableview];
    [self.view addSubview:self.headImv];
    [self.view addSubview:self.navView];
    [self setupNavView];
}

#pragma mark - 设置导航栏
-(void)setupNavView
{
    UIButton *leftNavBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    leftNavBtn.frame = CGRectMake(0, 20, 64, 44);
    [leftNavBtn setTitle:@"返回" forState:UIControlStateNormal];
    [leftNavBtn addTarget:self action:@selector(leftNavClike) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:leftNavBtn];

    UIButton *rightNavBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    rightNavBtn.frame = CGRectMake(kScreenW-64, 20, 64, 44);
    [rightNavBtn setTitle:@"更多" forState:UIControlStateNormal];
    [rightNavBtn addTarget:self action:@selector(rightNavClike) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:rightNavBtn];
}

-(void)leftNavClike
{
    [self.navigationController popViewControllerAnimated:YES];
}

-(void)rightNavClike
{

}


#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellID = @"cellID";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"测试数据——%td",indexPath.row];
    cell.detailTextLabel.text = [NSString stringWithFormat:@"测试数据——%td",indexPath.row];

    return cell;
}

2、下面为核心代码

通过表格的代理方法来改变整体的Frame
这里我发现一个问题，如果表格滑动的特别快，那么这个代理方法会存在来不及执行的效果，或者说偏移量不是线性改变的，从而导致根据偏移量来计算的Frame出现问题，所以有些控件建议在设置Frame的时候，建议用一个参照来改变(我这里假导航栏里面的文字用偏移出现了问题，所以改用假导航栏的透明度)
设置头部图片的Frame要注意，origin值不要改变一旦改变不好调整。

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //拿到偏移量
    CGFloat offsetY = scrollView.contentOffset.y;
    NSInteger headImvH = kScreenW / 320 * 300 ;
    CGFloat offset = headImvH + offsetY;//计算偏移量

    //设置导航栏
    self.navView.alpha = (offset / 250);
    if (self.navView.alpha >=1) {
        self.navView.alpha = 1;
    }
    //设置标题文字 设置距离
    //alpha 0-->1 y 64-->20
    self.titLab.y = 64 - 44 * self.navView.alpha;

    //设置头部图片大小
    self.headImv.frame = CGRectMake(0, 0, kScreenW, headImvH-offset);   
}

三、代码结构

代码包第一层目录

代码结构层目录

四、附上结构图

IOS下拉放大图片