关闭

ios下拉放大图片效果

356人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8104次
    • 积分:166
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:2篇
    • 译文:0篇
    • 评论:1条
    最新评论