在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)
}
}
}
