ios下拉放大图片效果

一般使用下拉放大的场景比较多是在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;
}

以上代码就是全部代码了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值