tableView下拉头部高度变化实现原理
2015-12-01 本文已影响562人
微微笑的蜗牛
当tableview下拉时,头部高度随之改变。如图所示。
1.gif实现思路:
1、添加view到tableview上,设置tableView的contentInset,这样,tableview上部分就空出来了,刚好显示出view。
2、在scrollViewDidScroll中,根据滑动的距离,设置headerView的高度和y。因为我们需要将headerview固定在顶部,所以y值也要调整。
有很多都是下拉图片放大的效果,可以根据下拉的距离来改变scale transform。
需要注意的是:改变了contentInset之后,contentOffset会变化,其实也是改变了tableview的bounds。假设contentInset.top = 20,则contentOffset = -20, bounds.y = -20。bounds的改变,会影响subview的布局。 默认bounds.origin = CGPointZero,(0, 0)就在左上角,如果我们改变了bounds.y = 20,那么(0, 20)这个坐标才会显示在左上角,相当于上移了20。
主要代码如下:
创建header
var headerView: UIView?
let headerViewHeight: CGFloat = 44
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
tableView.contentInset = UIEdgeInsetsMake(headerViewHeight, 0, 0, 0)
headerView = UIView()
// 注意y值
headerView!.frame = CGRectMake(0, -headerViewHeight, view.bounds.size.width, headerViewHeight)
headerView!.backgroundColor = UIColor.redColor()
tableView.addSubview(headerView!)
}
监听scroll
func scrollViewDidScroll(scrollView: UIScrollView) {
// 若设置了contentInset.top,此时contentOffset.y = -contentInset.top - realOffset
let contentOffsetY = scrollView.contentOffset.y
// real scroll offset
let totalOffsetY = scrollView.contentInset.top + contentOffsetY
print("contentOffsetY:\(contentOffsetY), totalOffsetY:\(totalOffsetY)")
if let headerView = headerView {
var size = headerView.frame.size
size.height = headerViewHeight - totalOffsetY
headerView.frame = CGRectMake(0, contentOffsetY, size.width, size.height)
}
}