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...

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

#import "ViewController.h" #define kScreenbounds [UIScreen mainScreen].bounds #define kScreenW...

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

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

iOS_下拉图片放大效果

今天讲一下App中比较常见的一个效果。就是下拉的时候,图片等比例放大。网上一些demo都有这那的小瑕疵。稍微研究了一下,做了点修改,效果很OK。 具体如下: 1.新建一个类:JYStretchTa...

[iOS]实现UITableView头部带有图片并且下拉图片放大效果

最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图: 1.gif 实现原理很简单,就是在UITableview上边添加一个图片子视图,...

UITableView下拉色彩渐变,图片变大效果(模仿链家网iOS APP首页)

最近链家网很火啊,融资60亿的新闻铺天盖地,然后就下载他们的APP来好好看了一番。首页这个下拉渐变的效果挺有意思,其实见得也挺多,今天就来做一个呗。 先来看一下链家网的效果:随着主页一直往上拉或者...

安卓学习笔记---实现下拉图片放大,松开又自动回去效果 (ListView与ScrollView)

最近做项目我想实现以下就是下拉图片可以进行缩放的那种,去了github上去看了看,果然让我找到了,于是下载下来就开始运行查看了,下面是运行的效果: 这是有3个,一个ListView,一个Scrol...

ImgListView头图片下拉放大效果

  • 2016年08月01日 11:27
  • 1.73MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ios下拉放大图片效果
举报原因:
原因补充:

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