tableView下拉图片变大的实现过程<一>

screenshot.png

先看效果:

效果图.gif

分析思路,当我往下拉的时候图片定在navigationbar下面,图片拉伸,而且cell和图片间的间隙始终不变,可以考虑用headerView做,但我也可以在cell上加一张图片,图片为tableview的子控件,当满足向下拉的条件时改变图片的位置和大小。这里我们先用第二种方法做。

-_-|||开撸

先把主界面搭出来(tableview的设置就略了)
这里设置contentInset是为了不把cell挡住

//设置图片的内边距空出一个imageView的位置
    self.tableView.contentInset = UIEdgeInsetsMake(imageHeight, 0, 0, 0);
    CGSize screenSize = [UIScreen mainScreen].bounds.size;
    //把图片设置到对应位置上
    UIImageView *topImgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -imageHeight, screenSize.width, imageHeight)];

这样主界面就搭好了,开始处理下拉操作(代码链接在最后,可以先下载看看)

这里有个误区,一开始我想把y值写死,这样在往下拉的范围内就使图片顶部定在一个位置,但是这里的imageView是tableview的子控件,控件本身的位置就是死的,拖拽只是控制tableview的内容上下滚动,并不改变子控件的frame属性。

现在我的contentInset是的图片的高度,所以我图片的y值位置就应该是-imageHeight

当我向下移动50的时候也就是contentOffset.y改变了50,这样我中间给图片留的位置就为imageHeight+50,所以我需要把y值重新赋值,因为有导航条的原因,scrollerView.contentOffset.y会自动下移navigationBarHeight(64)的高度,我需要加上navigationBarHeight 才能算出scrollerView.contentOffset.y的真实距离,也就是变量y

此时图片的y值应该等于-(imageHeight+50),y的初始值是- imageHeight 当向下拉50后变为-(imageHeight+50)所以把变量y赋值给图片的y值就实现向下拉会停在navigationBar的底部,再改变高度就能实现拉伸效果

#pragma mark - 监听滚动(程序启动会调用2次,设置内边距会再调用一次)
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //因为有导航栏的关系,所以要获得移动的距离需要加上导航栏的高度
    CGFloat y = scrollView.contentOffset.y + navigationBarHeight;
    
    if (y < -imageHeight) {
        
        CGRect frame = self.topImgView.frame;
        //MARK: 核心代码
        frame.origin.y = y;
        frame.size.height = -y;
        
        self.topImgView.frame = frame;
        
    }

}

现在的效果图

效果图1.gif

现在大体上已经实现了,但是左右也要拉伸,这是要用到一个属性

// UIViewContentModeScaleAspectFill也会证图片比例不变,但是是填充整个ImageView的,可能只有部分图片显示出来。
    //这里是为了让图片宽度随着高度的拉伸而拉伸
    topImgView.contentMode = UIViewContentModeScaleAspectFill;

看一下效果

Snip20160415_3.png

因为它是根据实际宽高比来填充的,所以图片多少会有点变大,如图:图片挡住了第0行cell的一部分,并且图片上方也不在顶住navigationbar了,并且如果有一天需求改了,我需要显示的图片高度为50,但是这个属性是根据图片的原始大小来的,所以改了也没用:如图

Snip20160415_4.png

既然对图片有要求,那我们就处理一下再给它不就好咯,不管图片从哪来的我把它设置成我想要的大小

#pragma mark - 给图片设置尺寸
- (UIImage *)originImage:(UIImage *)image scaleToSize:(CGSize)size{
    
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
    
    UIImage * scaleImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return scaleImage;
}

在设置图片之前通过调用该方法改变图片大小

//MARK: 把加载的图片设置需要的大小
    UIImage *oldImage = [UIImage imageNamed:@"5"];
    topImgView.image = [self originImage:oldImage scaleToSize:CGSizeMake(screenSize.width, imageHeight)];

大功告成!不过这个一般是个人中心界面所以我设了一个头像

UIImageView * iconView = [[UIImageView alloc]initWithFrame:CGRectMake(iconMargin, imageHeight - (iconMargin + iconH), iconW, iconH)];
    
    iconView.layer.cornerRadius =8.0f;
    iconView.image = [UIImage imageNamed:@"01"];
    iconView.clipsToBounds = YES;
    //自动布局,自适应顶部
    iconView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
    [self.topImgView addSubview:iconView];
    self.iconView = iconView;

如果想在图片中加其他控件可以参照这个头像的设置

最终效果

效果图 下午10.47.13.gif

另外一种就是用headerView做了(现在还没写完~~)点击这里,源码见github:github地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容

  • 1.badgeVaule气泡提示 2.git终端命令方法> pwd查看全部 >cd>ls >之后桌面找到文件夹内容...
    i得深刻方得S阅读 4,607评论 1 9
  • 1.nav1.navigationBar.barStyle=UIBarStyleBlack; //改变导航栏背景颜...
    SadMine阅读 1,538评论 1 4
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,947评论 4 60
  • 我妈说 谁老了 我不知道 又是谁死了 不 是去了 老了 我日日夜夜要念的 那一抹云 是去了 还是老了 她的子子...
    滥作阅读 261评论 1 0
  • ——《山海经全译》书评 近些年来,大热的欧美魔幻影视作品让观众们着实过足了瘾,真爱粉们自觉地针对影视剧集、原著作品...
    山千黛阅读 340评论 2 4