IOS下拉放大图片

2022-12-08 14:27:34

代码地址如下：
http://www.demodashi.com/demo/11623.html

一、实现效果图

现在越来越多的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);

}