美文网首页iOS开发iOS之功能细节iOS程序猿
iOS开发 | 几行代码实现tableView下拉放大表头图片

iOS开发 | 几行代码实现tableView下拉放大表头图片

作者: 无夜之星辰 | 来源:发表于2017-05-31 17:40 被阅读690次
允儿卖萌

背景:

一个很常见的效果,如果这个tableView不需要下拉刷新并且想避免下拉时展示空白背景时可以采用。

效果如下:

效果展示.gif

思路:

从结构来看这张图应该是tableView的表头,即tableHeaderView。当我们向下拉tableView的时候,改变了tableView的contentOffset,将这个contentOffset与表头图片的frame关联起来即可实现下拉放大图片。

温馨提示:不要在秋名山上车

参考代码:

1.设置tableView的表头

    self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.width, 200)];
    self.imageView.image = [UIImage imageNamed:@"允儿.jpg"];
    self.imageView.contentMode = UIViewContentModeScaleAspectFill; // 按比例填充,很关键
    
    // 设置表头
    self.tableView.tableHeaderView = self.imageView;

2.在scrollViewDidScroll:方法中进行逻辑处理

    // 控制表头图片的放大
    if (scrollView.contentOffset.y < 0) {
        // 向下拉多少
        // 表头就向上移多少
        self.imageView.y = scrollView.contentOffset.y;
        // 高度就增加多少
        self.imageView.height = 200 + fabs(scrollView.contentOffset.y);
    }else{
        // 复原
        self.imageView.y = 0;
        self.imageView.height = 200;
    }

会喊666.gif

demo

GitHub Demo

相关文章

网友评论

  • First灬DKS:博主你好:我这边下拉的时候,怎么图片下拉20高度以后,才会开始放大的效果呢?请问知道如何解决吗?
  • 春泥Fu:我日,看到这表情我喷了,我也会喊666啊!!!!
    无夜之星辰:@春泥Fu six six six:sweat_smile:
  • 8d221e7fbf7e:您好,我能要一个您的微信号码嘛?我是gitchat的主持人。想邀请您来我们gitchat做一次技术分享
  • 男人宫:你cell里又创建个tableview是干嘛的
    无夜之星辰:@男人宫 这是tableView嵌套tableView的逻辑没处理好:sweat_smile:
    男人宫:@无夜之星辰 看懂你那个tableview了。不过你这demo有bug,向上滑动后如果停在某个位置,再向下就不能滑动了
    无夜之星辰:@男人宫 之前测试tableView嵌套的。不用管
  • 春暖花已开:小妹夫写得不错,简洁明了!:relaxed:
    无夜之星辰:@人民重重 我靠我什么时候成你妹夫了:flushed:

本文标题:iOS开发 | 几行代码实现tableView下拉放大表头图片

本文链接:https://www.haomeiwen.com/subject/prljfxtx.html