tableView下拉放大图片的实现

在iOS产品中，特别是个人主页里面，下拉放大顶部图片的效果很常见，也很炫酷(请允许我自恋一下，在公司项目中，我额外增加了这个效果，老大就说特别好看，可惜安卓实现不出来，hiahiahia,到这里有木有为iOS的风格而自豪)，今天就简单讲一下实现这种效果的思路：

1.首先得有个tableView，我处理的方式是设置tableView的contentInset，在top空出一片图片的原始区域，

profileTab.contentInset = UIEdgeInsetsMake(profileHeader.frame.height, 0, 0, 0)

2.下一步就是监听滚动代理的时候的处理，这里面主要注意的是要时刻改变顶部视图的尺寸，说白了就是y值或者frame值

当tableView下拉的时候，要改变height和y，具体做法如下

let offset = scrollView.contentOffset.y + scrollView.contentInset.top
var newFrame = profileHeader.frame
 newFrame.size.height = scaleToHeight(size: 230)
            newFrame.origin.y = -((scaleToHeight(size: 230) < offset) ? scaleToHeight(size: 230) : offset)
            profileHeader.frame = newFrame

ps:这里的scaleToHeight(size:CGFloat)是我自己封装的根据宽高适配屏幕

3.如下是向上滚动，就要缩短其高度了

  let offset = scrollView.contentOffset.y + scrollView.contentInset.top
    var newFrame = profileHeader.frame
        if offset < 0 {
            newFrame.origin.y = 0
            newFrame.size.height = scaleToHeight(size: 230) - offset
            profileHeader.frame = newFrame
            target.updateOpaueViewAlpha(alpha: 0.0)
        }

整体的代码如下：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offset = scrollView.contentOffset.y + scrollView.contentInset.top
        var newFrame = profileHeader.frame
        if offset < 0 {
            newFrame.origin.y = 0
            newFrame.size.height = scaleToHeight(size: 230) - offset
            profileHeader.frame = newFrame
            target.updateOpaueViewAlpha(alpha: 0.0)
        }
        else {
        
            newFrame.size.height = scaleToHeight(size: 230)
            newFrame.origin.y = -((scaleToHeight(size: 230) < offset) ? scaleToHeight(size: 230) : offset)
            profileHeader.frame = newFrame
            if offset > scaleToHeight(size: 230) {
                target.updateOpaueViewAlpha(alpha: 1.0)
            }else {
                target.updateOpaueViewAlpha(alpha: (offset / scaleToHeight(size: 230)))
            }
        }
    }

对于这个实现思路其实不难，主要就是理解contentInset这个属性，scrollView（当然包括继承于它的tableView，collectionView）有contentInset,contentOffset,contentSize几个属性，我查阅资料这样理解的：

contentInset不属于scrollView滚动区域，可以变态理解为scrollview之外的部分，这一部分就是一个简单的空白区，scrollview真实的尺寸是从空白区域之外开始算起的

contentOffset 就是偏移量，它的滚动不包括上面的contentInset，有兴趣的伙伴可以打印试一下，也可以去网上搜索一些大神写的博客，我记得有一篇很详细，还上了图

contentSize 就是scrollView能滚动的范围

tableView中的tableHeaderView,sectionHeader,tableFooterView,sectionFooter，以及cell都处在contentSize中，在计算contentOffset的时候也要考虑到它们

最后，值得一提的是，对于单纯的下拉放大，笔者觉得上面的方法已经很好，而对于既有下拉放大，又有区头悬浮在导航栏之下，而系统导航栏又隐藏自定义导航栏，的这种需求，真的是让人头疼，笔者在经过一番处理后也实现了这种效果，下面张贴出来代码（这是根据KVO监听contentOffset属性做的)，当然笔者的方法可能仅仅适用于项目中，有比较通用的方法的伙伴希望能不吝赐教，分享出来一起学习进步：

    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "contentOffset" {
            
            let offset = change?[NSKeyValueChangeKey.newKey] as! CGPoint
            if offset.y <= 0 && -offset.y >= 64 {
                let newFrame = CGRect(x: 0, y: 0, width: kScreenW, height: -offset.y)
                teacherView.frame = newFrame
                if -offset.y < 64 {
                    teacherTab.contentInset = UIEdgeInsetsMake(-offset.y, 0, scaleToHeight(size: 20), 0)
                }else {
                
                    if -offset.y < 82 {
                        teacherTab.contentInset = UIEdgeInsetsMake(scaleToHeight(size: 228) + offset.y, 0, scaleToHeight(size: 20), 0)
                    }else {
                    
                        teacherTab.contentInset = UIEdgeInsetsMake(scaleToHeight(size: 228), 0, scaleToHeight(size: 20), 0)
                    }
                }
                target.updateOpaueViewAlpha(alpha: (offset.y + scaleToHeight(size: 228)) / (scaleToHeight(size: 228) - 64))
            }else {
            
                let newFrame = CGRect(x: 0, y: 0, width: kScreenW, height:10)
                teacherView.frame = newFrame
                teacherTab.contentInset = UIEdgeInsetsMake(64, 0, scaleToHeight(size: 20), 0)
                target.updateOpaueViewAlpha(alpha: 1.0)
            }
            
            
        }
    }