ios下拉放大图片效果

原创 2015年11月19日 01:24:21

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

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

iOS个人页面图片下拉放大效果

在研究苹果原生UIImageView控件的时候,知道有一个属性叫contentMode.那这个属性是干嘛的呢?和下拉拖动图放大有什么关系呢?我们先来看一下效果图再说:(同时也欢迎大家来我的GitHub...
  • IM_Loser
  • IM_Loser
  • 2016年12月17日 16:34
  • 2941

经验之谈—实现图片下拉放大的效果

这里我们主要是用一下,如何能保持原来的图片的宽高比来轻松的实现放大的效果,主要的是UIViewContentModeScaleAspectFill这个起的效果: 我们用tableView来展示这个效果...
  • yi_zz32
  • yi_zz32
  • 2015年12月22日 19:15
  • 10508

iOS下拉tableView实现上面的图片放大效果

#import "ViewController.h" #define kScreenbounds [UIScreen mainScreen].bounds #define kScreenW...
  • walkerwqp
  • walkerwqp
  • 2016年09月14日 11:30
  • 2083

iOS 图片下拉变大

前言在iOS的开发中TableView和ScrollView是可以上下滑动的,但是在下拉的过程中,顶部会出现留白的现象,于是就出现了类似于QQ空间中那样下拉顶部的图片变大的效果。看起看很高大上,其实实...
  • u010545480
  • u010545480
  • 2016年11月03日 14:06
  • 1286

实现图片下拉放大和导航栏头像缩放效果

效果如下:
  • liuyang11908
  • liuyang11908
  • 2017年01月16日 15:44
  • 658

TableView头部图片下拉图片放大

浏览商品时,组头放置的商品图片,下拉UITableView,会有头部图片放大的效果...
  • SharkToping
  • SharkToping
  • 2016年09月06日 18:10
  • 1073

下拉实现头部图片放大效果,实现类似QQ,新浪个人中心界面

今天要写的这个效果属于刷新类,比较实用,像很多流行的 app 都是用了这种效果,大家熟知的QQ空间、微博个人主页等。 本篇思路其实是完全按照android中已有的思路去实现的这种效果。 1.那么在...
  • eyeone
  • eyeone
  • 2016年09月18日 00:09
  • 842

自定义scrollView实现顶部图片下拉放大

自定义scrollView实现顶部图片下拉放大
  • l448288137
  • l448288137
  • 2016年03月28日 10:59
  • 7776

iOS编程——最简单的实现UITableView下拉时顶部图片放大消失的效果

常常见到很多App使用这个效果:tableView顶部为一个图片,向下滑动tableView时图片会放大,向上滑动时图片会不同步的上移消失。比如下面图所示: 实现原理很简单,就是使用下面scr...
  • wc455287693
  • wc455287693
  • 2015年09月11日 16:42
  • 975

Android实现下拉放大图片,松手自动反弹效果

Android实现下拉放大图片,松手自动反弹效果
  • bai981002
  • bai981002
  • 2017年12月20日 13:44
  • 278
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ios下拉放大图片效果
举报原因:
原因补充:

(最多只允许输入30个字)