IOS下拉放大图片

立即下载用AI写一个

发布时间：2017-09-07

84人 | 浏览：4562次 | 收藏 |

技术：object-c

概述

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

详细

### 一、实现效果图
现在越来越多的APP中存在下拉放大图片的效果，今天贡献一下我的实现这种方法的原理，和我遇到的坑。效果图
![效果图](/contentImages/image/jianshu/1727268-2e0aa31453866844.gif)
### 二、程序实现
介绍一下我实现的原理
一进入界面的时候隐藏掉导航栏，因为操作系统的导航栏较麻烦，不如自己写一个导航栏来的简单,在界面要消失的时候在把导航栏显示出来即可，(也可以自己写一个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);   
}
```

### 三、代码结构

> 代码包第一层目录

![](/contentImages/image/20170907/kkNQlQqxbR6DOAyzO1T.png)
> 代码结构层目录

![](/contentImages/image/20170907/uDu25BIYSMbeba1RXh4.png)

### 四、附上结构图

![最开始](/contentImages/image/jianshu/1727268-4402b31b886a2815.png)

![上滑一半](/contentImages/image/jianshu/1727268-84d5c3494ebb7244.png)

![上滑完成](/contentImages/image/jianshu/1727268-2393f3e32efd2a24.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

IOS下拉放大图片

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子