IOS下拉放大图片

╰+攻爆jí腚メ 2022-05-30 07:48 191阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11623.html][http_www.demodashi.com_demo_11623.html]

### 一、实现效果图 ###

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

### 二、程序实现 ###

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

### 三、代码结构 ###

> 代码包第一层目录

![kkNQlQqxbR6DOAyzO1T.png][]

> 代码结构层目录

![uDu25BIYSMbeba1RXh4.png][]

### 四、附上结构图 ###

![最开始][1240]

![上滑一半][1240 1]

![上滑完成][1240 2]IOS下拉放大图片

> 代码地址如下：  
> [http://www.demodashi.com/demo/11623.html][http_www.demodashi.com_demo_11623.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11623.html]: http://www.demodashi.com/demo/11623.html
[strip]: /images/20220530/b3730024a3824a389da5c68847e43cd1.png
[kkNQlQqxbR6DOAyzO1T.png]: /images/20220530/dcd7f52d31e440228e9a264a88dd1fa5.png
[uDu25BIYSMbeba1RXh4.png]: /images/20220530/c70d0a74bf334cd388e2cf52a51656d0.png
[1240]: /images/20220530/137f3475c7ff469298a2dfbacc621c52.png
[1240 1]: /images/20220530/99d54b5bee0049aba03838c9c094cadf.png
[1240 2]: /images/20220530/d5f337227c404e2392ae95a902cda295.png